Manish Sharma

Apr 8, 2020

2 min read

Set up ESLint , Prettier and pre-commit hooks using Husky for React from Scratch.

Image source: https://www.lekoarts.de/static/44543c4e37048123decb24716c03d47d/a6c62/9afba2eff16ab45bbdcc8a0eac34942f00cf5563_eslint_airbnb_vscode_prettier.jpg

Steps to follow for frontend:

  • Add the following devDependencies to the package.json file.
Dev dependencies required to set up ESLint, Prettier and pre-commit hooks using Husky for React.
  • Also add the following scripts to the package.json file.
Scripts to setup pre-commit hooks using Husky and `lint-staged`
  • Run the following command in terminal (In root of your project directory)
rm package-lock.json && rm -rf node_modules/ && npm i
  • Create a .eslintrc file in root folder of your project directory and paste the following config in the .eslintrc file.
ESLint config
  • Create a .prettierrc file in root folder of your project directory and paste the following config in the .prettierrc file.
Prettier config
  • You are all set up with linter, code formatter and pre commit hooks. Now whenever you try to commit code, the linting check will run and throw a warning asking you to fix the issues before you can commit.

(Steps to configure VS Code to make linting more sweet)

  • Install ESLint and Prettier extensions from VS code marketplace.
  • Add the following config to settings.json file of VS Code.
  • Create a .vscode folder in root folder of your project directory.
  • Inside the .vscode folder create a settings.json file
  • Paste the following config in settings.json