VS Codeでインデントを設定する方法｜タブ幅・スペース切り替えをわかりやすく解説

「VS Codeでコードを書いていて、タブ幅を2にしたい」「タブではなくスペースを使いたいけど、設定方法が分からない」「プロジェクトごとに異なるインデント規則を適用したい」

プログラミングをしていると、このような要望は日常的に出てきます。特にチーム開発では、メンバー全員が同じインデント規則を使うことが、コードの品質と保守性を保つために重要です。

VS Codeは非常に柔軟で、インデントを好みやプロジェクト規約に合わせて簡単に設定できる豊富な機能を提供しています。個人の好みから企業の開発規約まで、あらゆるニーズに対応可能です。

この記事では、VS Codeのインデント設定を初心者にも分かりやすく、包括的に解説します。基本設定から応用的な活用方法まで、実際の設定例とともに紹介していきます。

インデントの基本概念
VS Codeのインデント基本設定
settings.jsonによる設定方法
言語別のインデント設定
GUIからの設定方法
プロジェクト固有の設定
EditorConfigとの連携
既存コードのインデント変換
トラブルシューティング
1. よくある問題と解決方法
2. デバッグ方法
チーム開発でのベストプラクティス
1. 設定の統一方法
2. Git設定との連携
高度な設定とカスタマイズ
1. 条件付き設定
2. マルチルートワークスペースでの設定
まとめ

インデントの基本概念

インデントとは

インデント（indent）とは、コードの階層構造を視覚的に表現するための「字下げ」のことです。適切なインデントにより、コードの構造が一目で理解でき、バグの発見や保守が容易になります。

// インデントなし（読みにくい）
function example() {
if (condition) {
console.log("hello");
if (anotherCondition) {
console.log("world");
}
}
}

// 適切なインデント（読みやすい）
function example() {
  if (condition) {
    console.log("hello");
    if (anotherCondition) {
      console.log("world");
    }
  }
}

タブ文字とスペース文字の違い

インデントには主に2つの方法があります：

タブ文字を使用

1つのタブ文字でインデントを表現
エディタの設定によって表示幅が変わる
ファイルサイズが小さくなる

スペース文字を使用

複数のスペース文字でインデントを表現
どの環境でも同じ見た目
より細かい制御が可能

なぜインデント設定が重要なのか

統一されたインデント設定により：

可読性の向上: コードの構造が分かりやすくなる
チーム開発の効率化: 全員が同じ見た目でコードを確認
バージョン管理の安定: 差分比較が正確に行える
保守性の向上: 新しいメンバーもコードを理解しやすい

VS Codeのインデント基本設定

重要な設定項目

VS Codeでは、以下の2つの設定項目でインデントを制御します：

設定項目	説明	デフォルト値
`editor.tabSize`	1つのタブを何スペース分で表示するか	4
`editor.insertSpaces`	タブキーを押したときにスペース文字に変換するか	true

基本的な設定例

2スペースインデントに設定

Web開発でよく使われる設定です：

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

4スペースインデントに設定

Python開発などでよく使われる設定です：

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

タブ文字を使用する設定

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

設定の確認方法

現在の設定を確認するには、VS Code右下のステータスバーを見てください。「スペース: 2」や「タブサイズ: 4」などの表示で、現在の設定を確認できます。

settings.jsonによる設定方法

settings.jsonとは

settings.jsonは、VS Codeの設定をJSON形式で記述するファイルです。GUI設定よりも詳細で柔軟な設定が可能です。

settings.jsonの開き方

ユーザー設定（グローバル設定）

Ctrl + Shift + P（Mac: Cmd + Shift + P）でコマンドパレットを開く
「Open Settings (JSON)」と入力・選択
ユーザー設定のsettings.jsonが開く

ワークスペース設定（プロジェクト設定）

プロジェクトフォルダに.vscodeフォルダを作成
その中にsettings.jsonファイルを作成
プロジェクト固有の設定を記述

基本的な記述例

シンプルな設定

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

より詳細な設定

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

設定項目の詳細説明

editor.detectIndentation

{
  "editor.detectIndentation": false
}

true: ファイルを開く際に自動でインデント設定を検出
false: 常に設定したインデント設定を使用（推奨）

editor.renderWhitespace

{
  "editor.renderWhitespace": "boundary"
}

"none": 空白文字を表示しない
"boundary": 単語の境界の空白のみ表示
"all": すべての空白文字を表示

言語別のインデント設定

言語別設定の必要性

プログラミング言語によって、推奨されるインデント設定が異なります：

JavaScript/TypeScript: 2スペースが一般的
Python: 4スペースが標準（PEP 8）
Go: タブ文字が標準
HTML/CSS: 2スペースが一般的

言語別設定の記述方法

基本的な構文

{
  "[言語ID]": {
    "設定項目": "値"
  }
}

Python専用設定

{
  "[python]": {
    "editor.tabSize": 4,
    "editor.insertSpaces": true
  }
}

JavaScript/TypeScript専用設定

{
  "[javascript]": {
    "editor.tabSize": 2,
    "editor.insertSpaces": true
  },
  "[typescript]": {
    "editor.tabSize": 2,
    "editor.insertSpaces": true
  }
}

複数言語をまとめて設定

{
  "[javascript][typescript][json][html][css]": {
    "editor.tabSize": 2,
    "editor.insertSpaces": true
  }
}

主要言語の推奨設定例

Web開発全般

{
  "[html][css][scss][json][yaml]": {
    "editor.tabSize": 2,
    "editor.insertSpaces": true
  },
  "[javascript][typescript][jsx][tsx]": {
    "editor.tabSize": 2,
    "editor.insertSpaces": true
  }
}

Python開発

{
  "[python]": {
    "editor.tabSize": 4,
    "editor.insertSpaces": true,
    "editor.detectIndentation": false
  }
}

Go開発

{
  "[go]": {
    "editor.tabSize": 4,
    "editor.insertSpaces": false
  }
}

言語IDの確認方法

設定したい言語のIDが分からない場合：

対象ファイルをVS Codeで開く
Ctrl + Shift + Pでコマンドパレットを開く
「Configure Language Specific Settings」を実行
表示される一覧から言語を選択すると、言語IDが確認できる

GUIからの設定方法

設定画面へのアクセス

JSONファイルを直接編集するのが不安な場合は、GUI（グラフィカルユーザーインターフェース）から設定することも可能です。

設定画面を開く方法

Ctrl + ,（Mac: Cmd + ,）で設定画面を開く
メニューバーから「ファイル」→「ユーザー設定」→「設定」を選択
歯車アイコンから「設定」を選択

インデント関連設定の検索と変更

タブサイズの設定

設定画面の検索ボックスに「tab size」と入力
「Editor: Tab Size」の数値を変更
変更は自動的に保存される

スペース挿入の設定

設定画面の検索ボックスに「insert spaces」と入力
「Editor: Insert Spaces」のチェックボックスを操作
チェックあり: スペース文字を使用
チェックなし: タブ文字を使用

インデント検出の設定

設定画面の検索ボックスに「detect indentation」と入力
「Editor: Detect Indentation」のチェックボックスを操作
チェックなし: 常に設定したインデントを使用（推奨）

ステータスバーからの直接変更

VS Code画面右下のステータスバーから、現在のファイルのインデント設定を直接変更できます：

ステータスバーの「スペース: 2」や「タブサイズ: 4」をクリック
表示されるメニューから希望の設定を選択
「タブからスペースに変換」なども選択可能

プロジェクト固有の設定

ワークスペース設定の重要性

チーム開発や複数のプロジェクトを扱う場合、プロジェクトごとに異なるインデント設定が必要になることがあります。ワークスペース設定を使用することで、プロジェクト固有の設定を適用できます。

.vscode/settings.jsonの作成

手順

プロジェクトのルートディレクトリに.vscodeフォルダを作成
その中にsettings.jsonファイルを作成
プロジェクト固有の設定を記述

ディレクトリ構造例

my-project/
├── .vscode/
│   └── settings.json
├── src/
│   └── index.js
└── package.json

プロジェクト設定の例

Web開発プロジェクト

{
  "editor.tabSize": 2,
  "editor.insertSpaces": true,
  "editor.detectIndentation": false,
  "[javascript]": {
    "editor.tabSize": 2,
    "editor.insertSpaces": true
  },
  "[typescript]": {
    "editor.tabSize": 2,
    "editor.insertSpaces": true
  },
  "[html]": {
    "editor.tabSize": 2,
    "editor.insertSpaces": true
  },
  "[css]": {
    "editor.tabSize": 2,
    "editor.insertSpaces": true
  }
}

Python開発プロジェクト

{
  "editor.tabSize": 4,
  "editor.insertSpaces": true,
  "editor.detectIndentation": false,
  "[python]": {
    "editor.tabSize": 4,
    "editor.insertSpaces": true
  }
}

設定の優先順位

VS Codeでは、設定の優先順位が以下のように決まっています：

ワークスペース設定（最優先）
ユーザー設定
デフォルト設定

つまり、ワークスペース設定があれば、それがユーザー設定を上書きします。

EditorConfigとの連携

EditorConfigとは

EditorConfigは、異なるエディタやIDE間でコーディングスタイルを統一するためのファイル形式です。VS CodeもEditorConfigに対応しており、プロジェクト全体でより強力な設定統一が可能です。

EditorConfig拡張機能のインストール

VS Codeの拡張機能タブを開く
「EditorConfig for VS Code」を検索・インストール
EditorConfigファイルが自動的に認識されるようになる

.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

[*.{yml,yaml}]
indent_style = space
indent_size = 2

VS Code設定との関係

EditorConfigファイルがあると、VS Codeの設定よりもEditorConfigが優先されます。チーム開発では、EditorConfigでプロジェクト全体の設定を統一し、個人設定は各自のユーザー設定で調整することが推奨されます。

既存コードのインデント変換

スペースからタブへの変換

既存のファイルでインデント方式を変更したい場合：

Ctrl + Shift + Pでコマンドパレットを開く
「Convert Indentation to Tabs」を実行
ファイル全体のスペースインデントがタブに変換される

タブからスペースへの変換

Ctrl + Shift + Pでコマンドパレットを開く
「Convert Indentation to Spaces」を実行
ファイル全体のタブインデントがスペースに変換される

インデント幅の一括変更

ステータスバーのインデント表示をクリック
「タブからスペースに変換」または「スペースからタブに変換」を選択
必要に応じて新しいタブサイズを指定

トラブルシューティング

よくある問題と解決方法

インデント設定が反映されない

原因と対策：

自動検出が有効になっている { "editor.detectIndentation": false }
ワークスペース設定とユーザー設定の競合
- 設定の優先順位を確認
- ワークスペース設定を確認
EditorConfigの影響
- プロジェクトに.editorconfigファイルがないか確認
- EditorConfig拡張機能の設定を確認

混在するインデント形式

症状: 同じファイル内でタブとスペースが混在している

解決方法:

Ctrl + Shift + Pでコマンドパレットを開く
「Convert Indentation to Spaces」または「Convert Indentation to Tabs」を実行
統一したいインデント形式に変換

保存時にインデントが変わってしまう

原因: フォーマッター拡張機能の影響

解決方法:

{
  "editor.formatOnSave": true,
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

適切なフォーマッターを設定し、そのフォーマッターの設定でインデントを統一する。

デバッグ方法

問題が解決しない場合の調査手順：

現在の設定確認
- Ctrl + Shift + P → 「Open Settings (JSON)」
- ユーザー設定とワークスペース設定の両方を確認
ファイル固有の設定確認
- ステータスバーのインデント表示を確認
- 言語モードが正しく認識されているか確認
拡張機能の影響確認
- EditorConfig拡張機能の有効/無効を切り替え
- フォーマッター拡張機能の設定を確認

チーム開発でのベストプラクティス

設定の統一方法

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

// .vscode/settings.json
{
  "editor.tabSize": 2,
  "editor.insertSpaces": true,
  "editor.detectIndentation": false,
  "editor.formatOnSave": true,
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

推奨拡張機能の指定

// .vscode/extensions.json
{
  "recommendations": [
    "editorconfig.editorconfig",
    "esbenp.prettier-vscode"
  ]
}

READMEでの設定説明

## 開発環境設定

### インデント規約
- JavaScript/TypeScript: 2スペース
- Python: 4スペース
- すべてのファイル: スペース文字を使用（タブ文字禁止）

### 必要な拡張機能
- EditorConfig for VS Code
- Prettier - Code formatter

Git設定との連携

Git属性ファイル（.gitattributes）でも改行コードなどを統一：

* text=auto eol=lf
*.js text eol=lf
*.ts text eol=lf
*.json text eol=lf

高度な設定とカスタマイズ

条件付き設定

特定の条件下でのみ設定を適用する方法：

ファイル名パターンによる設定

{
  "files.associations": {
    "*.config.js": "javascript"
  },
  "[javascript]": {
    "editor.tabSize": 2
  }
}

フォルダ別の設定

{
  "[javascript]": {
    "editor.tabSize": 2
  },
  "[typescript]": {
    "editor.tabSize": 4
  }
}

マルチルートワークスペースでの設定

複数のプロジェクトを含むワークスペースでの設定管理：

// workspace.code-workspace
{
  "folders": [
    {
      "name": "frontend",
      "path": "./frontend"
    },
    {
      "name": "backend", 
      "path": "./backend"
    }
  ],
  "settings": {
    "editor.tabSize": 2,
    "editor.insertSpaces": true
  }
}