ESLintと.eslintrc.json
■ESLintとは
ESLintはJavaScriptやTypeScriptなどの静的解析ツールです。ESLintを導入することで、単純な構文エラーはもちろん、プロジェクト固有のコーディング規約（スタイルガイド）を定義することができます。複数人で開発するようなプロジェクトでも、厳密なルールを定義することによって、システム全体のプログラムコードの一貫性を維持できるツールです。
これがないと、複数人で開発する場合や、担当者が変わるたびにその人の癖が含まれたソースコードとなってしまい、結果的に保守性の低いプログラムコードになりかねません。
つまり、全てのコードが同じ人によって書かれたようにしたい、ということです。
■そもそもLintって？
Linterの元となったのはLintと呼ばれるプログラムの静的解析ツールです。
ほとんどのソースコードは機械語に変換する必要があるため、「コンパイラ」による翻訳チェックが行われます。
しかしコンパイラはあくまで言語の仕様や構文の規則に則ったバグを返すのみであり、それ以上詳細なチェックを行いません。
コンパイラより厳密なチェックを行うためのツールがLintです。
Lintは規則的な視点だけでなく、意味的な視点からもコードのチェックを行います。例えば、以下の内容もLintはチェックしてくれます。
これらの処理は、コンパイラは基本的にバグとして扱いませんが、実行時に不具合の原因となる可能性があります。
Lintは上記のような「潜在的にバグとなりうるかもしれないソースコード」も警告を行います。
最初期の「Lint」はC言語のツールでしたが、現代ではPythonなどメジャーな言語のほとんどにLintを行うツールが存在します。
■Next.jsでESLintを使う準備
Next.js13にはデフォルトでプラグインが実装済みです（package.json要確認）。
yarn lint >>.eslintrc.json を新規生成
.eslintrc.jsonへ各ルールを組み立てていきます。
手始めに、ESLintを使ってTypeScriptを解析するためのライブラリをインストールしていきます。
yarn add @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-plugin-react --dev
以下がインストールされました。
info Direct dependencies ├─ @typescript-eslint/eslint-plugin@5.50.0 ├─ @typescript-eslint/parser@5.50.0 └─ eslint-plugin-react@7.32.2 info All dependencies ├─ @types/json-schema@7.0.11 ├─ @types/semver@7.3.13 ├─ @typescript-eslint/eslint-plugin@5.50.0 ├─ @typescript-eslint/parser@5.50.0 ├─ @typescript-eslint/type-utils@5.50.0 ├─ eslint-plugin-react@7.32.2 └─ natural-compare-lite@1.4.0
.eslintrc.jsonは以下のようにします。
{
"extends": [
"next",
"next/core-web-vitals",
"plugin:react/recommended",
"plugin:@typescript-eslint/recommended"
],
"parser": "@typescript-eslint/parser",
"rules": {
"import/order": [
"error",
{
"alphabetize": {
"order": "asc"
}
}
]
}
}
■Prettier
■よく出る？ルールを見てみる
| extends | admin2 | 複数のルールをまとめたコンフィギュレーション名を適用します。 ここで指定可能ものを sharable configuration オブジェクトと呼びます。 ESLint 標準のもの（eslint:recommeded など）以外は、npm パッケージをインストールすることで指定できるようになります。extends: - 'eslint:recommended' - 'plugin:react/recommended' - 'plugin:@typescript-eslint/recommended' 内部のルール設定が重複する場合は、後から指定したものが優先されることに注意してください。 例えば、plugin:@typescript-eslint/recommended は eslint:recommended より後に指定する必要があります（TypeScript 用の設定で上書きする必要があるため）。sharable configuration のみを提供している npm パッケージには、eslint-config- というプレフィックスが付けられており、extends プロパティで指定するときは、このプレフィックスを省略できます。 • eslint-config-airbnb パッケージ → airbnb • eslint-config-standard パッケージ → standardnpm パッケージのうち、ESLint プラグインと呼ばれているものは、その中のひとつの機能として sharable configuration を提供しています。 これを extends で指定するときは、次のようなフォーマットでコンフィグ名を指定します。plugin:プラグインの省略名/コンフィグ名 例えば、eslint-plugin-react プラグインが提供する recommended コンフィグを使う場合は、plugin:react/recommended と指定します。 @typescript-eslint/eslint-plugin プラグインが提供する recommended コンフィグを使う場合は、plugin:@typescript-eslint/recommended と指定します。 | | --- | --- | --- | | plugins | admin2 | ESLint プラグインを使用するには、あらかじめ npm でインストールした上で、ここに列挙しておく必要があります。さらに、実際にルールを有効化するには、extends なども指定する必要があります。 次の例では、npm でインストールした @typescript-eslint/eslint-plugin プラグイン、および eslint-plugin-react をロードするように指示しています。plugins: - react # means eslint-plugin-react - '@typescript-eslint' # means @typescript-eslint/eslint-plugin （参考リンク）https://eslint.org/docs/latest/use/configure/plugins#configuring-plugins | | parser | admin2 | ESLint は標準で JavaScript コードのパースに対応していますが、TypeScript コード (.ts、.tsx) を扱えるようにするには、TypeScript 用のパーサー (@typescript-eslint/parser) をインストールして指定する必要があります。parserの種類を指定しない場合はEspreeというparserが指定されます。parser: '@typescript-eslint/parser' （参考リンク）https://eslint.org/docs/latest/use/configure/plugins | | rules | admin2 | 個々のルール単位で有効／無効にする設定を行います。 多くのケースでは、extends による共有設定で大まかなルール設定を行い、ここで個別ルールを細かく調整します。（参考リンク）https://eslint.org/docs/latest/rules/ | | overrides | admin2 | ルールの上書きを行えます。あるファイルではルールを適用したくないときに使えます。（参考リンク）https://zenn.dev/nash/scraps/11c16415965fd4 | | parserOptions | | ESLint のデフォルトパーサーは ECMAScript 5 の構文で記述されたコードを想定します。 別のバージョンの ECMAScript 構文で記述したいときは、ecmaVersion でバージョンを設定します。 他にも、React アプリ内で JSX コードを使用する場合の指定などもここで行えます。parserOptions: ecmaFeatures: jsx: true ecmaVersion: 2021 # same as 12 sourceType: module # use import/export parser に @typescript-eslint/parser を指定したのであれば、TypeScript 用の parserOptions 設定 を行います。 パーサーを変更すると、parserOptions で指定すべき項目や、それぞれのデフォルト値が変化することに注意してください。 例えば、jsx オプションは通常必要ありません（ファイルの拡張子が .tsx の場合は、デフォルトで JSX コードを認識します）。parser: '@typescript-eslint/parser' parserOptions: ecmaVersion: 2021 # デフォルト値は 2018 project: ./tsconfig.json # プロジェクト内の型認識に使用 （参考リンク）https://eslint.org/docs/latest/use/configure/language-options#specifying-parser-optionshttps://github.com/typescript-eslint/typescript-eslint/blob/main/packages/parser/README.md#configuration | | settings | | 構成ファイルへの共有設定が可能。今回はeslint-plugin-reactを使用し、Reactのバージョンを自動検出するために利用しています。 | | roots | | ESLint は、実行時のカレントディレクトリを起点にして、上位のディレクトリの設定ファイル (.eslintrc.) を探していきます。 root: true の指定があると、この検索の振る舞いをそこで停止できます。 プロジェクトのトップディレクトリに置く .eslintrc. には、この指定をしておくとよいです。 | | env | | どのようなグローバルオブジェクトを宣言なしで参照可能にするかを ESLint に知らせるための設定です。 例えば、Web ブラウザ上で動作させる JavaScript コードであれば browser、Node.js 環境で動作させるコードであれば node を true に設定します。 内部的には、選択した環境ごとに globals オプションの設定が行われます。env: browser: true node: true es2021: true （参考リンク）https://eslint.org/docs/latest/use/configure/language-options#specifying-environments |
＜参考＞
Next.jsを勉強してみる その⑤ 〜ESLintを導入する編〜
