How to Setup ESLint and Prettier in VSCode For React Project

How to setup ESLint with Prettier in VSCode for React Project

June 10, 2018

1 minute read

Create a React App: npx create-react-app my-app
Install ESLint and Prettier in VSCode.
In the project directory, run npm i prettier eslint-config-prettier eslint-plugin-prettier -D
In User Settings (ctrl + ,), put in the following:

{
    "editor.formatOnSave": true,
    "[javascript]": {
        "editor.formatOnSave": false
    },
    "eslint.autoFixOnSave": true,
    "eslint.alwaysShowStatus": true,
    "prettier.disableLanguages": [
        "js"
    ],
    "files.autoSave": "onFocusChange"
}

Create an .eslintrc file:

{
  "extends": ["react-app", "plugin:prettier/recommended"]
}

If your project is not under git, run git init.
Run npm i husky lint-staged -D and npm i pretty-quick -D.
In package.json, add "precommit": "pretty-quick --staged" to scripts.

comments powered by Disqus