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 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
  1. Install prettier & friends.
$ npm i -D prettier eslint-config-prettier eslint-plugin-prettier
  1. Drop .eslintrc.js to your project root with contents:
  1. Add prettier config.

Congrats. You are done!

Bonus: Git Hooks with Husky & Lint Staged

$ npx mrm@2 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.

İsmail Demirbilek

İsmail Demirbilek
almost developer
city of blinds

blog comments powered by Disqus