ESLintのパフォーマンスを調査する

環境

ESLint v8.13.0

調査方法

ルールごとにかかっている時間の割合を計測する

TIMINGオプションを付けると、実行時間が長い順のトップ10と、lint対象全体に対してのトップ10の割合が表示される

$ TIMING=1 eslint lib
Rule                    | Time (ms) | Relative
:-----------------------|----------:|--------:
no-multi-spaces         |    52.472 |     6.1%
camelcase               |    48.684 |     5.7%
no-irregular-whitespace |    43.847 |     5.1%
valid-jsdoc             |    40.346 |     4.7%
handle-callback-err     |    39.153 |     4.6%
space-infix-ops         |    35.444 |     4.1%
no-undefined            |    25.693 |     3.0%
no-shadow               |    22.759 |     2.7%
no-empty-class          |    21.976 |     2.6%
semi                    |    19.359 |     2.3%

https://eslint.org/docs/developer-guide/working-with-rules#per-rule-performance

debugオプションを使う

eslint src/**/*.ts --debug

eslint --cache src/**/*.ts --debug

下記のような情報が表示される。

• Loading rule...読み込んでいるルール
• eslint:linter Linting code for...どのファイルを読み込んでLintしているか
• Cache hit/No cache found

上記をもとに不要なファイルが読み込まれていないか、キャッシュが効いているかを確認する。

https://eslint.org/docs/user-guide/command-line-interface#--debug

改善方法例

不要なルール、不要なファイルの見直し

• 古い情報を参考にeslint-plugin-prettierを使うと遅くなる
  https://prettier.io/docs/en/integrating-with-linters.html#notes

• .eslintignoreを利用して不要なものは読み込まないようにする
  https://eslint.org/docs/user-guide/configuring/ignoring-code

キャッシュを使う

--cacheオプションを付けることでキャッシュファイルが生成され、
キャッシュファイルと差分があるもののみlintされる。

timeコマンドで計測した結果は下記

time eslint --cache src/**/*.ts

• 初回実行時
  8.15s user
• 二回目
  1.53s user

検証には適当な700行程度のTypeScriptのリポジトリを利用。
eslint-plugin-prettierが入っていたのでもともと遅い。

https://eslint.org/docs/user-guide/command-line-interface#caching

まとめ

ESLintのパフォーマンスを調査する手順をまとめた。
キャッシュオプションに関してはCIでも使えそうなので、今後必要が出たら調査していく。