VS Codeで空白を一括削除する方法｜行末のスペースやタブをまとめてクリーンに

プログラムを書いていると、気づかないうちに行末に余分な空白（スペースやタブ）が溜まってしまうことがあります。

こうした不要な空白は、エラーの原因になったり、Gitで差分が無駄に増えたり、チーム開発でのコードレビューを煩雑にしたりして意外と厄介です。

特にPythonのようにインデントが重要な言語や、Markdownファイルでのレイアウト、Web開発でのHTMLやCSSでは、見えない空白文字が思わぬ問題を引き起こすことがあります。

Visual Studio Code（VS Code）を使えば、そんな余分な空白を手動で一括削除したり、保存時に自動的に取り除く設定が簡単にできます。

さらに、正規表現を使った高度な空白処理や、ファイル全体の空白を可視化する方法もあります。

この記事では、VS Codeで空白を効率的に管理する方法を、基本操作から上級テクニックまで詳しく解説します。

空白文字が引き起こす問題
1. 開発で起こりがちなトラブル
2. 空白文字の種類と特徴
基本的な空白削除方法
1. コマンドパレットを使った手動削除
2. キーボードショートカットの設定
保存時の自動空白削除設定
1. 基本的な自動削除設定
2. 言語別の細かい設定
高度な空白処理テクニック
プロジェクト全体での空白管理
トラブルシューティング
1. よくある問題と解決方法
2. デバッグとログの確認
自動化とワークフロー最適化
1. タスク自動化の設定
2. CI/CDでの空白チェック
チーム開発での運用
1. コーディング規約の統一
まとめ
1. 基本的な空白削除
2. 高度な管理テクニック

空白文字が引き起こす問題

開発で起こりがちなトラブル

Git差分の無駄な増加

見た目は変わらないのに差分として表示される
コードレビューでノイズとなり、本当の変更が見づらくなる
マージ時のコンフリクトの原因になることがある

プログラミング言語固有の問題

Python：インデントエラーの原因
Markdown：意図しない改行や空白行の発生
YAML：設定ファイルのパースエラー
JSON：一部パーサーでエラーが発生

チーム開発での統一性

エディタごとの空白処理の違い
コーディング規約の遵守
CI/CDパイプラインでのLintエラー

空白文字の種類と特徴

半角スペース（U+0020）

最も一般的な空白文字
キーボードのスペースバーで入力
プログラムでは通常問題なし

タブ文字（U+0009）

インデントによく使用される
表示幅がエディタ設定に依存
スペースとの混在で問題が発生しやすい

全角スペース（U+3000）

日本語環境で誤って入力されやすい
プログラムでは通常エラーの原因
視覚的に発見しにくい

その他の空白文字

改行なしスペース（U+00A0）
ゼロ幅スペース（U+200B）
HTMLエンティティ由来の空白

基本的な空白削除方法

コマンドパレットを使った手動削除

VS Codeには「Trim Trailing Whitespace（行末の空白を削除）」という機能が標準で備わっています。

基本的な手順

コマンドパレットを開く
- Windows/Linux：Ctrl + Shift + P
- Mac：Cmd + Shift + P
コマンドを実行
- trim と入力
- 「Trim Trailing Whitespace」を選択してEnter
結果の確認
- 現在開いているファイルの全行末空白が削除される
- 変更内容はUndoで取り消し可能

より詳細な削除オプション

現在の選択範囲のみ削除

削除したい範囲を選択
コマンドパレットで「Trim Trailing Whitespace」を実行
選択範囲内の行末空白のみが削除される

特定の行のみ削除

削除したい行にカーソルを配置
Ctrl + Lで行全体を選択
「Trim Trailing Whitespace」を実行

キーボードショートカットの設定

頻繁に使用する場合は、専用のキーボードショートカットを設定すると便利です。

ショートカットの追加手順

キーボードショートカット設定を開く
- Ctrl + K, Ctrl + S（Mac：Cmd + K, Cmd + S）
コマンドを検索
- 検索ボックスに「trim trailing」と入力
- 「Trim Trailing Whitespace」を見つける
ショートカットを設定
- 行をクリックして「+」ボタンを押す
- 好みのキー組み合わせを入力（例：Ctrl + Alt + T）

keybindings.jsonでの設定

[
    {
        "key": "ctrl+alt+t",
        "command": "editor.action.trimTrailingWhitespace"
    }
]

保存時の自動空白削除設定

基本的な自動削除設定

GUI設定画面での方法

設定画面を開く
- Ctrl + ,（Mac：Cmd + ,）
- または左下の歯車アイコン → 「設定」
空白関連設定を検索
- 検索窓に「trim」と入力
- 「Files: Trim Trailing Whitespace」にチェックを入れる
その他の推奨設定
- 「Files: Insert Final Newline」：ファイル末尾に改行を自動追加
- 「Files: Trim Final Newlines」：ファイル末尾の余分な空行を削除

settings.jsonでの詳細設定

{
    // 保存時に行末の空白を自動削除
    "files.trimTrailingWhitespace": true,
    
    // ファイル末尾に改行を自動追加
    "files.insertFinalNewline": true,
    
    // ファイル末尾の余分な空行を削除
    "files.trimFinalNewlines": true,
    
    // 特定のファイルタイプでは無効化
    "[markdown]": {
        "files.trimTrailingWhitespace": false
    }
}

言語別の細かい設定

Pythonプロジェクトでの推奨設定

{
    "[python]": {
        "files.trimTrailingWhitespace": true,
        "files.insertFinalNewline": true,
        "editor.rulers": [79, 88],
        "editor.detectIndentation": false,
        "editor.insertSpaces": true,
        "editor.tabSize": 4
    }
}

JavaScript/TypeScriptでの設定

{
    "[javascript]": {
        "files.trimTrailingWhitespace": true,
        "files.insertFinalNewline": true,
        "editor.formatOnSave": true,
        "editor.codeActionsOnSave": {
            "source.fixAll.eslint": true
        }
    },
    "[typescript]": {
        "files.trimTrailingWhitespace": true,
        "files.insertFinalNewline": true,
        "editor.formatOnSave": true
    }
}

Markdownでの特別な考慮

Markdownでは行末の空白が意味を持つ場合があるため、注意が必要です：

{
    "[markdown]": {
        // Markdownでは行末空白が改行を意味するため無効化
        "files.trimTrailingWhitespace": false,
        "files.insertFinalNewline": true,
        "editor.wordWrap": "on",
        "editor.rulers": [80]
    }
}

高度な空白処理テクニック

正規表現を使った空白の検索と置換

検索・置換機能の基本

検索・置換パネルを開く
- Ctrl + H（Mac：Cmd + H）
正規表現モードを有効化
- 検索ボックス右側の「.*」アイコンをクリック

よく使用する正規表現パターン

行末の空白文字を検索

\s+$

連続する空行を検索

^\s*$\n

タブとスペースが混在している行を検索

^(\t+ +| +\t+)

全角スペースを検索

実用的な置換例

複数の空行を1つに統一

検索：\n\s*\n\s*\n
置換：\n\n

タブをスペースに置換（4スペース）

検索：\t
置換：（4つのスペース）

行頭の余分な空白を削除

検索：^ +
置換：（空文字）

ファイル全体の空白を可視化

空白文字の表示設定

{
    // 空白文字を常に表示
    "editor.renderWhitespace": "all",
    
    // 選択時のみ表示
    "editor.renderWhitespace": "selection",
    
    // 行末の空白のみ表示
    "editor.renderWhitespace": "trailing"
}

制御文字の表示

{
    // 制御文字を表示（タブ、改行など）
    "editor.renderControlCharacters": true,
    
    // 不可視文字を表示
    "editor.renderLineHighlight": "all"
}

拡張機能を使った高度な空白管理

推奨拡張機能

Trailing Spaces

行末空白をハイライト表示
ワンクリックで削除可能
カスタマイズ可能な表示設定

Whitespace+

より詳細な空白文字の管理
全角スペースの検出
ファイル保存時の自動処理

Auto Close Tag

HTMLでのタグ自動補完
インデントの自動調整
空白の適切な処理

プロジェクト全体での空白管理

.editorconfigファイルの活用

プロジェクト全体で空白処理を統一するには、.editorconfigファイルを使用します：

# .editorconfig

root = true

[*]
# 文字コード
charset = utf-8
# 改行コード
end_of_line = lf
# ファイル末尾に改行を挿入
insert_final_newline = true
# 行末空白を削除
trim_trailing_whitespace = true

[*.{js,ts,json}]
# インデント設定
indent_style = space
indent_size = 2

[*.{py,pyi}]
indent_style = space
indent_size = 4

[*.md]
# Markdownでは行末空白を保持
trim_trailing_whitespace = false

ESLint/Prettierとの連携

ESLint設定例

{
    "rules": {
        "no-trailing-spaces": "error",
        "eol-last": "error",
        "no-multiple-empty-lines": ["error", { "max": 2, "maxEOF": 1 }]
    }
}

Prettier設定例

{
    "printWidth": 80,
    "tabWidth": 2,
    "useTabs": false,
    "semi": true,
    "singleQuote": true,
    "trailingComma": "es5",
    "endOfLine": "lf"
}

Git設定での空白管理

.gitattributes設定

# すべてのテキストファイルで改行コードを統一
* text=auto

# 特定のファイルタイプの設定
*.js text eol=lf
*.ts text eol=lf
*.json text eol=lf
*.md text eol=lf
*.py text eol=lf

Gitフックでの自動チェック

pre-commit hook例

#!/bin/sh
# .git/hooks/pre-commit

# 行末空白をチェック
if git rev-parse --verify HEAD >/dev/null 2>&1
then
    against=HEAD
else
    # 初回コミットの場合
    against=4b825dc642cb6eb9a060e54bf8d69288fbee4904
fi

# 行末空白があるファイルをチェック
exec git diff-index --check --cached $against --

トラブルシューティング

よくある問題と解決方法

設定が反映されない場合

問題：保存時に空白が削除されない

確認点

settings.jsonの記述が正しいか確認
ワークスペース設定が優先されていないか確認
拡張機能の干渉がないか確認

解決方法

// ユーザー設定とワークスペース設定を確認
// コマンドパレット → "Preferences: Open Settings (JSON)"
{
    "files.trimTrailingWhitespace": true
}

特定のファイルで動作しない場合

問題：Markdownファイルで空白が削除されてしまう

解決方法

{
    // グローバル設定
    "files.trimTrailingWhitespace": true,
    
    // Markdownファイルのみ無効化
    "[markdown]": {
        "files.trimTrailingWhitespace": false
    }
}

パフォーマンスの問題

問題：大きなファイルで処理が遅い

最適化設定

{
    // 大きなファイルでの最適化
    "editor.largeFileOptimizations": true,
    
    // ファイルサイズの閾値
    "files.maxMemoryForLargeFilesMB": 4096,
    
    // 差分表示の最適化
    "diffEditor.maxComputationTime": 5000
}

デバッグとログの確認

VS Codeの動作ログ

# VS Codeを詳細ログモードで起動
code --log debug

# ログファイルの場所
# Windows: %APPDATA%\Code\logs
# macOS: ~/Library/Application Support/Code/logs
# Linux: ~/.config/Code/logs

設定の確認コマンド

// 開発者ツールのコンソールで実行
// Ctrl+Shift+I → Console タブ

// 現在の設定値を確認
console.log(vscode.workspace.getConfiguration('files').get('trimTrailingWhitespace'));

// すべての設定を確認
console.log(vscode.workspace.getConfiguration('files'));

自動化とワークフロー最適化

タスク自動化の設定

VS Codeタスクでの自動化

.vscode/tasks.jsonでの設定例：

{
    "version": "2.0.0",
    "tasks": [
        {
            "label": "Clean Whitespace",
            "type": "shell",
            "command": "find",
            "args": [
                ".",
                "-name",
                "*.js",
                "-o",
                "-name",
                "*.ts",
                "-o",
                "-name",
                "*.py",
                "|",
                "xargs",
                "sed",
                "-i",
                "'s/[[:space:]]*$//'"
            ],
            "group": "build",
            "presentation": {
                "echo": true,
                "reveal": "always",
                "focus": false,
                "panel": "shared"
            }
        }
    ]
}

npm scriptsとの連携

{
    "scripts": {
        "clean:whitespace": "prettier --write '**/*.{js,ts,json,md}'",
        "lint:whitespace": "eslint --fix '**/*.{js,ts}'"
    }
}

CI/CDでの空白チェック

GitHub Actionsでの例

name: Code Quality Check
on: [push, pull_request]

jobs:
  whitespace-check:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      
      - name: Check for trailing whitespace
        run: |
          if git grep -l '[[:space:]]$' -- '*.js' '*.ts' '*.py'; then
            echo "Trailing whitespace found!"
            exit 1
          fi
      
      - name: Check for final newline
        run: |
          for file in $(find . -name "*.js" -o -name "*.ts" -o -name "*.py"); do
            if [ "$(tail -c1 "$file")" != "" ]; then
              echo "Missing final newline in $file"
              exit 1
            fi
          done

チーム開発での運用

コーディング規約の統一

プロジェクト推奨設定

{
    // .vscode/settings.json （プロジェクト共通設定）
    "files.trimTrailingWhitespace": true,
    "files.insertFinalNewline": true,
    "files.trimFinalNewlines": true,
    
    "editor.formatOnSave": true,
    "editor.codeActionsOnSave": {
        "source.fixAll": true
    },
    
    // 言語別設定
    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[python]": {
        "editor.defaultFormatter": "ms-python.black-formatter"
    }
}

チーム向けドキュメント

# 空白管理ガイドライン

## 必須設定
- 保存時の行末空白削除を有効化
- ファイル末尾改行の自動挿入
- 言語別フォーマッターの使用

## 推奨ツール
- VS Code拡張機能：Prettier, ESLint
- Git hooks：pre-commit
- CI/CD：コード品質チェック

## 禁止事項
- 全角スペースの使用
- タブとスペースの混在
- 意図しない行末空白の追加

まとめ

VS Codeでの空白管理について、基本から応用まで詳しく解説しました。重要なポイントをまとめると：

基本的な空白削除

手動削除

Ctrl + Shift + P → 「Trim Trailing Whitespace」
キーボードショートカットの設定で効率化
選択範囲や特定行のみの削除も可能

自動削除

files.trimTrailingWhitespace: trueで保存時自動削除
files.insertFinalNewline: trueでファイル末尾改行の自動追加
言語別の細かい設定でより柔軟な制御

高度な管理テクニック

正規表現活用

複雑な空白パターンの検索・置換
全角スペースや制御文字の処理
連続空行の統一化

プロジェクト全体管理

.editorconfigでチーム統一
ESLint/Prettierとの連携
Git設定での改行コード統一