Setup ESLint + Prettier + AirBnB Style with Create React App

Originally posted on my blog

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 and Prettier, while also integrating AirBnB's popular style guide.

For this guide, you'll need to have Node.js installed since it bundles npm and npx, the Node Package Manager and Npm Package 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 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.

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.

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.

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

"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.

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)

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:

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

{
  ...
  "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

{
    "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

{
    "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
• That's it

Prettier

• Install the Prettier extension

• Edit VSCode settings.json

  • Add

  "[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