How to Use ESLint and Prettier in Your Next.js

Automated lint tools can help developers save time and keep everybody on the same page. When everybody on your team follows the same rules, you don’t have to waste time discussing code style issues. These tools can catch a lot of syntax and type errors.

Combining ESLint with Prettier is a nice way to perform both automated syntax scans on your code and reformatting. This will ensure that consistent rules are being followed for indentation, spacing, semicolons, etc.

Let’s set up these technologies to use them in a Next.js project that uses TypeScript. If you are starting a new project, you can read my article about how to set up Next.js with TypeScript.

ESLint

Let’s start by adding the core ESLint linting library, the parser to lint TypeScript code, a TypeScript-specific plug-in, and a React-specific plug-in to our project.

In the terminal, go to the root of your project and run the following command:

yarn add -D eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-plugin-react

We should now create a .eslintrc.json file at the root of our project. We can add our linting rules in this file:

touch .eslintrc.json

You can already add the default options to that file. We will add our options as we go:

{
  "parser": {},
  "extends": \[\],
  "rules": {},
  "globals": {}
}

By default, ESLint depends on a parser to read JavaScript code. We use @typescript-eslint/parser (an alternative parser that can read TypeScript), so we need to tell ESLint to use it instead. Besides that, we use @typescript-eslint/eslint-plugin (a list of rules you can turn on or off). We also extend the plug-in react/recommended, which contains React-specific linting rules.

To configure the parser and extend the plug-ins, we need to modify the file we need to update our config like this:

{
  "parser": "@typescript-eslint/parser",
  "extends": [
    "plugin:@typescript-eslint/recommended",
    "plugin:react/recommended"
  ],
  "plugins": [
    "@typescript-eslint",
    "react/recommended"
  ],
  "rules": {},
  "globals": {}
}

Next.js does not require you to import React into each component, which means you will start getting errors if you use this config in a Next.js application. We can fix this by adding React into our global and turning the react-in-jsx-scope rule off.

Our final config will look like this:

{
  "parser": "@typescript-eslint/parser",
  "extends": [
    "plugin:@typescript-eslint/recommended",
    "plugin:react/recommended"
  ],
  "plugins": [
    "@typescript-eslint",
    "react"
  ],
  "rules": {
    "react/react-in-jsx-scope": "off"
  },
  "globals": {
    "React": "writable"
  }
}

Prettier

Now let’s add Prettier and some plugins to make it work nicely with ESLint:

yarn add -D prettier eslint-config-prettier eslint-plugin-prettier

eslint-config-prettier will disable any linting rule that might interfere with an existing Prettier rule, and eslint-plugin-prettier will run Prettier analysis as part of ESLint.

Let’s add them to our ESLint config to finish up our ESLint configuration. Make sure to put Prettier last so it can override other configs:

{
  "parser": "@typescript-eslint/parser",
  "extends": [
    "plugin:@typescript-eslint/recommended",
    "plugin:react/recommended",
    "plugin:prettier/recommended",
    "plugin:prettier/react",
    "plugin:prettier/@typescript-eslint"
  ],
  "plugins": [
    "@typescript-eslint",
    "react",
    "prettier"
  ],
  "rules": {
    "react/react-in-jsx-scope": "off"
  },
  "globals": {
    "React": "writable"
  }
}

Configure Prettier

Prettier is opinionated and intentionally limits the number of options (read why). If you want, you can overwrite some rules of Prettier by creating a .prettierrc file in the root of your project:

touch .prettierrc

The following configuration is an example file. I personally use this as my setting, but you can find all available configurations in the official documentation.

{
    "semi": true,
    "singleQuote": true
}

Add a git hook

Optionally, you can use husky and pretty-quick to add a git hook that will always lint and format your changed files.

First, install them as dev dependencies:

yarn add pretty-quick husky -D

Now add the following husky and lint-staged configuration to your package.json:

"scripts": {
  ...
  "lint": "eslint --ext .ts,.tsx",
},

Add the pre-commit hook in your package.json:

"husky": {
  "hooks": {
    "pre-commit": "pretty-quick --staged && npm run lint"
   }
},

Now, whenever you commit your changes, it will format and lint your new code.

Code Editor Extensions

If you haven’t done so already, I recommend installing the Prettier and ESLint extensions for your code editor. If you don’t want to format your file manually every time, you can format it on save as well. I highly recommend this. For Visual Studio Code, all you need to do is open your VSCode User settings/preferences and set the Format On Save option to true.

That’s it! Thanks for reading. I hope it was helpful.

If you’re interested in saving time on your next project and skip implementing authentication, payments, etc. then check out Serverless SaaS, the SaaS starter-kit for React developers. You can also follow me on Twitter, or at jakeprins.com.