Setting Up Next.js Project With ESLint, Typescript, and AirBnB Configuration

If we initiate a Next.js project using the create-next-app tool, our project will be included with ESLint configuration that we can apply using yarn run lint. By default, the tool installs eslint-config-next and extends next/core-web-vitals in the ESLint configuration. The Next.js configuration has been integrated with linting rules for React and several other libraries and tools.

yarn create next-app --typescript

For additional configuration such as AirBnB, it is also possible. First, we need to install the peer dependencies of eslint-config-airbnb. We also add support for Typescript using eslint-config-airbnb-typescript.

yarn add --dev eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-react-hooks

yarn add --dev eslint-config-airbnb-typescript @typescript-eslint/eslint-plugin @typescript-eslint/parser

After that, we can update the .eslintrc.json file for the new configuration.

{
  "extends": [
    "airbnb",
    "next/core-web-vitals"
  ],
  "parser": "@typescript-eslint/parser",
  "overrides": [
    {
      "files": ["*.ts", "*.tsx"],
      "parserOptions": {
        "project": ["./tsconfig.json"]
      }
    }
  ]
}

In the sample above, we utilize an additional parser for Typescript. Additionally, if we use VSCode, we can add an extension for working with ESLint. We can set the extension to auto-fixing any errors which are possible to be fixed. First, we need to install the ESLint extension by Microsoft. Then, we can add the following setting for our editor in the .vscode/settings.json file.

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}