Next.js にて ESLint の設定を細かく変更する

環境

Next.js v15
TypeScript v5
ESLint v9
typeScript-eslint v8

ESLint とは

ESLint は、JavaScript コードに存在する問題を発見するための静的コード解析用ツールである。

とのこと。
コーディングする際のルールを決めて品質を保つ。

typeScript-eslint を試す

自分の環境下では Next.js は TypeScript で記述しているので、
まずはサンプルコードを用意して typeScript-eslint を使ってみる。

ひとまず Getting Started - typeScript-eslint をなぞっていく。

構成

Next.js で試す前に、
適当にサンプルを用意して試す。

- sample
    ├ eslint.config.mjs
    ├ package.json
    └ test.ts

インストール

$ cd /path/to/your/sample
$ npm init
$ npm install --save-dev eslint @eslint/js typescript typescript-eslint

test.ts

これは自分で用意したファイル。
Getting Started とは無関係。

type Test = {
	str: string,
}
let str: string = "test"

eslint.config.mjs

// @ts-check

import eslint from '@eslint/js';
import tseslint from 'typescript-eslint';

export default tseslint.config(
	eslint.configs.recommended,
	tseslint.configs.recommended,
);

Step 3: Running ESLint - typeScript-eslint を試す

ちゃんとエラーが出る。

$ npx eslint .
# もしくは
$ npx eslint test.ts

1:6  error  'Test' is defined but never used                @typescript-eslint/no-unused-vars
4:5  error  'str' is never reassigned. Use 'const' instead  prefer-const
4:5  error  'str' is assigned a value but never used        @typescript-eslint/no-unused-vars

'Test' が定義されていますが使われていません
'str' が再代入されていないので const を使ってください
'str' が宣言されていますが使われていません

Next Steps - typeScript-eslint を試す

厳格なチェックに変更する。
eslint.config.mjs を下記に変更。

// @ts-check

import eslint from '@eslint/js';
import tseslint from 'typescript-eslint';

export default tseslint.config(
	eslint.configs.recommended,
	tseslint.configs.strict,
	tseslint.configs.stylistic,
)

エラーが増えた。

$ npx eslint test.ts

1:6  error  Use an `interface` instead of a `type`                                        @typescript-eslint/consistent-type-definitions
1:6  error  'Test' is defined but never used                                              @typescript-eslint/no-unused-vars
4:5  error  Type string trivially inferred from a string literal, remove type annotation  @typescript-eslint/no-inferrable-types
4:5  error  'str' is never reassigned. Use 'const' instead                                prefer-const
4:5  error  'str' is assigned a value but never used                                      @typescript-eslint/no-unused-vars

type ではなく interface を使ってください
'Test' が定義されていますが使われていません
文字列リテラルを変数に代入する場合、変数に String 型とわざわざ指定しなくても分かるので型アノテーションは削除してください
'str' が再代入されていないので const を使ってください
'str' が宣言されていますが使われていません

ルールを追加する

ルールを追加し、 test.ts を少し編集して、
エラーを解消してみる。

eslint.config.mjs その1

一旦設定だけで全てのエラーを解消してみる。
出てきたエラーを off にしただけなので非推奨。

ちなみに使える値は 'off' | 'warn' | 'error' のどれか。

export default tseslint.config(
	eslint.configs.recommended,
	tseslint.configs.strict,
	tseslint.configs.stylistic,
	{
		rules: {
			"@typescript-eslint/no-inferrable-types": "off",
			"@typescript-eslint/consistent-type-definitions": "off",
			"@typescript-eslint/no-unused-vars": "off",
			"prefer-const": "off",
		},
	},
)

エラーがなくなった。

$ npx eslint test.ts

eslint.config.mjs その2

以下エラーを解消してみる。
eslint.config.mjs を下記に変更。

type ではなく interface を使ってください
'Test' が定義されていますが使われていません
'str' が宣言されていますが使われていません

export default tseslint.config(
	eslint.configs.recommended,
	tseslint.configs.strict,
	tseslint.configs.stylistic,
	{
		rules: {
			"@typescript-eslint/no-unused-vars": ["error", {
				"varsIgnorePattern": "^_",
			}],
			"@typescript-eslint/consistent-type-definitions": ["error", "type"],
		},
	},
)

使ったルール。

@typescript-eslint/no-unused-vars
- 使われていない変数のルール
@typescript-eslint/consistent-type-definitions
- interface と type の定義方法のルール

tset.js は下記に変更。
下記エラーを解消する。

'Test' が定義されていますが使われていません
文字列リテラルを変数に代入する場合、変数に String 型とわざわざ指定しなくても分かるので型アノテーションは削除してください
'str' が再代入されていないので const を使ってください
'str' が宣言されていますが使われていません

// type Test = {
// 	str: string,
// }
// let str: string = "test"

type _ = {
	str: string,
}
const _ = "test"

エラーがなくなった。

$ npx eslint test.ts

Next.js にて ESLint の設定を変更する

.eslintrc.json をそのまま編集する。
上記で試したルールに少し追加して適用させてみる。

{
  "extends": ["next/core-web-vitals", "next/typescript"],
  "rules": {
    "@typescript-eslint/no-unused-vars": ["error", {
      "args": "all",
      "argsIgnorePattern": "^_",
      "caughtErrors": "all",
      "caughtErrorsIgnorePattern": "^_",
      "destructuredArrayIgnorePattern": "^_",
      "varsIgnorePattern": "^_",
      "ignoreRestSiblings": true
    }],
    "@typescript-eslint/consistent-type-definitions": ["error", "type"]
  }
}

試す

$ cd /path/to/your/project/app
$ npm run lint
# もしくは
$ npm run build

おまけ

ヘルプ

$ npx eslint -h

--fix コードを自動的に整形する

$ npx eslint test.ts --fix

--no-cache キャッシュを無効にする

Next.js で使用されている eslint-plugin-next のオプション。

$ next lint --no-cache