Setup ESLint + Prettier + AirBnB Style with Create React App
Tags: javascript, tutorial, react, webdev
Published: 2020-07-27 00:43:24

*Originally posted on my [blog](https://www.andrewmin.info/blog/react-setup/)*

# Overview

There is a multitude of tools to help lint and format your JavaScript code, to the point where setting up a project can get complicated. I'll be showing how to set up a React project with some of the most popular—[ESLint](https://eslint.org) and [Prettier](https://prettier.io), while also integrating AirBnB's popular [style guide](https://airbnb.io/javascript/).

For this guide, you'll need to have Node.js installed since it bundles `npm` and `npx`, the **N**ode **P**ackage **M**anager and **N**pm **P**ackage e**X**ecutor. `npm` installs packages to your project, while `npx` runs package binaries.

# Create a React App

If you don't have a React app already, use [Create React App](https://github.com/facebook/create-react-app#create-react-app--) to set one up for you. It will automatically create a single-page React application with the dependencies (React, Babel, Webpack, etc.) and basic project structure. The README has a full guide, but essentially all you have to do is run the Create React App package script with `npx` then `cd` into the project directory.

```bash
npx create-react-app my-app
cd my-app
```

# ESLint + AirBnB

ESLint is a **linter** which will analyze your code and find common issues, while also identifying styles inconsistent with AirBnB's style guide if configured.

To install ESLint and setup a config file, we'll use another `npx` package script.

```bash
npx eslint --init
```

The script will ask a few questions then go ahead and install its dependencies into the `devDependencies` section in `./package.json`. It also creates `./.eslintrc.json` which contains all the configurations.

```bash
? How would you like to use ESLint? To check syntax, find problems, and enforce code style
? What type of modules does your project use? JavaScript modules (import/export)
? Which framework does your project use? React
? Does your project use TypeScript? No
? Where does your code run? Browser
? How would you like to define a style for your project? Use a popular style guide
? Which style guide do you want to follow? Airbnb: https://github.com/airbnb/javascript
? What format do you want your config file to be in? JSON
```

However, The react-scripts package in Create React App requires an older version of ESLint, as seen by how running `npm start` will spew out a long error message. To work around this, I manually downgraded `eslint` in `./package.json` to the required version printed in the error message. As of writing, I downgraded ESLint from `^7.5.0` to `^6.6.0` then ran `npm install`.

Also, the Create React App toolchain uses [Babel](https://babeljs.io) which transpiles new JavaScript features into older versions to run in older browsers. However, the ESLint parser isn't up to date with ongoing JavaScript changes, so we need to use the `babel-eslint` parser. In `./.eslintrc.json`, add:

```json
"parser": "babel-eslint"
```

To run the linter, run the ESLint package script on a file or every `.js` and `.jsx` file in the src directory.

```bash
npx eslint 'src/**/*.{js,jsx}'
```

# Prettier

Prettier is a code **formatter** that can identify and automatically fix style issues in your code. To install we need to install 3 packages—`prettier` itself, `eslint-plugin-prettier` which integrates Prietter into ESLint, and `eslint-config-prettier` which will turn off ESLint rules that conflict with Prettier.

(Don't forget the `--save-dev` flag which adds these packages to `./package.json`)

```bash
npm install prettier eslint-plugin-prettier eslint-config-prettier --save-dev
```

Now we have to add a few things to `./.eslintrc.json` to get ESLint to work with Prettier.

1. Add `"prettier"` to the `plugins` section.
2. Add `"prettier"` and `prettier/react` to the `extends` section.
3. Add `"prettier/prettier": "error"` to the `rules` section. You can also change "error" to "warn".

Now if we run `npx eslint 'src/**'` we can see warnings/errors from Prettier as well. To run formatting and simple fixes, we can run:

```bash
npx eslint 'src/**/*.{js,jsx}' --fix
```

# More Configuration

First, adding entries to the `rules` section in `./.eslintrc.json` allows you to disable certain ESLint rules. Here are some rules I personally like to disable.

- `"react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }]` - Allow React JSX in `*.js` files. (By default AirBnB enforces that React components have a `*.jsx` extension)
- `"react/state-in-constructor": "off"` - Allow you to declare state as a class variable instead of in the constructor of a React Component.

Next, we can configure Prettier by creating a `./.prettierrc` file and change some [options](https://prettier.io/docs/en/options.html). Here are some of the options I like to change.

- `"printWidth": 100` - Change max line width to 100 characters (default 80)
- `"singleQuote": true` - Use single quotes for strings, as enforced in AirBnB's style (default false)

By now, your files might look something like this.

`package.json`

```json
{
  ...
  "devDependencies": {
    "eslint": "6.6.0",
    "eslint-config-airbnb": "^18.2.0",
    "eslint-config-prettier": "^6.11.0",
    "eslint-plugin-import": "^2.22.0",
    "eslint-plugin-jsx-a11y": "^6.3.1",
    "eslint-plugin-prettier": "^3.1.4",
    "eslint-plugin-react": "^7.20.3",
    "eslint-plugin-react-hooks": "^4.0.8",
    "prettier": "^2.0.5"
  }
}
```

`.eslintrc.json`

```json
{
    "env": {
        "browser": true,
        "es6": true
    },
    "parser": "babel-eslint",
    "extends": [
        "plugin:react/recommended",
        "airbnb",
        "prettier",
        "prettier/react"
    ],
    "globals": {
        "Atomics": "readonly",
        "SharedArrayBuffer": "readonly"
    },
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        },
        "ecmaVersion": 2018,
        "sourceType": "module"
    },
    "plugins": [
        "react",
        "prettier"
    ],
    "rules": {
        "prettier/prettier": "error",
        "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
        "react/state-in-constructor": "off"
    }
}

```

`.prettierrc`

```json
{
    "printWidth": 100,
    "singleQuote": true
}
```

# Integrating with VSCode

To show ESLint warnings inline with your code and run formatting automatically in VSCode, we need to install 2 extensions.

## ESLint

- Install the [ESLint extension](https://github.com/Microsoft/vscode-eslint)
- That's it

## Prettier

- Install the [Prettier extension](https://github.com/prettier/prettier-vscode)

- Edit VSCode `settings.json`

  - Add

    ```json
    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode",
    }
    ```

    To change the formatter for JavaScript files to Prettier.

  - If you also use `*.jsx` files, do the same setting as above for `[javascriptreact]`

  - Now running `Format Document` will use Prettier

  - See the extension README for more details (e.g. running format on save)

*Originally posted on my [blog](https://www.andrewmin.info/blog/react-setup/)*