How to Setup ESLint and Prettier in VSCode For React Project

How to setup ESLint with Prettier in VSCode for React Project

1 minute read

  1. Create a React App: npx create-react-app my-app

  2. Install ESLint and Prettier in VSCode.

  3. In the project directory, run npm i prettier eslint-config-prettier eslint-plugin-prettier -D

  4. 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"
}
  1. Create an .eslintrc file:

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

  1. If your project is not under git, run git init.

  2. Run npm i husky lint-staged -D and npm i pretty-quick -D.

  3. In package.json, add "precommit": "pretty-quick --staged" to scripts.

comments powered by Disqus