ESLint and Prettier configuration for React project

Originaly published on dev.to

ESLint is a tool for identifying and reporting on patterns found in ECMAScript/JavaScript code, with the goal of making code more consistent and avoiding bugs.

Prettier is an opinionated code formatter. It ensures a consistent style by parsing your code and re-writing it with its rules.

If you are using VScode, and already have the ESLINT and PRETTIER plugins, as you are goigng to change the configuration as you follow the tutorial, you might have linter/prettier errors displayed, the solution is to restart VSCode.

In your git working folder running the following command will guide you with the ESLint configuration, we are going to use the airbnb style guide:

npm init @eslint/config
? How would you like to use ESLint? …
  To check syntax only
  To check syntax and find problems
❯ To check syntax, find problems, and enforce code style

Select To check syntax, find problems, and enforce code style

? What type of modules does your project use? …
❯ JavaScript modules (import/export)
  CommonJS (require/exports)
  None of these

For React / React-Native, you probably use import/export!

? Which framework does your project use? …
❯ React
  Vue.js
  None of these

Use React, but it also works with Vue.js.

? Does your project use TypeScript? › No / Yes

up to you. Here I went for No.

? Where does your code run? …  (Press <space> to select, <a> to toggle all, <i> to invert selection)
✔ Browser
✔ Node

I tend to use both (even for pure React project)

? How would you like to define a style for your project? …
❯ Use a popular style guide
  Answer questions about your style

and now we can choose the style:

? Which style guide do you want to follow? …
❯ Airbnb: <https://github.com/airbnb/javascript>
  Standard: <https://github.com/standard/standard>
  Google: <https://github.com/google/eslint-config-google>
  XO: <https://github.com/xojs/eslint-config-xo>

? What format do you want your config file to be in? …
❯ JavaScript
  YAML
  JSON

I prefer using an .eslintrc.js but up to you if one prefer a different flavour.

Checking peerDependencies of eslint-config-airbnb@latest
Local ESLint installation not found.
The config that you've selected requires the following dependencies:

eslint-plugin-react@^7.28.0 eslint-config-airbnb@latest eslint@^7.32.0 || ^8.2.0 eslint-plugin-import@^2.25.3 eslint-plugin-jsx-a11y@^6.5.1 eslint-plugin-react-hooks@^4.3.0
? Would you like to install them now? › No / Yes

Select yes to install the dependencies. And choose your package manager:

? Which package manager do you want to use? …
❯ npm
  yarn
  pnpm

Installing eslint-plugin-react@^7.28.0, eslint-config-airbnb@latest, eslint@^7.32.0 || ^8.2.0, eslint-plugin-import@^2.25.3, eslint-plugin-jsx-a11y@^6.5.1, eslint-plugin-react-hooks@^4.3.0

up to date, audited 208 packages in 1s

85 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
Successfully created .eslintrc.js file in XXX/YYY

Today is a good day, all packages are safe with 0 vulnerabilities.

Now, your package.json file contains these dev dependencies

  "devDependencies": {
    "eslint": "^8.36.0",
    "eslint-config-airbnb": "^19.0.4",
    "eslint-plugin-import": "^2.27.5",
    "eslint-plugin-jsx-a11y": "^6.7.1",
    "eslint-plugin-react": "^7.32.2",
    "eslint-plugin-react-hooks": "^4.6.0"
  }

Now let's have a look at the eslintrc file. It looks like that:

module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true,
  },
  extends: ['plugin:react/recommended', 'airbnb'],
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 'latest',
    sourceType: 'module',
  },
  plugins: ['react'],
  rules: {},
}

Adding prettier to the configuration

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

added 5 packages, and audited 213 packages in 4s

86 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

create a .prettierrc.js file

module.exports = {
  singleQuote: true,
}

Read more about the other options on prettier website.

Time to update the .eslintrc.js file, adding the prettier recommended plugin

  extends: [
    'plugin:react/recommended',
    'airbnb',
    'plugin:prettier/recommended',
  ],

add two scripts in the package.json file

  "scripts": {
    "lint": "eslint .",
    "lint:fix": "eslint -fix ."
  },

then you will be able to run

npm run lint

just to check your code

npm run lint:fix

to check and automatically fix what can be fixed.

Pre-commit Hook with lint-staged

Running lint-staged...
husky - Git hooks installed
husky - created .husky/pre-commit

This adds husky to hook the pre-commit and run the lint-staged script added to the project’s package.json file

Resources

Photo by Andrea De Santis on Unsplash