Eslint Config for Next.js + TypeScript Project

ESLint is a powerful tool for catching errors and maintaining a consistent code style in your Next.js + TypeScript projects. In this guide, we’ll walk through the process of setting up ESLint with a ready-to-use configuration tailored for optimal development.

Install Dependencies

Begin by installing the necessary ESLint dev dependencies. Each package serves a specific purpose in enhancing your development workflow.

npm install --save-dev @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint eslint-config-next eslint-plugin-unused-imports

The Configuration

Configure ESLint with the following settings. The accompanying comments explain the purpose of key rules and settings.

/** @type {import("eslint").Linter.Config} */
module.exports = {
  parser: "@typescript-eslint/parser",
  parserOptions: {
    project: true,
  },
  plugins: ["@typescript-eslint", "unused-imports"],
  extends: [
    "plugin:@next/next/recommended",
    "plugin:@typescript-eslint/recommended-type-checked",
    "plugin:@typescript-eslint/stylistic-type-checked",
  ],
  rules: {
    "@typescript-eslint/array-type": "off",
    "@typescript-eslint/consistent-type-definitions": "off",

    "@typescript-eslint/consistent-type-imports": [
      "warn",
      {
        prefer: "type-imports",
        fixStyle: "inline-type-imports",
      },
    ],
    "@typescript-eslint/no-unused-vars": ["warn", { argsIgnorePattern: "^_" }],
    "@typescript-eslint/require-await": "off",
    "@typescript-eslint/no-misused-promises": [
      "error",
      {
        checksVoidReturn: { attributes: false },
      },
    ],

    "unused-imports/no-unused-imports": "warn",
    "unused-imports/no-unused-vars": [
      "warn",
      {
        vars: "all",
        varsIgnorePattern: "^_",
        args: "after-used",
        argsIgnorePattern: "^_",
      },
    ],
  },
};

Here’s an explanation of each section:

parser and parserOptions

The configuration specifies the use of @typescript-eslint/parser as the parser for ESLint, indicating compatibility with TypeScript. Additionally, parserOptions is configured with project: true, instructing ESLint to utilize the TypeScript project’s configuration.

Plugins

The configuration includes two ESLint plugins, @typescript-eslint and unused-imports. These plugins extend ESLint’s capabilities by providing TypeScript-specific rules and detecting unused imports and variables.

Extensions

The extends section extends the rule set with recommended configurations from Next.js (plugin:@next/next/recommended) and TypeScript (plugin:@typescript-eslint/recommended-type-checked, plugin:@typescript-eslint/stylistic-type-checked). This ensures compatibility with Next.js best practices and incorporates type-checking and stylistic conventions for TypeScript.

Rule Configurations

The rules section customizes ESLint’s behavior with specific rule configurations. Notable examples include turning off rules like @typescript-eslint/array-type and @typescript-eslint/consistent-type-definitions. The rule @typescript-eslint/consistent-type-imports is set to warn, encouraging the use of type-imports with a fix option to convert to inline-type-imports.

Additional Rules

In addition to TypeScript-specific rules, the configuration integrates rules from the unused-imports plugin. These rules aim to identify and warn about unused imports and variables, promoting a cleaner codebase.