ESLint and Prettier configuration for React project
Tags: react, eslint, prettier
Published: 2023-03-21 04:53:52


> 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:

```bash
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`

```bash
? 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!

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

```

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

```bash
? Does your project use TypeScript? › No / Yes

```

up to you. Here I went for No.

```bash
? 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)

```bash
? 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:

```bash
? 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>

```

```bash
? 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.

```bash
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:

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

```bash
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

```json
  "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:

```js
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

```bash
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

```js
module.exports = {
  singleQuote: true,
}
```

Read more about the other options on prettier [website](https://prettier.io/docs/en/configuration.html).

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

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

```

add two scripts in the `package.json` file

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

```

then you will be able to run

```bash
npm run lint

```

just to check your code

```bash
npm run lint:fix

```

to check and automatically fix what can be fixed.

### Pre-commit Hook with lint-staged

```bash
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

Read more at the [lint-staged](https://github.com/okonet/lint-staged#configuration) repo.

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

```yml
node_modules/
build/
coverage/
```

You are all set happy coding!

## Resources

- Photo by [Andrea De Santis](https://unsplash.com/@santesson89?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com/s/photos/dragon-bridge?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)