TypeScriptプロジェクトに3分でESLint/Prettierを入れる（2022年6月）

• 注1. ソースはsrc配下にある前提になっていますので、適宜変えてください。
• 注2. 導入後、設定の微調整は適宜行ってください。

結論

1. パッケージインストール

5つインストールする。 パッケージマネージャに応じてコマンドは変えること。

npm install --save-dev eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-config-prettier prettier

2. 設定ファイル

/.eslintrc.jsonを作成してください。

{
    "env": {
        "es2021": true
        // 環境に応じてenvは変えてください
        // "node": true, 
        // "browser": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:@typescript-eslint/recommended",
        "prettier"
    ],
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
        "sourceType": "module",
        "project": "./tsconfig.json"
    },
    "plugins": [
        "@typescript-eslint"
    ],
    "rules": {
        // お好みで設定ください
        "@typescript-eslint/no-explicit-any": 1,
        "@typescript-eslint/no-non-null-assertion": 1
    },
    "root": true
}

3. ESLint + Prettier適用コマンド

適宜npm scriptsなどに登録してください。

npx prettier --write 'src/**/*.ts' && eslint --fix --ext .ts src

解説編

概要

• Prettier
  • フォーマッタ。インデントや行の長さなどをフォーマットする
  • TypeScriptに標準対応
• ESLint
  • Linter。フォーマットの不揃いやbuggyなコードを静的に解析・検知する。2点、工夫が必要
    1. TypeScriptに対応させるためのプラグインが必要
    2. 今回、フォーマットについてはPrettier任せにしたいため、ESLintの検査対象から省く必要がある。

.eslintrc.jsonについて

ESLintの設定ファイルについて主要な部分を解説する。

• envプロパティ
  • 例えばフロントエンドのTypeScriptコードに対してbrowserを指定をしないと、document.getElementById()のdocumentが「変数宣言なし」扱いとなり、エラーとして検知されてしまう
  • つまり、envを指定することで、そのenvに関連するグローバル変数がある前提で解析してくれる
• extendsプロパティ
  • 解析に関する設定は（ちょうどレガシーWebサイトにおけるCSS読み込みのように）階層構造となっている
  • eslint:recommended
    • ベースとしてeslintの推奨を指定している
  • ↑をTypeScriptに関するrecommendedで上書きしている
    • TypeScript特有の文法を検査したり、逆にTypeScriptになったことで従来検知すべきだったコードが問題ではなくなっていたりするため
  • さらに、prettier（フォーマットに関する検査を無効化する）で上書きしている
    • prettierとeslintで、フォーマットに関するルールが矛盾する部分があるため
• parser
  • 解析のためにコードを読み取って構造化されたデータにするにあたり、TypeScript用のparserが必要（例えばTypeScriptの型アノテーションをデフォルトのparserは理解できない）
• plugins
  • 設定ファイル内で利用するプラグインを記述する。
    • 例えば、extendsのplugin:@typescript-eslint/recommendedは、@typescript-eslint/eslint-pluginプラグインに含まれている
  • ※筆者環境では、記述しなくても動く
    • 1stパーティのものは書かなくても動くのかもしれない。ドキュメントには特に記載は見当たらなかった。

インストールしたパッケージについて

• eslint、prettier
  • それぞれeslintやprettierのコマンドを実行するために必要
  • prettierでフォーマットしてからeslintで静的解析する
• @typescript-eslint/parser
  • parserで指定するために必要
• @typescript-eslint/eslint-plugin
  • extendsにeslint:recommendedを指定したり、rulesに@typescript-eslint/...のルールを個別指定したりするのに必要
• eslint-config-prettier
  • extendsに指定し、フォーマットに関するeslintのルールを無効化するために必要

参考情報

https://www.npmjs.com/package/@typescript-eslint/eslint-plugin

追伸

ブログ投稿初めてです。 フィードバックや記事内容の誤りなどありましたら、お気軽にコメントください。