[Next.js] ESLint

ブログリスト

このブログポストはシリーズで作成されています。次はNext.jsのシリーズリストです。

概要

今回のブログポストではTypeScriptをベースにしたNext.jsプロジェクトへESLintを適用する方法について説明します。ESLintとはES(EcmaScript) + Lint(エラーコード表示)の合成語でJavascriptのコードを分析して、潜在的なエラーやバグを見つけるに役に立つツールです。

ESLintの公式サイト: https://eslint.org/

ここで紹介するソースコードは下記のリンクで確認できます。

GitHub: https://github.com/dev-yakuza/study-nextjs/tree/main/4.eslint

TypeScriptベースのNext.jsプロジェクト生成

TypeScriptが適用されたNext.jsでESLintを使う方法について確認するため、次のコマンドを実行してTypeScriptが適用されたNext.jsプロジェクトを生成します。

npx create-next-app --typescript my-app

この時、次のようにESLintを使うかどうか質問される画面が確認できます。

? Would you like to use ESLint with this project? › No / Yes

私たちはESLintを使う予定なので、Yesを選択して進めます。

ESLintの設定

Next.jsは基本的ESLintが提供されます。私たちはここで追加設定をする予定です。次のコマンドを実行して追加設定に必要なプラグインをインストールします。

npm install --save-dev eslint-plugin-import eslint-plugin-no-null eslint-plugin-storybook @typescript-eslint/eslint-plugin

そして、ESLintの設定ファイルである.eslintrc.jsonファイルを開いて下記のように修正します。

{
  "extends": ["next/core-web-vitals", "plugin:storybook/recommended"],
  "plugins": ["@typescript-eslint", "no-null"],
  "rules": {
    "@typescript-eslint/no-unused-vars": "error",
    "import/order": [
      "error",
      {
        "groups": [
          "builtin",
          "external",
          "internal",
          ["parent", "sibling"],
          "object",
          "type",
          "index"
        ],
        "pathGroups": [
          {
            "pattern": "react",
            "group": "external",
            "position": "before"
          }
        ],
        "pathGroupsExcludedImportTypes": ["react", "next"],
        "newlines-between": "always",
        "alphabetize": {
          "order": "asc",
          "caseInsensitive": true
        }
      }
    ],
    "sort-imports": [
      "error",
      {
        "ignoreCase": true,
        "ignoreDeclarationSort": true,
        "ignoreMemberSort": false,
        "allowSeparatedGroups": true
      }
    ],
    "react/react-in-jsx-scope": "off",
    "@typescript-eslint/consistent-type-imports": "error",
    "no-null/no-null": 2,
    "curly": ["error", "multi-line", "consistent"],
    "nonblock-statement-body-position": ["error", "beside"]
  }
}

スクリプト設定

このように設定したESLintを使うためにはpackage.jsonファイルを開いて下記のようにスクリプトを追加します。

"scripts": {
  ...
  "lint": "next lint",
  "lint:fix": "next lint --fix"
},

ESLint実行

次のコマンドを使って設定したESLintの内容を検査します。

npm run lint

もし、設定したESLintオプションに反するファイルがある場合、次のように表示されます。

./pages/_document.tsx
1:16  Error: Member 'Head' of the import declaration should be sorted alphabetically.  sort-imports

./pages/index.tsx
3:1  Error: There should be at least one empty line between import groups  import/order
3:1  Error: `next/font/google` import should occur before import of `next/head`  import/order

次のコマンドを実行すると、違反されたファイルを修正します。

npm run lint:fix

全てのファイルが修正されたら、次のコマンドを実行して再び検査します。

npm run lint

全てのファイルがうまく修正されたら、次のような結果が表示されます。

✔ No ESLint warnings or errors

自動で修正される問題もありますが、自動で修正されない問題もあります。この場合は当該ファイルを開いて直接に修正してください。

完了

今回のブログポストではNext.jsプロジェクトへESLintを設定する方法について見てみました。Next.jsは基本的提供されるESLintのルールでも十分ですが、このブログポストように設定を調節して使うこともできます。皆さんもNext.jsのESLintを設定して統一されたコードのスタイルを適用して見てください。

Github Sponsor

Buy me a coffee

私のブログが役に立ちましたか？下にコメントを残してください。それは私にとって大きな大きな力になります！