VS Codeで空白やタブを表示する方法｜インデントの違いを一目でチェック

「このファイル、インデントがタブかスペースかわからない…」「
余計な空白が入ってないか確認したい」
「チームメンバーとのコード統一がうまくいかない」

そんなときに便利なのが、Visual Studio Code（VS Code）で空白やタブを可視化する機能です。

この記事では、VS Codeで空白文字（スペースやタブ、改行記号）を見えるように設定する方法を、初心者にもわかりやすく紹介します。

1. 空白を表示する設定

設定画面を開く
- 左下の歯車（⚙）アイコン → 「設定」をクリック
- または Ctrl + ,（Windows/Linux）/ Cmd + ,（Mac）
空白表示の設定を変更
- 検索窓に render whitespace と入力
- 「Render Whitespace（空白を表示）」の設定を選択
表示レベルを選択
- all – すべての空白を表示（推奨）
- boundary – 行頭・行末やタブだけ表示
- selection – 選択した範囲のみ表示
- trailing – 行末の余計な空白のみ表示
- none – 非表示

settings.jsonを直接編集する場合は以下のように書きます：

{
  "editor.renderWhitespace": "all"
}

実際の表示例：

function··hello()··{
→→console.log("Hello··World!");
}¶

チェックポイント：

設定が none になっていないか確認
ターミナル上では表示されません（エディタ内のみ対応）
一時的に表示を切り替えたい場合は、Ctrl + Shift + P（Windows/Linux）/ Cmd + Shift + P（Mac）で「View: Toggle Render Whitespace」を実行

タブの幅は以下で調整できます：

{
  "editor.tabSize": 4,
  "editor.insertSpaces": true
}

// 問題のあるコード例
function example() {
··if (condition) {
→→→return true;··
··}
}

このように空白を可視化することで、インデントの不整合や余計な空白をすぐに発見できます。

プロジェクトの.vscode/settings.jsonに以下を追加：

{
  "editor.renderWhitespace": "all",
  "editor.tabSize": 2,
  "editor.insertSpaces": true,
  "files.trimTrailingWhitespace": true
}

{
  "files.trimTrailingWhitespace": true
}

拡張機能「Zenkaku」をインストールすると、全角スペースを色付きで表示できます：

{
  "editor.renderIndentGuides": true,
  "editor.highlightActiveIndentGuide": true
}

操作	Windows/Linux	Mac
空白表示の切り替え	`Ctrl + Shift + P` → “Toggle Render Whitespace”	`Cmd + Shift + P` → “Toggle Render Whitespace”
設定画面を開く	`Ctrl + ,`	`Cmd + ,`
コマンドパレット	`Ctrl + Shift + P`	`Cmd + Shift + P`