How to Set Up ESLint and Prettier with Next JS TypeScript: Step-by-step tutorial

In a previous blog post, we've set up TypeScript in a NextJS application. The idea is to use TypeScript instead of JavaScript is to write higher-quality code by catching errors and mistakes. The good news is that we go further by adding two new tools into our Next JS projects.

These two tools are ESLint and Prettier, two well-known tools in the JavaScript ecosystem. Both can be run alongside TypeScript to improve your code quality with fewer bugs.

ESLint, the JavaScript linter

ESLint is one of the famous JS linter and it can be used in TypeScript React applications without any issue. For those who don't know, a linter is a static code analyzer: it's a tool that reads your source code and finds errors before running your code.

As a developer, another advantage of using linter for your React applications is that you'll get a faster feedback loop. It'll save you time and improve your development process.

Prettier, the JavaScript formatter

Prettier is also one of the famous JS code formatter and 100% compatible with TypeScript Next JS apps. Why use Prettier instead of your built-in IDE/editor formatter? One good reason to use Prettier is that you can have the same code formatter for all developers in your team (whatever IDE/editor they use).

Like any formatter, Prettier is to make all your source code visually consistent across your codebase. First, you configure Prettier configuration file by indicating your styling preference. After that, it indents your code, adds space or semi-colons, and replaces single quotes with double quotes (or vice-versa based on your configuration), etc. Prettier will take care of the rest by following your preference.

Dependencies installation

You can follow this tutorial by applying the change in any project. It doesn't need to be a project starting from scratch. So, you can start running the following command in your terminal:

# ESLint packages
npm install --save-dev @typescript-eslint/eslint-plugin eslint eslint-config-airbnb-typescript eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-react-hooks

# Prettier packages
npm install --save-dev prettier prettier-eslint-cli

Don't worry, we'll explain this long dependency list and show you how to integrate it into your NextJS project.

Airbnb TypeScript ESLint configuration

When you start using ESLint, you need to configure it and define rules for your project. Hopefully, you don't need to define rules from scratch. Otherwise, it can be very tedious and time-consuming telling ESLint all your preferences.

We'll follow the styling guide provided by Airbnb and we'll use an ESLint plugin to enforce it. It's called eslint-config-airbnb but in our example, we'll need to use another package for TypeScript named eslint-config-airbnb-typescript. Both packages contain out-of-the-box rules for our React applications.

At the root directory of your project, you need to create a file name .eslintrc and copy-paste the following code:

{
  "plugins": ["@typescript-eslint"],
  "extends": ["airbnb-typescript"],
  "parserOptions": {
    "project": "./tsconfig.json"
  }
}

plugins and parserOptions needs to be defined for ESLint TypeScript support. The extends option declare we want to use TypeScript ESLint with Airbnb styling guide.

Prettier configuration

Good news! In our example, we'll not customize the prettier configuration. For your information, the file needs to be located at the root directory of your project with the name .prettierrc if you want to customize it.

Npm scripts

After configuring ESLint and Prettier, we need to integrate these two tools. Unfortunately, some ESLint and prettier rules can conflict. One of the best ways to solve that is to run prettier before applying eslint. Indeed, we've installed prettier-eslint-cli to do exactly that.

Then, we need to add a new script in your package.json file:

  "scripts": {
    "format": "prettier-eslint --write $PWD/'**/*.{ts,tsx}'",
  },

You can now run npm run format. It'll apply Prettier and ESLint on your React TypeScript files of your project. Under the hood, it uses eslint --fix. Adding --fix parameter helps you to resolve some ESLint errors automatically.

eslint --fix isn't capable of fixing all mistakes. So, we also need to implement another script for displaying errors with eslint:

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

When you run npm run lint, it'll show you all errors caught by ESLint.

In conclusion

Your NextJS project now integrates with a linter and a code formatter. It makes your React code more robust and consistent. Using ESLint, Prettier and TypeScript are the perfect combinations to write better code with fewer errors and mistakes.

In our next post, we'll show you how to use ESLint and Prettier with VSCode. We'll also write a step-by-step guide on how to integrate Prettier and ESLint with Git.

You can also take a look on my portfolio Next JS template styled with Tailwind CSS. Built in high quality in mind using TypeScript, ESLint and Prettier.