Next.js×TypeScript×ESLint　

はじめに

ESLintは今まできちんと向き合ってこなかったので、今回思い腰をあげて取り組んでみました。
ESLintの基本設定だけでは勿体無いので、Nextjsを使っている皆さんの記事を参考に3つプラグインも導入しました。

プロジェクト作成

npx create-next-app@latest

途中で出てくる　ESLintを使うか？ の質問にYesで答える

✔ Would you like to use ESLint? … No / Yes

実行

プロジェクトが立ち上がり、package.jsonにnext lintが追加されているのを確認。

package.json

"scripts": {
    "lint": "next lint"
  },

lintコマンドを打って実行

npm lint

すると、以下の質問が出現。

? How would you like to configure ESLint? https://nextjs.org/docs/basic-features/eslint
❯  Strict (recommended)
   Base
   Cancel

Strictは基本のESLint構成に加えより厳格なCore Web Vitals ルールセットが含まれているとのこと。初学者向きらしいのでstrictを選択。

プラグインを追加

今回はより良いコードを目指すため、下の3つのプラグインを追加します

• eslint-plugin-simple-import-sort
  ファイルのimport文の自動ソートを行う
• typescript-eslint
  ESLintのTypeScript用ルールを提供
• typescript-eslint/parser
  TypeScript ファイルを解析

インポート

基本ESLint系はdev環境でしか使わないので--save-dev（あるいは-D）をつけて3つまとめてインポート。

zsh

npm install --save-dev @typescript-eslint/parser eslint-plugin-simple-import-sort typescript @typescript-eslint/eslint-plugin

設定

3つまとめて設定。

.eslintrc.json

{
  "extends": [
    "next/core-web-vitals",
    "plugin:@typescript-eslint/recommended"
  ],
  "plugins": [
    "simple-import-sort",
    "@typescript-eslint",
  ],
  // "@typescript-eslint/parser""をパーサーとして指定
  "parser": "@typescript-eslint/parser",
  // TypeScript プロジェクトの構成ファイルへのパスを指定
  "parserOptions": {
    "project": "./tsconfig.json"
  },

  "rules": {
    // ~~~~~~~ simple-import-sortのルール
    // 全てのファイルに対してチェック
    "simple-import-sort/imports": "error",
    "simple-import-sort/exports": "error",
    // すべてのインポートがファイルの先頭にあるかどうか
    "import/first": "error",
    // インポートの後に改行があるかどうか
    "import/newline-after-import": "error",
    // 同じファイルのインポートがあれば統合する
    "import/no-duplicates": "error"
  }
}

自動修正コマンド追加

pacakge.json

"scripts": {
    "lint": "next lint",
    "fix": "next lint --fix" //追加
},

おわり

１個１個噛み砕いて書くには時間がかかりましたが、ESLintへの理解が深まったのでよかった。
ただまだまだカスタムの余地はありそう。結構思ったより奥深い。