TheLazy.Dev
Portfolio GitHub

Blog

react |eslint |prettier

ESLint and Prettier configuration for React project

tsamaya

Arnaud Ferrand

Posted on March 21, 2023

ESLint and Prettier configuration for React project

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

💖 💪 🙅 🚩
tsamaya
Arnaud Ferrand

Posted on March 21, 2023

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

Regras customizáveis para Prettier + Eslint em React
react Regras customizáveis para Prettier + Eslint em React

June 24, 2024

Customizable rules for Prettier + Eslint in React
react Customizable rules for Prettier + Eslint in React

June 24, 2024

Setup Eslint + Prettier for code standardization in React
react Setup Eslint + Prettier for code standardization in React

May 27, 2024

Setup Eslint + Prettier para padronização de código em React
react Setup Eslint + Prettier para padronização de código em React

May 27, 2024

ESLint and Prettier configuration for React project
react ESLint and Prettier configuration for React project

March 21, 2023