ESLint, Prettier & Husky/lint-staged Pre-commits

Installation

This will install eslint and prettier plus the necessary config modifications to make both work with each other nicely:

  npm i -D eslint prettier eslint-config-prettier

This will install husky and lint-staged, then add a configuration to the project’s package.json that will automatically format supported files in a pre-commit hook. Make sure Prettier is installed and is in your devDependencies before you proceed.

npx mrm@2 lint-staged

Configuration

Configuring Eslint

1. Set up a configuration file

Running the following command triggers a sequence of prompts that produce a .eslintrc* file.

  ./node_modules/.bin/eslint --init

2. Adding rules

Rules inside the eslintrc.js file follow this format:

module.exports = {
  rules: {
      semi: ['error', 'always'],
      quotes: ['error', 'double']
  }
}

semi and quotes are the name of the rules to set. Their values can only be one out of three values:

off or 0 - turn the rule off
warn or 1 - turn the rule on as a warning (doesn't affect exit code)
error or 2 - turn the rule on as an error (exit code is 1 when triggered)

3. Inline configuration with comments

Comments can configure linting on an per-line basis like so:

/* eslint quotes: "off", curly: "error" */

/* eslint quotes: 0, curly: 2 */

In both examples, quotes is turned off and curly is turned on as an error. The second example uses the numerical representation of the rules's value.

If a rule has additional options, they can be specified using an array literal syntax:

/* eslint quotes: ["error", "double"], curly: 2 */

They can also include descriptions to explain why the comment is necessary. Description goes after configuration separated by at least two - characters:

/* eslint quotes: "off", curly: "error" -- Here's a description about why this configuration is necessary. */


/* eslint quotes: "off", curly: "error"
  --------
  Here's a description about why this configuration is necessary. */


/* eslint quotes: "off", curly: "error"
 * --------
 * This will not work due to the line above starting with a '*' character.
 */

4. Create an `.eslintignore` file

Much like a .gitignore, this file contains all the files and directories that shouldn't be parsed by the linter. Common uses:

.env
.env-example
.gitignore
node_modules/*
package-lock.json
package.json
.eslintignore
.gitattributes

If we are going to write our tests in plain JS but the project is set up to be linted following TS, we should also place the test folder inside the .eslintignore

Configuring Prettier

1. Add prettier to the `.eslintrc.js` file

Add "prettier" to the "extends" array in the .eslintrc.js file. Make sure to put it last, so it can override other configs.

{
  "extends": [
  "some-other-config-you-use",
  "prettier"
  ]
}

2. Creating the `.prettierrc.js`

Then, much like with eslint we need a .prettierrc.js file with the configuration we need. The whole list of options is here. As an example let's have a look at this example:

module.exports = {
 "printWidth": 80,
 "tabWidth": 2,
 "useTabs": false,
 "trailingComma": "all",
 "singleQuote": true,
 "semi": true,
 "bracketSpacing": true,
 "arrowParens": "avoid",
 "jsxBracketSameLine":  true,
 "quoteProps": "consistent",
 "proseWrap":"preserve",
 "endOfLine":"lf"
}

3. Creating the `.prettierignore`

Pretty much the same stuff that we did for the .eslintignore file.

Usage

Using Eslint

It can be run on any file or directory like this:

  ./node_modules/.bin/eslint yourfile.js

Using Prettier

When you want to check if your files are formatted, you can run Prettier with the --check flag (or -c). This will output a human-friendly message and a list of unformatted files, if any.

prettier --check "src/**/*.js"

Alternatively, the wiser option is to configure VSCode to use Prettier as a formater every time you save a file with ⌘ + S

juan-calle/environment-setup.md