NO_ERRORS_SCHEMA を使うのをやめるために ESLint のルールを作った話

背景

前回 NO_ERRORS_SCHEMA を安易に使うのをやめたい話 - とんかつ時々あんどーなつ で NO_ERRORS_SCHEMA を使うのをやめたい、という話を書いた。 今回はその延長で意図せず使うのを防止するために ESLint のカスタムルールを作った。

完成品は @kasaharu/eslint-plugin-ng - npm になる。

作り方

プラグインを作る

プラグインは Working with Plugins - ESLint - Pluggable JavaScript linter を見て作った。 実際はこのページに書いてあるように Yeoman generator を使ってコマンドを実行しただけでできた。

ルール用のファイルを用意

ルール用のファイルは Working with Rules - ESLint - Pluggable JavaScript linter を見て用意する。 どこに置けばいいかまで書いてあるので迷いが少ない。

Unit tests

TDD の精神に乗っ取りテストコードを用意する。 Unit Tests - ESLint - Pluggable JavaScript linter を参考に valid と invalid の 2 つのテストケースを用意した。

ルールの実装

いよいよルールを実装する。AST 初めてだったので右も左もわからなかったが Code Path Analysis Details - ESLint - Pluggable JavaScript linter を見て雰囲気を掴んだ。 今回のケースだと type が Identifier のときに処理できることがわかったので Identifier の callback 関数を実装した。

まとめ

実際に NO_ERRORS_SCHEMA を使っているとこんな感じのエラーになることが確認できた。

➜ yarn lint
yarn run v1.22.10
$ ng lint

Linting "project-name"...

/path/to/project-name/src/app/features/top/pages/top/top.component.spec.ts
   1:10  error  NO_ERRORS_SCHEMA は非推奨です  @kasaharu/ng/no-ng-no-errors-schema
   1:10  error  NO_ERRORS_SCHEMA は非推奨です  @kasaharu/ng/no-ng-no-errors-schema
  13:19  error  NO_ERRORS_SCHEMA は非推奨です  @kasaharu/ng/no-ng-no-errors-schema

✖ 3 problems (3 errors, 0 warnings)

Lint errors found in the listed files.

error Command failed with exit code 1.

ESLint のカスタムルールを作るのは初めてで試行錯誤したが、とりあえず動く形に持っていけたのはよかった。