How to Set Up ESLint and Prettier in React or Next.js Projects and Format Code Automatically with Prettier with VS Code?

ESLint lets us catch errors and bad practices in our React or Next.js project easily.

And Prettier lets us format our code automatically by following some rules that are defined.

In this article, we’ll look at how to set up ESLint and Prettier in our React or Next.js project and format code automatically on save with Prettier in VS Code.

Getting Started

To get started, we’ve to install a few packages into our React or Next.js project.

To install all of them, we run:

npm i -D babel-eslint eslint eslint-config-airbnb eslint-config-prettier eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-prettier eslint-plugin-react eslint-plugin-react-hooks prettier

The -D flag will install the packages as dev dependencies.

Then in VS Code, we install the ESLint and Prettier extensions.

The easiest way to do this is to press Ctrl+Shift+P, and then search for ‘install extensions’ in the command search box.

Then enter the name of the extensions into the Extensions pane on the left.

Now we can configure ESLint and Prettier to search for issues and format our code.

Configure ESLint

To configure ESLint, we can add an .eslintrc.json file on the root of the project folder and add:

{
  "root": true,
  "parser": "babel-eslint",
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:import/errors",
    "plugin:import/warnings",
    "plugin:react-hooks/recommended",
    "airbnb-base",
    "airbnb-base/rules/strict",
    "airbnb/rules/react",
    "plugin:prettier/recommended"
  ],
  "env": {
    "browser": true,
    "commonjs": true,
    "es6": true,
    "node": true
  },
  "parserOptions": {
    "ecmaVersion": 2021,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "settings": {
    "react": {
      "version": "detect"
    }
  },
  "plugins": [],
  "rules": {
    "react/react-in-jsx-scope": "off",
    "react/jsx-props-no-spreading": "off",
    "react/jsx-filename-extension": [
      1,
      {
        "extensions": [
          ".js",
          ".jsx"
        ]
      }
    ],
    "prettier/prettier": [
      "error",
      {},
      {
        "usePrettierrc": true
      }
    ]
  }
}

We extend the rules set we want ESLint to check in the extends section.

And in the rules section, we configure or turn off some rules.

'off' turns them off.

The rest of the rules are set to their default values.

ecmaVersion is set to 2021 to check the latest JavaScript syntax as of 2021.

Configure Prettier

To configure Prettier, we create a .prettierc file in the project folder root and add:

{
  "semi": true,
  "tabWidth": 2,
  "printWidth": 100,
  "trailingComma": "all",
  "jsxBracketSameLine": true
}

We add some rules to make Prettier format the code the way we want.

printWidth sets the max line width.

trailingComma lets Prettier add trailing commas to places where they’re allowed.

semi adds semicolons to places that should have them like end of lines.

tabWidth sets the width of the tabs in terms of spaces. 2 means 2 spaces for tabs.

jsxBracketSameLine puts the closing bracket of a multiline JSX element at the end of the last line instead of on the next line.

Also, we need to make sure that Prettier formats the code files that we write instead of package or auto-generated files.

To do this, we add a .prettierignore file to the project folder root and write:

.next
node_modules
.vscode
package.json
package-lock.json
dist

.next is the Next.js specific folder with the built files.

dist has the built files.

.vscode has VS code settings for the workspace.

Configure VS Code to Format Files on Save with Prettier and Autofix ESLint Issues

To format code with Prettier and fix ESLint issues that can be automatically fixed, we add the following to .vscode/settings.json :

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "editor.formatOnSave": true,
  "eslint.alwaysShowStatus": true
}

We can set the default formatter to Prettier by pressing Ctrl+Shift+P, then search for ‘Format Document With’, press Enter, then select ‘Configure Default Formatter’, then we can select Prettier.

Conclusion

We can fix many code issues in React and Next,js projects and make our code neater with ESLint and Prettier.