Skip to content

Linting React Apps in VSCode

Setup

Install Eslint and Prettier

1
yarn add -D eslint prettier eslint-config-prettier eslint-plugin-prettier

.eslintrc

1
2
3
4
5
6
{
  "extends": [
    "react-app",
    "plugin:prettier/recommended"
  ]
}

VSCode User Settings

Enable formatOnSave except for JavaScript files as those are taken care of by Eslint.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
{
  "editor.formatOnSave": true,
  "[javascript]": {
    "editor.formatOnSave": false
  },
  "eslint.autofixOnSave": true,
  "eslint.alwaysShowStatus": true,
  "prettier.disableLanguages": [
    "js"
  ],
  "files.autoSave": "onFocusChange",
  ...
}

Prettier Command Line

Install a couple of plugins:

1
yarn add -D husky lint-staged

They will help to make prettier focus ONLY on the files not yet staged in Git by integrating to Git hooks.

In package.json file, let us add a couple of things:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
{
  ...
  "scripts": {
    ...
    "precommit": "lint-staged"
  },
  "lint-staged": {
    "src/**/*.{js,jsx,json,css,scss,less}": [
      "prettier --write",
      "git add"
    ]
  },
  ...
}

This can be simplified by pretty-quick plugin:

1
yarn add -D pretty-quick

Now, the snippet above will look like this:

1
2
3
4
5
6
7
8
{
  ...
  "scripts": {
    ...
    "precommit": "pretty-quick --staged"
  },
  ...
}

Voila, it done now. Stop worrying about formatting the code, it will be automatically formatted for you when you save or commit your files.

Taken from:

Maybe also this one: