alesmenzel/linting-example

Linting example

Check the airbnb styleguide to see what the code will look like.

Installation

Install airbnb eslint config:

npx install-peerdeps --dev eslint-config-airbnb

Install prettier and prettier config + plugin for eslint:

npm install --save-dev prettier eslint-config-prettier eslint-plugin-prettier

Install husky and lint-staged for adding git hooks and linting files when commiting or pushing them. This command will automatically add a pre-commit hook to your package.json.

npx mrm lint-staged

( Note: sometimes it does not install husky and lint-staged in your dev dependencies, if thats the case, install them manually npm install --save-dev husky lint-staged )

Now create a .eslintrc file with the following content. We will use airbnb config, but let prettier do the formatting for us (it will disable the conflicting rules in airbnb/prettier).

{
  "extends": ["airbnb", "plugin:prettier/recommended"]
}

Then create a .prettierrc file. I recommend to set the printWidth (line length) to something bigger than 80, e.g. a 100 (or 120 is also a common option).

{
  "trailingComma": "es5",
  "singleQuote": true,
  "printWidth": 100
}

Now the final touches. Add a pre-push git hook to our package.json. We will be running our test suite.

{
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged",
      "pre-push": "npm test"
    }
  }
}

Then add a script that will run our linter and formatter. We will also change the test script to run the linter.

{
  "scripts": {
    "lint": "eslint .",
    "format": "eslint --fix .",
    "test": "npm run lint"
  }
}

Prettier can also format other file types besides just javascript. We will add .json and .md (Note that we use prettier directly).

{
  "lint-staged": {
    "*.js": ["eslint --fix", "git add"],
    "*.{json,md}": ["prettier --write", "git add"]
  }
}

Usage

Now whenever you create a commit, the code will be auto formatted with prettier.
(Note: you can skip git hooks by passing --no-verify (-n) option to git)

$ git commit -m "made some style mistakes, but prettier will fix it"
husky > pre-commit (node v10.15.0)
Stashing changes... [started]
Stashing changes... [skipped]
→ No partially staged files found...
Running linters... [started]
Running tasks for *.js [started]
Running tasks for *.{json,md} [started]
Running tasks for *.{json,md} [skipped]
→ No staged files match *.{json,md}
eslint --fix [started]
eslint --fix [completed]
git add [started]
git add [completed]
Running tasks for *.js [completed]
Running linters... [completed]
...

Running the lint:

$ npm run lint

> linting-example@1.0.0 lint C:\Projects\linting-example
> eslint .


C:\Projects\linting-example\index.js
   7:10  error    'doSomething' is defined but never used  no-unused-vars
   7:22  error    'arg1' is defined but never used         no-unused-vars
   7:28  error    'next' is defined but never used         no-unused-vars
  28:1   warning  Unexpected console statement             no-console
  29:1   warning  Unexpected console statement             no-console
  30:1   warning  Unexpected console statement             no-console
  31:1   warning  Unexpected console statement             no-console
  32:1   warning  Unexpected console statement             no-console
  33:1   warning  Unexpected console statement             no-console
  34:1   warning  Unexpected console statement             no-console
  35:1   warning  Unexpected console statement             no-console
  36:1   warning  Unexpected console statement             no-console
  37:1   warning  Unexpected console statement             no-console
  38:1   warning  Unexpected console statement             no-console
  39:1   warning  Unexpected console statement             no-console
  40:1   warning  Unexpected console statement             no-console

✖ 16 problems (3 errors, 13 warnings)

Ignoring stuff

In case you need for some odd reason to disable linting, you can add a /* eslint-disable */ comment to the top of your file.

/* eslint-disable */

If you want to disable a single line:

// this will disable all rules
/* eslint-disable-next-line */
function(a,b,c,d) {}

// this will disable a specific rule
/* eslint-disable-next-line no-console */
console.log('log me something')

To disable a rule (or linting completely) for a block, use:

/* eslint-disable no-console */
console.log('log');
console.log('me');
console.log('something');
/* eslint-enable no-console */