DEV Community

Cover image for ESLint and Prettier configuration for React project
Arnaud Ferrand
Arnaud Ferrand

Posted on

ESLint and Prettier configuration for React project

#react #eslint #prettier

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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

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

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

? Does your project use TypeScript? › No / Yes
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode 
? What format do you want your config file to be in? …
❯ JavaScript
  YAML
  JSON
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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

? Which package manager do you want to use? …
❯ npm
  yarn
  pnpm
Enter fullscreen mode Exit fullscreen mode 
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
Enter fullscreen mode Exit fullscreen mode

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"
  }
Enter fullscreen mode Exit fullscreen mode

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: {},
}
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

create a .prettierrc.js file

module.exports = {
  singleQuote: true,
}
Enter fullscreen mode Exit fullscreen mode

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',
  ],
Enter fullscreen mode Exit fullscreen mode

add two scripts in the package.json file

  "scripts": {
    "lint": "eslint .",
    "lint:fix": "eslint -fix ."
  },
Enter fullscreen mode Exit fullscreen mode

then you will be able to run

npm run lint
Enter fullscreen mode Exit fullscreen mode

just to check your code

npm run lint:fix
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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

Read more at the lint-staged repo.

now let's create two files .eslintignore, and .prettierignore with the same content:

node_modules/
build/
coverage/
Enter fullscreen mode Exit fullscreen mode

You are all set happy coding!

Resources

Top comments (0)

Read next

sallbro profile image

Full Guide For React Developer

Salman Asu -

olga_tash profile image

SVAR Gantt: New Open Source, Interactive Gantt Chart for React

Olga T. -

garciadiazjaime profile image

React: LinkedIn Access Token in 10 Steps

Jaime -

nicooprat profile image

Incrementally fixing lots of ESlint errors in a clean way with ESlint Nibble

Nico Prat -