「このファイル、インデントがタブかスペースかわからない…」
「余計な空白が入ってないか確認したい」
そんなときに便利なのが、Visual Studio Code（VS Code）で空白やタブを可視化する機能です。
この記事では、VS Codeで空白文字（スペースやタブ、改行記号）を見えるように設定する方法を、初心者にもわかりやすく紹介します。
空白を表示する設定
GUIで設定する方法
- 左下の歯車（⚙）アイコン → 「設定」をクリック
- 検索窓に
render whitespaceと入力 - 「Render Whitespace（空白を表示）」の設定を以下から選択：
all– すべての空白を表示boundary– 行頭・行末やタブだけ表示trailing– 行末の空白のみ表示none– 非表示
settings.jsonで設定
settings.jsonを直接編集する場合は以下のように書きます：
{
"editor.renderWhitespace": "all"
}
これでスペースは点「·」、タブは矢印「→」などで表示されます。
表示される記号の例
| 記号 | 意味 |
|---|---|
· | スペース（半角空白） |
→ | タブ |
¬ | 行末（改行マーク）※ |
※行末記号を表示するには "editor.renderControlCharacters": true の設定が必要です。
これらの記号のおかげで、タブとスペースが混在していても一目でわかります。
よくあるトラブルと対処法
文字が表示されない場合
- 設定が
noneになっていないか確認してください - ターミナル上では表示されません（エディタ内のみ対応）
- ファイルを再読み込みしてみてください
タブ幅が大きすぎる場合
タブの幅は以下で調整できます：
{
"editor.tabSize": 4
}
例えば 2 にすれば、タブが2スペース分の幅になります。
空白記号が見にくい場合
空白記号の色を変更することも可能です：
{
"workbench.colorCustomizations": {
"editorWhitespace.foreground": "#3B4252"
}
}
実用的な活用例
コードレビュー時の確認
チームでコーディング規約を統一する際に、インデントの種類や不要な空白を素早く発見できます。
多言語対応のファイル編集
PythonやYAMLなど、インデントが重要な言語では特に威力を発揮します。
データファイルの整理
CSVやTSVファイルの区切り文字を確認する際にも便利です。
関連する便利な設定
行末の空白を自動削除
{
"files.trimTrailingWhitespace": true
}
保存時に自動整形
{
"editor.formatOnSave": true
}
インデントの自動検出
{
"editor.detectIndentation": true
}
まとめ
VS Codeで空白やタブを表示するには：
- 設定画面で
Render Whitespaceをallに設定 settings.jsonなら"editor.renderWhitespace": "all"と記述
これだけで、インデントや余計な空白を見逃さずに済むようになります。
コードの品質向上や、チーム開発での統一性確保に大いに役立つ機能です。ぜひ活用してみてください！
コメント