【VSCode】タブをスペースへ変換する方法｜インデント幅を2・4へ変更する方法

みなさんこんにちは。

VSCodeでコードを編集していると、タブとスペースが混在してインデントがずれた経験をしたことがある方も多いかと思います。

今回は、既存ファイルのタブをスペースに変換する方法と、インデント幅を2・4に変更する方法についてご紹介したいと思います。

この記事はこんな人におすすめ

この記事はこんな人におすすめです！

タブで書かれたファイルをスペースへ変換したい人
VSCodeのインデントを2・4スペースに揃えたい人
ファイルごとの自動検出を無効にしたい人

といったところでしょうか。

Spaces・Tab Sizeを確認する

まず、編集したいファイルをVSCodeで開き、画面右下のステータスバーを確認してください。Tab Size: 4ならタブ、Spaces: 4ならスペースでインデントする設定です。数字は幅を表します。

VSCodeはファイルを開いた際にインデントを自動検出するため、普段の設定と異なる表示になることもあります。

VSCodeのステータスバーでTab Sizeが4に設定されていることを確認する画面

既存のタブをスペースに変換する

タブを含むファイルを開いて、右下のTab Sizeをクリックしてください。メニューから「Convert Indentation to Spaces」を選択すると、既存のインデントをスペースに変換できます。

なお、変換する前に希望するTab Size（2または4）に合わせておくと、意図した幅に揃えやすくなります。

例えば、タブを使った次のコードを変換します。先頭の字下げはタブ文字です。

function greet() {
	if (true) {
		console.log("Hello");
	}
}

タブ幅を2に合わせて変換した場合、次のようにスペースで字下げできます。

function greet() {
  if (true) {
    console.log("Hello");
  }
}

VSCodeでConvert Indentation to Spacesを選択してタブをスペースへ変換する画面

インデント幅を2・4に変更する

右下のSpaces: 4などをクリックし、「Indent Using Spaces」から2または4を選んでください。タブ文字の表示幅だけを変更する「Change Tab Display Size」とは別の操作です。

ただし、Tab Sizeを変更するだけでは、既存行に入力済みのスペース数は書き換わりません。既存の字下げも2スペースに揃えるなら、変換前に幅を指定するか、適切なフォーマッターで整形してください。

settings.jsonで設定を保存する

今後も同じ設定を使う場合は、Ctrl + ,で設定を開き、右上の「設定（JSON）を開く」からsettings.jsonに以下を指定します。

{ // Tabキーを押した際にタブではなくスペースを挿入する “editor.insertSpaces”: true, // スペース2個分のインデント幅にする（4に変更可能） “editor.tabSize”: 2, // 既存ファイルの自動判定による設定の上書きを防ぐ “editor.detectIndentation”: false }

4スペースに揃えたい場合は、editor.tabSizeを4に変更してください。プロジェクトごとに設定したい場合は、.vscode/settings.jsonを使用できます。既存の設定項目は削除せずに追加してください。