VSCodeで特定のディレクトリ以下の未使用import文をすべて削除する [Javascript/TypeScript]

JavaScript TypeScript VSCode

ファイルの保存時に organize imports をしていれば未使用の import文 が commit されることはほぼないと言っても過言ではありません。

例: VSCode でファイル保存時に未使用の import文 を削除 & 自動ソートする設定。 settings.json に以下を記述する。

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

eslint で unused-var を有効にしている場合も lint チェックで気付いて commit 前に修正することができます。しかし、目視チェックしてるプロジェクトだと容易に差分に紛れ込みます。あとから eslint を入れて未使用の import文 を洗い出したようなプロジェクトだと、対象となるファイルの数が多すぎて1つ1つ確認&修正していくのはかなり面倒くさいです。

そういうときに特定ディレクトリ以下のすべての Javascript/TypeScript ファイルの未使用の import文 をまとめて削除できたら便利ですよね。ついでにソートもしてほしいですよね。今回はそのやり方について紹介します。

拡張機能を使う方法

  1. Folder source actions をインストールする
  2. ディレクトリを右クリック → "Organize Imports in Folder" を選択する

ファイル数が多い場合はファイルの自動保存を有効にした状態で実行した方がいいです。変更があったファイルをあとからすべて上書き保存しようとすると VSCode がフリーズしました。

ちなみに IntelliJ IDEA には同様の操作で import文 の自動削除とソートをやってくれる Optimize Imports という機能が標準で入ってます。

コマンドラインツールを使う方法

保存時に organize import すると Prettier みたいなフォーマット系の拡張と衝突してうまく動かないみたいな話を聞くので、できれば git hook で commit するときに適用されるようにしたいです。

organize-imports-cli を使うとコマンドラインから実行することができます。

github.com

個人的にはコマンドラインツールを使ったやり方の方がオススメです。