Deprecated になった jQuery API を静的に検出する方法

モチベーション

jQuery Migrate を使えば、実行時に Deprecated な API の利用箇所への警告を出すことは可能である。

ただ、対象が数百ファイルあり、実行前に静的に解析したい背景があり、ESLint で静的に検証を実施した。

eslint-plugin-no-jquery を導入する

インストール

ESlintのプラグインであるeslint-plugin-no-jqueryを導入する。

npm i -D eslint-plugin-no-jquery

.eslintrc

extends と plugins に追加する。

{
  "extends": "plugin:no-jquery/deprecated",
  "plugins": ["no-jquery"]
}

構成

• plugin:no-jquery/recommended
• plugin:no-jquery/deprecated
  • plugin:no-jquery/deprecated-3.6
  • ...
  • plugin:no-jquery/deprecated-1.0
    非推奨になった API が対象（1.0〜3.6 の構成がそれぞれある）
• plugin:no-jquery/slim
  slim や ajax を対象
• plugin:no-jquery/all
  すべての jQuery メソッドが対象

https://github.com/wikimedia/eslint-plugin-no-jquery/blob/master/src/index.js#L106

実行する

npx eslint deprecated.js

/Users/hiro/workspace/jQueryProject/deprecated.js
  33:5  warning  Prefer .on or .trigger to .click  no-jquery/no-event-shorthand
  37:5  warning  Prefer .on or .trigger to .click  no-jquery/no-event-shorthand
  40:5  warning  Prefer .on or .trigger to .click  no-jquery/no-event-shorthand
  43:5  warning  Prefer .on or .trigger to .click  no-jquery/no-event-shorthand

✖ 4 problems (0 errors, 4 warnings)
  0 errors and 4 warnings potentially fixable with the `--fix` option.

これで確認ができた。

対象の数百ファイルに関しては以下のようにファイルに書き出しした。

npx eslint ./js/**/*.js > output.txt