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

プログラミング・IT

「このファイル、インデントがタブかスペースかわからない…」
「コードの最後に余計な空白が入ってないか確認したい」
「チームメンバーによってインデント方法がバラバラで統一したい」

プログラミングをしていると、目に見えない空白文字（ホワイトスペース）が原因で、思わぬトラブルに遭遇することがあります。

特に、タブとスペースが混在したファイルや、行末に余計な空白があるファイルは、コードの見た目は正常でも実際には問題を引き起こす可能性があります。

そんなときに便利なのが、Visual Studio Code（VS Code）で空白やタブを可視化する機能です。この機能を使えば、普段は見えない空白文字を記号で表示し、インデントの問題を一目で発見できます。

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

スポンサーリンク

空白文字表示の基本概念

なぜ空白文字を表示するのか

開発でよくある問題

空白文字が見えないことで起こる典型的な問題：

インデントの混在
def example_function():
    if True:  # ← 4つのスペース
	    print("Hello")  # ← タブ文字
        print("World")  # ← 4つのスペース

この例では、一見正しく見えますが、2行目がタブ、3行目がスペースで、統一されていません。

行末の余計な空白
function greet(name) {
    return `Hello, ${name}!`;   // ← 行末に見えない空白
}

行末の空白は、差分比較やコードレビューで問題となることがあります。

全角スペースの混入
def calculate():
　　 # ← 全角スペースが混入（見た目は普通のスペースと同じ）
    return 42

VS Codeの空白文字表示機能

表示される記号の種類

VS Codeでは、以下のような記号で空白文字を可視化します：

空白文字表示記号説明
スペース· または ⋅半角スペース1つを点で表示
タブ→ または ⟶タブ文字を矢印で表示
行末改行¬ または ↵行末の改行文字を表示
全角スペース□ または強調表示全角スペースを目立つ記号で表示

表示レベルの選択

VS Codeでは、表示する空白文字のレベルを選択できます：

  • all: すべての空白文字を表示
  • boundary: 単語境界やタブのみ表示
  • selection: 選択範囲内のみ表示
  • trailing: 行末の空白のみ表示
  • none: 空白文字を表示しない

基本的な設定方法

GUI（設定画面）での設定

設定画面へのアクセス

  1. 設定画面を開く
    • Ctrl + ,（Windows/Linux）
    • Cmd + ,（macOS）
    • またはメニューから「ファイル」→「ユーザー設定」→「設定」
  2. 空白文字設定を検索
    • 検索窓に「render whitespace」と入力
    • 「Editor: Render Whitespace」設定が表示される

設定値の選択

Render Whitespace設定で以下から選択：

「all」を選択した場合
function·example()·{
→   if·(true)·{
→   →   console.log("Hello·World");···
→   }
}

すべてのスペース（·）とタブ（→）が表示されます。

「boundary」を選択した場合
function example() {
→   if (true) {
→   →   console.log("Hello World");···
→   }
}

単語境界の空白とタブのみが表示されます。

「trailing」を選択した場合
function example() {
    if (true) {
        console.log("Hello World");···
    }
}

行末の余計な空白（···）のみが表示されます。

settings.jsonでの設定

設定ファイルへのアクセス

  1. コマンドパレットを開く
    • Ctrl + Shift + P（Windows/Linux）
    • Cmd + Shift + P（macOS）
  2. settings.jsonを開く "Preferences: Open Settings (JSON)" を実行

基本的な設定

{
    "editor.renderWhitespace": "all"
}

より詳細な設定

{
    "editor.renderWhitespace": "boundary",
    "editor.renderControlCharacters": true,
    "editor.renderLineHighlight": "all",
    "files.trimTrailingWhitespace": true,
    "files.insertFinalNewline": true
}

ワークスペース設定での管理

プロジェクト固有の設定

.vscode/settings.jsonを作成して、プロジェクト固有の設定を適用：

{
    "editor.renderWhitespace": "all",
    "editor.detectIndentation": false,
    "editor.insertSpaces": true,
    "editor.tabSize": 2
}

高度な空白文字管理

制御文字の表示

制御文字可視化の有効化

{
    "editor.renderControlCharacters": true
}

これにより、以下のような制御文字も表示されます：

  • NULL文字（\0）
  • タブ文字（\t）
  • 改行文字（\n、\r）

言語別の設定

プログラミング言語ごとの空白設定

{
    "[python]": {
        "editor.renderWhitespace": "all",
        "editor.insertSpaces": true,
        "editor.tabSize": 4
    },
    "[javascript]": {
        "editor.renderWhitespace": "boundary",
        "editor.insertSpaces": true,
        "editor.tabSize": 2
    },
    "[go]": {
        "editor.renderWhitespace": "all",
        "editor.insertSpaces": false,
        "editor.tabSize": 4
    }
}

カスタムスタイリング

空白文字の色とスタイルをカスタマイズ

{
    "workbench.colorCustomizations": {
        "editorWhitespace.foreground": "#3c3c3c",
        "editorIndentGuide.background": "#404040",
        "editorIndentGuide.activeBackground": "#707070"
    }
}

ショートカットとコマンド

一時的な表示切り替え

コマンドパレットからの操作

  1. コマンドパレットを開く
    • Ctrl + Shift + P
  2. 空白表示を切り替え "View: Toggle Render Whitespace" を実行

カスタムキーバインドの設定

keybindings.jsonでショートカットを設定：

[
    {
        "key": "ctrl+shift+w",
        "command": "editor.action.toggleRenderWhitespace"
    }
]

一括操作コマンド

空白文字の一括処理

Ctrl + Shift + P で以下を実行：

- "Transform to Spaces" : タブをスペースに変換
- "Transform to Tabs" : スペースをタブに変換
- "Trim Trailing Whitespace" : 行末空白を削除

インデント問題の診断と修正

インデント混在の発見

視覚的な確認方法

空白文字表示を有効にした状態で、以下をチェック：

def mixed_indentation():
    if True:  # ← スペース4つ（····）
	    print("Hello")  # ← タブ1つ（→）
        print("World")  # ← スペース4つ（····）

この例では、2行目のタブ（→）が他の行のスペース（····）と異なることが一目で分かります。

インデント検出の設定

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

自動修正の設定

保存時の自動修正

{
    "files.trimTrailingWhitespace": true,
    "files.insertFinalNewline": true,
    "files.trimFinalNewlines": true,
    "editor.formatOnSave": true
}

EditorConfigとの連携

.editorconfigファイルでプロジェクト全体の設定を統一：

root = true

[*]
charset = utf-8
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true

[*.{js,ts,jsx,tsx}]
indent_style = space
indent_size = 2

[*.py]
indent_style = space
indent_size = 4

[*.go]
indent_style = tab
indent_size = 4

拡張機能による高度な機能

全角スペース対策

推奨拡張機能

  1. Highlight Trailing White Spaces
    • 行末の空白をハイライト表示
  2. zenkaku
    • 全角スペースを目立つ色で表示
  3. Bracket Pair Colorizer
    • 括弧の対応関係を色分け（インデント理解に役立つ）

拡張機能の設定例

{
    "highlightTrailingWhiteSpaces.highlightCurrentLine": false,
    "highlightTrailingWhiteSpaces.backgroundColor": "rgba(255,0,0,0.3)",
    "zenkaku.highlightZenkakuSpace": true
}

インデントガイドの活用

インデントガイドライン表示

{
    "editor.guides.indentation": true,
    "editor.guides.bracketPairs": true,
    "workbench.colorCustomizations": {
        "editorIndentGuide.background": "#404040",
        "editorIndentGuide.activeBackground": "#707070"
    }
}

表示例

def example():
│   if True:
│   │   for i in range(5):
│   │   │   print(i)
│   │   │   if i > 2:
│   │   │   │   break

縦線（│）でインデントレベルが視覚的に分かります。

トラブルシューティング

よくある問題と解決方法

空白文字が表示されない

原因1：設定が無効になっている

確認方法：

// settings.json で確認
{
    "editor.renderWhitespace": "none"  // ← これだと表示されない
}

解決方法：

{
    "editor.renderWhitespace": "all"  // ← allまたはboundaryに変更
}
原因2：ターミナル内での表示

症状: ターミナル内で空白文字が表示されない

説明: VS Codeの空白文字表示機能は、エディタ内でのみ動作します。統合ターミナル内では表示されません。

原因3：拡張機能との競合

確認方法: セーフモードで起動

code --disable-extensions

解決方法: 問題のある拡張機能を特定し、無効化または設定調整

表示記号が見にくい

カスタムカラーテーマの適用
{
    "workbench.colorCustomizations": {
        "editorWhitespace.foreground": "#666666",
        "editor.background": "#1e1e1e",
        "editor.foreground": "#d4d4d4"
    }
}
フォントサイズとの調整
{
    "editor.fontSize": 14,
    "editor.fontFamily": "'Fira Code', 'Consolas', monospace",
    "editor.fontLigatures": true
}

パフォーマンスの問題

大きなファイルでの表示設定
{
    "editor.renderWhitespace": "selection",  // 選択範囲のみ
    "files.exclude": {
        "**/node_modules": true,
        "**/.git": true
    }
}
ファイルサイズ制限の設定
{
    "editor.largeFileOptimizations": true,
    "editor.maxTokenizationLineLength": 20000
}

チーム開発での活用

共通設定の作成

プロジェクト設定ファイル

.vscode/settings.json:

{
    "editor.renderWhitespace": "boundary",
    "editor.detectIndentation": false,
    "editor.insertSpaces": true,
    "editor.tabSize": 2,
    "files.trimTrailingWhitespace": true,
    "files.insertFinalNewline": true,
    "[markdown]": {
        "files.trimTrailingWhitespace": false
    }
}

推奨拡張機能リスト

.vscode/extensions.json:

{
    "recommendations": [
        "editorconfig.editorconfig",
        "esbenp.prettier-vscode",
        "ms-python.python"
    ]
}

コードレビューでの活用

プルリクエスト前のチェック

# Git hooks を使用した自動チェック
# .git/hooks/pre-commit

#!/bin/sh
# 行末空白のチェック
git diff --check --cached
if [ $? -ne 0 ]; then
    echo "Error: Trailing whitespace found!"
    exit 1
fi

VS Code タスクでの自動化

.vscode/tasks.json:

{
    "version": "2.0.0",
    "tasks": [
        {
            "label": "Format and clean whitespace",
            "type": "shell",
            "command": "code",
            "args": [
                "--command", "editor.action.formatDocument",
                "--command", "editor.action.trimTrailingWhitespace"
            ],
            "group": "build"
        }
    ]
}

実践的な使用例

日常的な開発ワークフロー

1. ファイルを開いた時の確認

1. Ctrl + Shift + V で空白表示をON
2. インデントの統一性を確認
3. 行末の余計な空白をチェック
4. 必要に応じて修正

2. コードレビュー時の確認

1. 差分表示で空白の変更を確認
2. インデント方法の統一性をチェック
3. 意図しない空白変更がないか確認

3. ファイル保存前の最終チェック

1. Ctrl + Shift + P → "Trim Trailing Whitespace"
2. インデントの最終確認
3. 保存時自動フォーマットの確認

言語別のベストプラクティス

Python

{
    "[python]": {
        "editor.renderWhitespace": "all",
        "editor.insertSpaces": true,
        "editor.tabSize": 4,
        "editor.rulers": [79]
    }
}

JavaScript/TypeScript

{
    "[javascript][typescript]": {
        "editor.renderWhitespace": "boundary",
        "editor.insertSpaces": true,
        "editor.tabSize": 2,
        "editor.codeActionsOnSave": {
            "source.fixAll.eslint": true
        }
    }
}

Go

{
    "[go]": {
        "editor.renderWhitespace": "all",
        "editor.insertSpaces": false,
        "editor.tabSize": 4,
        "editor.formatOnSave": true
    }
}

まとめ

VS Codeでの空白文字表示機能は、コードの品質向上と開発効率化に欠かせない機能です。

設定方法のおさらい

  1. 基本設定
    • 設定画面で「Render Whitespace」を「all」または「boundary」に設定
    • またはsettings.jsonで"editor.renderWhitespace": "all"を指定
  2. 表示内容の理解
    • スペース：点（·）
    • タブ：矢印（→）
    • 行末空白：専用記号で表示
  3. 自動化設定
    • 保存時の自動トリミング
    • フォーマット時の自動修正

活用のメリット

  • 品質向上: インデント問題の早期発見
  • 統一性: チーム全体でのコーディング規約統一
  • 効率化: 目視確認時間の短縮
  • トラブル回避: 空白起因のエラー防止

導入のポイント

  • 段階的導入: 最初は「boundary」から始めて慣れてから「all」に
  • チーム合意: プロジェクト全体での設定統一
  • 自動化: 手動作業を減らす設定の活用
  • 拡張機能: 必要に応じてより高度な機能を追加

Youtube

神話・歴史・伝承の解説チャンネル

スポンサーリンク

コメント

タイトルとURLをコピーしました