nakamurakko’s blog

仕事で覚えたこと、勉強したことを自分のメモ代わりに書いていこうかなと。

Angular のプロジェクトに ESLint を設定して、 TypeScript っぽく書いているかチェックする

環境

  • Angular CLI 13
  • Visual Studio Code

参考にしたサイト


Angular のプロジェクト内で TypeScript らしくコーディングしているかチェックするには、 ESLint Plugin TypeScript を使うと良い。 (この設定は Angular に限らず、 TypeScript を使用するフレームワークで使えるはず。)

拡張機能を追加 (Visual Studio Code)

Visual Studio Code に拡張機能 ESLint をインストールする。

パッケージを追加

ESLint Plugin TypeScript の説明通り、 Angular のプロジェクトに、

を追加する。

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

設定ファイル作成

プロジェクトのディレクトリー直下に .eslintrc.json を用意して、設定を書き込む。

{
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:@typescript-eslint/recommended-requiring-type-checking"
  ],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "project": "./tsconfig.json"
  },
  "plugins": [
    "@typescript-eslint"
  ],
  "rules": {
    // 戻り値の型を明示する。(warn)
    "@typescript-eslint/explicit-function-return-type": "warn",
    // クラスメソッド、プロパティのアクセシビリティを明示する。(warn)
    "@typescript-eslint/explicit-member-accessibility": "warn",
    // 実装が空の関数を許可しない。(off)
    "@typescript-eslint/no-empty-function": "off",
    // 宣言時に初期化された変数は型宣言を許可しない。(off)
    "@typescript-eslint/no-inferrable-types": "off"
  }
}

extends に推奨設定の3行を追加して、 parserplugins は、 ESLint Plugin TypeScript の説明通りにそのまま追加している。

parserOptions は ESLint Plugin TypeScript の説明には無いけど、一部のルールで参照しているので追加する。

例えば、推奨設定の1つである @typescript-eslint/await-thenable の 関連情報(Related To) に、「TSLint: 'await-promise'」と記載がある。 await-promise リンクを開き、 Requires Type Info (Type Checking) をさらに開くと、 「 tsconfig.json を使うよ」と記載されている。これを設定せずにチェックスクリプト(後述)を実行すると、下記エラーが出るので、 parserOptions.project には ./tsconfig.json を指定する。

Error: Error while loading rule '@typescript-eslint/await-thenable': You have used a rule which requires parserServices to be generated. You must therefore provide a value for the "parserOptions.project" property for @typescript-eslint/parser.

rules は、 TypeScript らしくなるように設定した。

No ルール名 意味 設定値
@typescript-eslint/explicit-function-return-type 戻り値の型を明示する warn
@typescript-eslint/explicit-member-accessibility クラスメソッド、プロパティのアクセシビリティを明示する warn
@typescript-eslint/no-empty-function 実装が空の関数を許可しない off
@typescript-eslint/no-inferrable-types 宣言時に初期化された変数は型宣言を許可しない off

①、② を指定して TypeScript らしくなるように戻り値やアクセシビリティを明記させる。 error にする事も可能。

③ は推奨設定にすると有効になるけど、例えば、 OnInit.ngOnInit メソッドのように実装無しで残すケースもありそうなので、今回は off にした。

④ も推奨設定にすると有効になるけど、

public title: string = 'angular-eslint-sample';

と宣言と同時に初期値を書くと、「型は不要だよ」エラーになるので off にした。

設定出来たら下記のような、戻り値の型、アクセシビリティが無いメソッドで警告が出る事などが確認出来る。

f:id:nakamurakko:20220119134213p:plain

チェックスクリプト追加

.eslintrc.json の設定は Visual Studio Code で開いているファイルに適用されるけど、開いたファイルに限らずプロジェクト全体でチェックを実行したい場合は、 package.jsonscripts に lint の設定を追加する。

"scripts": {
  "ng": "ng",
  "start": "ng serve",
  "build": "ng build",
  "watch": "ng build --watch --configuration development",
  "test": "ng test",
  "lint": "eslint . --ext ts,tsx" // この行を追加。
},

設定後は、 Visual Studio Code のターミナルなどで、

npm run lint

を実行すれば、ソースのチェックが出来る。

f:id:nakamurakko:20220119134229p:plain

これで、型の書き忘れが減って TypeScript っぽくコーディング出来る。

今回作成したサンプルコードはこちら