まくろぐ

ESLint (4) ESLint の設定方法まとめ (for Next.js 11)

更新:
作成:

Next.js 11 が ESLint を組み込みサポート

Next.js 11 で ESLint を Next.js が組み込みでサポートしました。 これで、create-next-app で新規作成するアプリでは、ESLint に関してもゼロコンフィグで next eslint とするだけで実行できるようになります。

ただ、ESLint には色々な共有設定 (config) があるわけで、Next.js がデフォルトで設定してくれているもの以外(TypeScript や Prettier 関連)は自分で設定する必要があります。 ここでは、Next.js 11 がデフォルトで提供する .eslintrc にそれらの設定を追加します。

Next.js 11 デフォルトの ESLint 設定

Next.js 11 が生成する .eslintrc ファイルは次のようなシンプルなものです。

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

問題はこれらがどのような共有設定を含んでいるかですが、eslint-config-next のコードを見ると、次のような感じになっています。

module.exports = {
  extends: [
    'plugin:react/recommended',
    'plugin:react-hooks/recommended',
    'plugin:@next/next/recommended',
  ],
  // ...
}

React 系の共有設定はここに含まれているので、"extends": ["next"] だけでカバーできそうです。 公式ドキュメントの ESLint - Base Configuration にも同様の説明が書かれています。 逆に、TypeScript 関連や、Prettier 関連の共有設定は自分で追加しなければいけません。

ESLint 設定を追加する

ここでは、下記のような ESLint extends 設定を手動で追加してやります。

  • ESLint 推奨 (eslint:recommended)
  • TypeScript 関連 (plugin:@typescript-eslint/recommended*)
  • Prettier 関連 (prettier)

eslint:recommeded 以外は外部パッケージとして提供されているので、先にインストールしておきます。

必要なパッケージ(Plugin & Config)のインストール
$ yarn add --dev @typescript-eslint/eslint-plugin
$ yarn add --dev eslint-config-prettier

そして、ESLint 設定ファイルを次のように書き換えてやります。 Yaml 形式の方が記述が楽なので、.eslintrc.eslintrc.yml に置き換えています。

.eslintrc.yml
# これがルートの設定ファイル(上位ディレクトリを検索しない)
root: true

extends:
  - eslint:recommended
  - plugin:@typescript-eslint/recommended
  - plugin:@typescript-eslint/recommended-requiring-type-checking
  - next
  - next/core-web-vitals
  - prettier

parserOptions:
  # extends で指定している
  # plugin:@typescript-eslint/recommended-requiring-type-checking
  # に対して型情報を提供するため tsconfig.json の場所を指定。
  project: ./tsconfig.json

あとは、next lint で実行すればよさそうですが、プロジェクト内の TypeScript 型情報に関する警告 (plugin:@typescript-eslint/recommended-requiring-type-checking) を有効にするには、eslint コマンドを直接実行しないといけないみたいです(next lint では全ての警告が出ない…)。

$ npx eslint src --ext .ts,.tsx

いずれにしても、最終的には、package.json の中で次のような感じで npm-scripts を定義して、yarn lint (npm run lint) コマンド一発で各種 Lint ツールをまとめて実行できるようにしておくのがよいです。

package.json(抜粋)
{
  "scripts": {
    // ...
    "lint": "run-p -c lint:prettier lint:eslint lint:tsc",
    "lint:prettier": "prettier --check src",
    "lint:eslint": "eslint src --ext .ts,.tsx",
    "lint:tsc": "tsc",
    "fix": "run-s fix:prettier fix:eslint",
    "fix:prettier": "prettier --write src",
    "fix:eslint": "eslint src --ext .ts,.tsx --fix",
    // ...

上記で使用している run-prun-s は、複数の npm-scripts を並列 or 順次実行するためのコマンドで、npm-run-allyarn-run-all パッケージをインストールすると使えるようになります。

$ yarn add yarn-run-all --dev

関連記事

まくろぐ
サイトマップまくへのメッセージ