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 を入れておきたいところですが、プロジェクトへの影響も大きいので腰が重いこともあります。ほかのツールを用いることで開発体験を向上させていきたいですね。

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

Gaji-Laboでは、React経験が豊富なフロントエンドエンジニアを募集しています

弊社ではReactの知見で事業作りに貢献したいフロントエンドエンジニアを募集しています。大きな制作会社や事業会社とはひと味もふた味も違うGaji-Laboを味わいに来ませんか?

もちろん、一緒にお仕事をしてくださるパートナーさんも随時募集中です。まずはお気軽に声をかけてください。お仕事お問い合わせや採用への応募、共に大歓迎です!

求人応募してみる!

投稿者 Yamasaki Kimizu

React, Redux, TypeScript プロジェクトでフロントエンド領域を担当。個人でも Next.js アプリの開発をしています。日課はRSSで取得した技術記事を読むこと、最近の関心は Core Web Vitals です。将来はでかい犬が飼いたいです。