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

2 min read

モチベーション

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

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

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

インストール

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

npm i -D eslint-plugin-no-jquery

.eslintrc

extendsplugins に追加する。

{
  "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 メソッドが対象

eslint-plugin-no-jquery/index.js at master · wikimedia/eslint-plugin-no-jqueryControl allowance of certain jQuery functions, and suggest or autofix alternatives. - eslint-plugin-no-jquery/index.js at master · wikimedia/eslint-plugin-no-jqueryhttps://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
avatar

hiro

Web Frontend Engineer / ex: Web Backend Engineer, Application Engineer