Add Prettier and ESLint to VS Code with Create React App

1. Install Prettier and the ESLint Plugin

   • Note: You will need to install ESLint if you are not using Create React App

$ npm i -D prettier eslint-plugin-prettier

2. Install the following VS Code Extensions

   • ESLint
   • Prettier
3. Create the Prettier and ESLint Configuration files
4. note Make sure to create this file inside React app root

$ touch .eslintrc .prettierrc

.eslintrc

{
  "extends": "react-app",
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": "error"
  }
}

.prettierrc

• Will override default prettier settings and make all JavaScript files use single quotes instead of double quotes

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

4. Apply Prettier formatting on Save (Optional but recommended)
5. You most likely want to apply the Prettier formatting whenever you save your files. To do so, add the following to your Visual Studio Code Workplace Settings:

"editor.formatOnSave": true

5. Prevent Prettier Violations from being Committed (Optional but recommended)
6. To prevent unformatted code from being committed to Git you can add a pre-commit hook. There are a few ways to do this, I will show the steps using pretty-quick and husky setup (option 2). We’ll have gone with this option as pretty-quick respects the .prettierrc file
7. note: Your Git repository must already be initialized, otherwise the precommit hooks will not be installed by husky

Install the packages:

$ npm i -D pretty-quick husky

• Then add the husky section to your package.json file:

package.json

// MORE CODE

"husky": {
    "hooks": {
      "pre-commit": "pretty-quick --staged"
    }
 }

// MORE CODE

6. Test it out
7. You should see your React code format on save
8. Add to GitHub and it will auto format before committing code

Reference

• medium article