Add Eslint & Prettier to React App

Code quality tools make easy code-styling consistency in your team. Eslint, Prettier with Husky and lint-staged are perfect match for TypeScript / JavaScript apps.

However, adding custom eslint config with prettier to existing React codebase sometimes become confusing. But having it worth the effort.

Photo by Yan Ots on Unsplash

Here are some notes of my own experience. I’ll try to achieve eslint assistance at-least what’s provided in CRA.

1. First, install eslint and plugins.

$ npm i -D eslint eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-jsx-a11y @typescript-eslint/eslint-plugin @typescript-eslint/parser

2. Install prettier & friends

$ npm i -D prettier eslint-config-prettier eslint-plugin-prettier

3. Drop .eslintrc.js to your project root with contents:

4. Add prettier config

Congrats. You are done!

Bonus: Git Hooks with Husky & Lint Staged

$ npx mrm lint-staged

Update lint-staged command as following:

"lint-staged": {
  "*.{ts,tsx}": "eslint --cache --fix"
}

You should commit .husky/ & package.json changes.

Bonus: VS Code Integration (with fix on save)

First, install vscode-eslint extension.

Open settings.json (comb. ⌘ +⇧ + P or Ctrl + ⇧ + P).

Add following configuration:

"editor.codeActionsOnSave": {
  "source.fixAll.eslint": true
},

Make sure, editor.formatOnSave is not on to avoid conflicts.