Eslint with Airbnb Style Guide on Next.js App with Typescript Support

1. Generate New Next.JS Project

npx create-next-app --ts project-name

Make sure you're not forget of the --ts flag.

Once the app generated, If you see at the package.json and eslintrc.json next.js comes with default configuration for eslint.

// package.json
"scripts": {
  "lint": "next lint"
},
"devDependencies": {
  "eslint-config-next": "latest",
}

// .eslintrc.json
{
  "extends": "next/core-web-vitals"
}

eslint-config-next is a plugin for eslint that provides configuration for next.js to support static check for nextjs rules. Like to check that we shouldn't use <img/> tag but should use <Image/> from next/image instead

But most rules are for nextjs specific. We can improve this by adding popular used eslint rules like airbnb/javascript style guide.

2. Adding Airbnb Style Guide

Before we add the airbnb style guide, we need to install some depencency that airbnb depends to.

npm install --save-dev eslint-plugin-import eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-jsx-a11y
// or
yarn add --dev eslint-plugin-import eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-jsx-a11y

even though eslint-config-next already comes with this dependency, we still need to install this as it listed as peer dependencies in eslint-config-airbnb

Now we need to install the main package

npm install --save-dev eslint-config-airbnb
// or
yarn add --dev eslint-config-airbnb

and then extend it in .eslintrc.json

// .eslintrc.json
{
  "extends": ["airbnb"]
}

We're not done yet. eslint-config-airbnb do not come up with typescript support by default so we need additional packages for this. The following packages are required as peers that we need to install

npm install --save-dev @typescript-eslint/eslint-plugin @typescript-eslint/parser
// or
yarn add --dev @typescript-eslint/eslint-plugin @typescript-eslint/parser

and the main package

npm install eslint-config-airbnb-typescript
// or
yarn add eslint-config-airbnb-typescript

Update .eslintrc.json to include the airbnb typescript config

// .eslintrc.json
{
  "extends": ["airbnb", "airbnb-typescript"],
  "parserOptions": {
    "project": "./tsconfig.json"
  },
  "ignorePatterns": ["**/*.js", "**/*.jsx"]
}

If you are paying attention we add configuration to ignore all js and jsx files. This is because we don't want to lint js and jsx files. If in some case we need to lint js files, we need to add more configuration. Check this gist for more information about the configuration.

3. Integrate with next

To prevent conflict when integrating the airbnb style guide configuration with nextjs configuration we need to extend next latest. why

// .eslintrc.json
{
  "extends": ["airbnb", "airbnb-typescript", "next", "next/web-core-vitals"]
}

4. Add prettier eslint

If we have prettier in our project being setup, it's important that we also configure it to prevent conflicts.

First we need to install the package.

npm install eslint-config-prettier
// or
yarn add eslint-config-prettier

Then we need to extend the .eslintrc.json file to include the prettier config.

{
  "extends": [
    "airbnb",
    "airbnb-typescript",
    "next",
    "next/web-core-vitals",
    "prettier"
  ]
}

It's important to note that we put prettier last in the extends array. why

And we are done.

Now we can run npm run lint or yarn run lint to lint our code. If we want to autofix lint errors. We can add lint:fix script that contain next lint with additional flag --fix

// package.json
"scripts": {
  "lint": "next lint",
  "lint:fix": "next lint --fix"
},

And then we can run npm run lint:fix or yarn run lint:fix

5. Add additional rules (optional)

We can customize some rules that applied by default. As for me personally, I like to override some rules that are not applicable to me.

// .eslintrc.json
{
  "rules": {
    "react/function-component-definition": [
      2,
      {
        "namedComponents": "arrow-function"
      }
    ],
    "react/jsx-props-no-spreading": "off"
  }
}

That's it :). If you have any question or suggestion, please feel free to reach out to me.

Github