環境
- Angular CLI 13
- Visual Studio Code
参考にしたサイト
- @typescript-eslint/eslint-plugin
- eslintを最大限活用してTypeScriptの型安全を少しずつ高める方法
- TypeScriptのプロジェクトでESLint+Prettierを活用する
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行を追加して、 parser
、 plugins
は、 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
にした。
設定出来たら下記のような、戻り値の型、アクセシビリティが無いメソッドで警告が出る事などが確認出来る。
チェックスクリプト追加
.eslintrc.json
の設定は Visual Studio Code で開いているファイルに適用されるけど、開いたファイルに限らずプロジェクト全体でチェックを実行したい場合は、 package.json
の scripts
に 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
を実行すれば、ソースのチェックが出来る。
これで、型の書き忘れが減って TypeScript っぽくコーディング出来る。
今回作成したサンプルコードはこちら。