ESLint が入っていないプロジェクトで VSCode を使って未使用のインポートや変数を簡単に消す or 見つける方法

はじめに

こんにちは。ESLint に依存している kimizuy です。

皆さん、ESLint は使っていますでしょうか。ESLint の大体のスタンダードルールでは使っていない変数やインポートに warning を出してくれるので、不要なコードが PR に紛れ込むことを未然に防ぐことができます。

この度、ESLint が入っていないプロジェクトに携わることがあり、できれば目視に頼ることなく不要な
インポートや変数を取り除きたいと思ったので色々調べてみました。本記事ではその知見をまとめました。

未使用のインポートや変数を消す or 見つける方法

VSCode のショートカットで未使用のインポートを消す

VSCode には「Organize Imports」という機能があり、あらかじめキーボードショートカットが割り当てられています。そのショートカットを叩くことで使っていないインポートを消すことができます。

• Mac の場合は Option + Shift + O
• Windows の場合は Alt + Shift + O

です。

VSCode でセーブしたときに未使用のインポートを消す

いちいちショートカットを叩くのは面倒なのでファイルをセーブしたタイミングでフォーマットされるように VSCode で設定できます。

VSCode の settings.json を開いて以下の設定を追加します。

"editor.codeActionsOnSave": {
  "source.organizeImports": true
},

ただし、この方法は ESLint とバッティングする可能性があります。例えば、ほかのプロジェクトでは ESLint を使っていて eslint-plugin-import のようなインポートの順番を揃えてくれるプラグインが入っている場合は、上書き合戦が起きるので注意してください。

使っていないインポートや変数をより目立たせる

より目立たせることで目視での確認の負担を減らすことができます。

VSCode の settings.json に以下の設定を追加します。

"workbench.colorCustomizations": {
  "editorUnnecessaryCode.border": "#dd7aab"
},

これで使っていないインポートや変数にピンク色の下線を引くことができます。

参考にした記事

How to remove unused imports in VSCode.

VS code how to show unused variables as red

おわりに

将来の保守性を考えると ESLint を入れておきたいところですが、プロジェクトへの影響も大きいので腰が重いこともあります。ほかのツールを用いることで開発体験を向上させていきたいですね。

以上、お読みいただきありがとうございました。