【VSCode】不要なimport文を削除・自動で並び替える方法！

JavaScriptやTypeScriptのプロジェクトが大きくなると、コードに不要なimport文が増えたり、import文の並びがバラバラになったりすることがあります。これにより、コードが煩雑になり、読みづらくなることがあります。

Visual Studio Code（VS Code）では、source.organizeImportsという便利な機能を使って、不要なimport文を自動削除したり、import文を自動で並び替えることが可能です。

この記事では、その設定方法と使い方をわかりやすく解説します。

source.organizeImportsとは？

source.organizeImportsは、VS Codeに内蔵されているコマンドで、次のことを自動的に行います。

  • 不要なimport文を削除する
  • import文をアルファベット順に並び替える

これにより、コードが整理され、読みやすさやメンテナンス性が向上します。

import文を自動削除・自動で並び替える方法

VS Codeで不要なimport文を削除・自動で並び替える方法を以下に示します。

  • 手動でコマンドを実行する方法
  • ファイル保存時に自動実行する方法

手動でコマンドを実行する方法

source.organizeImportsは、コマンドパレット（Cmd + Shift + P または Ctrl + Shift + P）から実行できます。コマンドパレットを開き、source.organizeImportsと入力して選択するだけで、現在開いているファイル内の不要なimport文を削除し、import文を自動で並び替えてくれます。

ファイル保存時に自動実行する方法

ファイルを保存するたびにimport文を整理したい場合は、次の設定を追加します。

  1. settings.jsonを開きます
    • Cmd + ,またはCtrl + ,で設定を開き、右上のファイルアイコンをクリックするとsettings.jsonが開きます。
  2. 次の設定を追加します
{
  "editor.codeActionsOnSave": {
    "source.organizeImports": "explicit"
  }
}

この設定を追加することで、ファイルを保存するたびに、不要なimport文を削除したり、import文を自動で並び替えてくれます。

補足

VSCodeのバージョン1.85.0からsource.organizeImportsの設定が変更になりました。

  • 変更前："source.organizeImports": true
  • 変更後："source.organizeImports": "explicit"

VS Codeを最新版にアップデートした際、上記の変更に気づいた方もいるかもしれません。

リンク：https://stackoverflow.com/questions/77637621/vscode-workspace-settings-change-on-its-own

特定の言語だけ適用したい場合

もしTypeScriptのみに適用したい場合は、次のように設定を追加します。

{
  "[typescript]": {
    "editor.codeActionsOnSave": {
      "source.organizeImports": "explicit"
    }
  }
}

これにより、TypeScriptファイル保存時にのみimport文が整理されます。

サンプルコード

ここでは、source.organizeImportsを使った前後のコード例を示します。

Before: 整理されていないimport文

import { useState } from "react";
import { Button } from "@mui/material";
import { useEffect } from "react";
import React from "react";
import _ from "lodash"; // 未使用

このコードでは、import文の順番がバラバラで、lodashは使用されていないため不要です。

After: 整理されたimport文

import React, { useEffect, useState } from "react";
import { Button } from "@mui/material";

source.organizeImportsを実行すると、未使用のlodashが削除され、Reactに関連するuseEffectとuseStateも同じimport文にまとめられ、アルファベット順に整理されました。

注意点

source.organizeImportsは非常に便利ですが、次の点に注意が必要です。

  • 並び替えの順序
    • import文の順番は自動で整理されますが、プロジェクトによって独自の並び順ルールがある場合は手動で調整する必要があります。
  • 未使用のimport文の削除
    • 例えば、後で使用する予定のimportが削除されてしまうことがあります。意図的に未使用のimport文がある場合は、手動で管理することをお勧めします。

source.organizeImportsで指定できるキー

source.organizeImportsで指定できるキーはexplicit以外にもあります。詳しくは以下のドキュメントをご覧ください。

本記事のまとめ

この記事では『VSCodeで不要なimport文を削除・自動で並び替える方法』について、以下の内容を説明しました。

  • source.organizeImportsとは？
    • 不要なimport文を削除し、import文をアルファベット順に並び替えるVS Codeの機能。
  • 手動でコマンドを実行する方法
    • コマンドパレットでsource.organizeImportsを実行し、現在開いているファイルのimport文を整理する。
  • ファイル保存時に自動実行する方法
    • settings.jsonに"editor.codeActionsOnSave": { "source.organizeImports": "explicit" }を追加して、保存時に自動的にimport文を整理する。

お読み頂きありがとうございました。