Zenn
⚡

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

2022/10/15に公開
TypeScript
ESLint
Prettier
tech
  • 注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

追伸

この記事はMagicodeから移転しました。

Discussion