Coprime ESLint Config

This is the official ESlint config for Coprime projects. It follows certain syntactic conventions and in general aims for clean minimal code. It is builds on top of the Airbnb config.

Installation

1. If you have Axiom installed, this command should work: x is eslint. This will install all of the packages you need for eslint configuration, including @coprime/eslint-config and all of its peer deps).

2. In your package.json, add the following:

"eslintConfig": {
  "extends": "@coprime/eslint-config"
},

Extending Base Rules

If you need to add your own ESLint configuration, you can do so by adding an .eslintrc.js file to the root of your project and extending this config. It will look like this:

module.exports = {
  extends: '@coprime/eslint-config',
  rules: {
    // your rules here
    // for example:
    semi: [2, "always"], // gasp
  },
}

Installation for Typescript Projects

1. Install the typescript package set: x is typescript.
2. In your package.json, add the following:

"eslintConfig": {
  "extends": "@coprime/eslint-config/typescript"
},

In Packages without a Package.json

In some cases (e.g. Deno) you may not have a package.json. In this case simply create a .eslintrc.js file in your project root and add your eslint config:

module.exports = {
  extends: '@coprime/eslint-config',
}

The Noob Guide to ESLint Configs

It took me ages to understand how the f*** to configure ESLint and get the right settings in your dev environment, so I'm just going to document a quick guide for the ESLint/Prettier newbie.

You can write an ESLint config as an .eslintrc JSON file, or as a .eslintrc.js file that exports a Javascript object, or in the package.json, or probably a dozen other methods. Unless you have a reason not to, just start with the package.json method to avoid adding another dotfile. To do so, you'll add a "eslintConfig" property to package.json and give it an object with all of your configuration.

Configs can be built up from other configs using the extends property in the config object. You can give it a single config or an array of configs, and they'll override each other in sequence. The string you give it is the name of an npm package that exports that config. So, for example, if you have extends: '@coprime/eslint-config', that will use the config exported by this package (the repo you're in). You'll notice that this repo has an index.js file that exports another config object, that is itself built on top of eslint-config-airbnb and Prettier. So when you write extends: @coprime/eslint-config, you get all of this config for free, and you don't have to write anything.

The rules property is for all the individual rules. Every rule has a unique string as its name, e.g. 'semi' or 'import/no-unresolved'. If a name has a /, it is coming from an external plugin, and the string is ${plugin name}/${rule name}. If you need more info on a particular rule, it's best to just google it and see what it's all about. The value of each rule property can either be a number ({0: turn the rule off, 1: warn when the rule is broken, or 2: error when the rule is broken}). You can also use words - "off", "warn", or "error". If you need to give the rule options, the value is an array, with the first item the 0-2, and the second an object with options. You'll need to look up which options you need for what you want to do.

Following the instructions above will set up ESLint and Prettier for your project, but there's one last step to get it to work in your editor/environment, which is likely VSCode if you're like 90% of developers in the early 2020s. To get the automagical powers of hitting cmd+s and watching ESLint and Prettier auto-format and auto-check for errors for you, install the ESLint and Prettier VSCode plugins and then add this to your VSCode settings object (you can get there by hitting cmd+shift+,):

"eslint.alwaysShowStatus": true,
"editor.codeActionsOnSave": {
  "source.fixAll.eslint": true
}

You may need to restart VSCode but it should be working now!

Understanding Prettier + ESLint packages: https://stackoverflow.com/questions/44690308/whats-the-difference-between-prettier-eslint-eslint-plugin-prettier-and-eslint

Understanding Typescript linting: https://www.robertcooper.me/using-eslint-and-prettier-in-a-typescript-project