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.

1
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.

1
/** @type {import("eslint").Linter.Config} */
2
module.exports = {
3
  parser: '@typescript-eslint/parser',
4
  parserOptions: {
5
    project: true,
6
  },
7
  plugins: ['@typescript-eslint', 'unused-imports'],
8
  extends: [
9
    'plugin:@next/next/recommended',
10
    'plugin:@typescript-eslint/recommended-type-checked',
11
    'plugin:@typescript-eslint/stylistic-type-checked',
12
  ],
13
  rules: {
14
    '@typescript-eslint/array-type': 'off',
15
    '@typescript-eslint/consistent-type-definitions': 'off',
16

17
    '@typescript-eslint/consistent-type-imports': [
18
      'warn',
19
      {
20
        prefer: 'type-imports',
21
        fixStyle: 'inline-type-imports',
22
      },
23
    ],
24
    '@typescript-eslint/no-unused-vars': ['warn', { argsIgnorePattern: '^_' }],
25
    '@typescript-eslint/require-await': 'off',
26
    '@typescript-eslint/no-misused-promises': [
27
      'error',
28
      {
29
        checksVoidReturn: { attributes: false },
30
      },
31
    ],
32

33
    'unused-imports/no-unused-imports': 'warn',
34
    'unused-imports/no-unused-vars': [
35
      'warn',
36
      {
37
        vars: 'all',
38
        varsIgnorePattern: '^_',
39
        args: 'after-used',
40
        argsIgnorePattern: '^_',
41
      },
42
    ],
43
  },
44
};

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.