「VS Codeでコードを書いていて、インデントがぐちゃぐちゃになって見づらい」
「チームメンバーによって、スペースやタブの幅がバラバラで統一感がない」
プログラミングをしていると、必ずぶつかるのがコードの見た目の問題です。特にインデント（字下げ）がそろっていないコードは、読みにくく、バグの原因にもなりがちです。
VS Codeなら、ショートカット一つや簡単な設定で、コードのインデントを自動整形できます。この機能を使えば、どんなにぐちゃぐちゃなコードでも、瞬時にきれいで読みやすいコードに変身させることができます。
この記事では、VS Codeでインデントをきれいに整える方法から、保存時に自動で整形する設定まで、初心者にも分かりやすく解説します。
インデント整形の基本知識
インデントとは
インデントとは、コードの階層構造を視覚的に分かりやすくするための「字下げ」のことです。適切なインデントがあることで、どのコードがどの処理に属しているかが一目で分かります。
// インデントが整っていないコード（読みにくい）
function example() {
if (true) {
console.log("hello");
if (false) {
console.log("world");
}
}
}
// インデントが整ったコード（読みやすい）
function example() {
if (true) {
console.log("hello");
if (false) {
console.log("world");
}
}
}
インデントの種類
主に2種類のインデント方法があります：
スペースインデント
スペース文字を使用してインデントを作る方法です。一般的に2スペースまたは4スペースが使われます。
タブインデント
タブ文字を使用してインデントを作る方法です。エディタの設定によって表示幅が変わります。
チーム開発でのインデント統一の重要性
チーム開発では、メンバー全員が同じインデントルールを使うことが重要です。統一されていないと：
- コードレビューが困難になる
- ファイルの差分比較が正しく行えない
- 可読性が大幅に低下する
- 保守性が悪くなる
ショートカットで一発整形
基本の整形ショートカット
VS Codeでは、簡単なショートカットでコード全体のインデントを一瞬で整えることができます：
Windows/Linux
Shift + Alt + F
Mac
Shift + Option + F
整形の動作原理
このショートカットを実行すると、VS Codeは現在開いているファイルの言語を認識し、その言語のフォーマットルールに従ってコードを自動整形します。
整形される内容
- インデントの統一
- 不要な空白の削除
- 括弧の位置調整
- 改行の統一
選択範囲だけを整形
コード全体ではなく、特定の部分だけを整形したい場合：
- 整形したい範囲をマウスで選択
- 右クリックメニューから「ドキュメントの選択範囲をフォーマット」を選択
- または、選択した状態で
Shift + Alt + F
コマンドパレットからの実行
ショートカットを覚えていない場合は、コマンドパレットからも実行できます：
Ctrl + Shift + P（Mac:Cmd + Shift + P）でコマンドパレットを開く- 「Format Document」と入力
- 該当するコマンドを選択
保存時に自動で整形する設定
settings.jsonによる設定
毎回ショートカットを押すのが面倒な場合は、ファイルを保存するたびに自動で整形する設定にできます。
設定手順
Ctrl + Shift + P（Mac:Cmd + Shift + P）でコマンドパレットを開く- 「Open Settings (JSON)」と入力・選択
- 以下の設定を追加：
{
"editor.formatOnSave": true
}
設定の効果
この設定により、Ctrl + S（Mac: Cmd + S）でファイルを保存するだけで、自動的にコードが整形されます。
GUIからの設定方法
settings.jsonを直接編集するのが不安な場合は、GUI（設定画面）からも設定できます：
Ctrl + ,（Mac:Cmd + ,）で設定画面を開く- 検索ボックスに「format on save」と入力
- 「Editor: Format On Save」にチェックを入れる
他の便利な自動保存設定
自動保存機能
{
"files.autoSave": "afterDelay",
"files.autoSaveDelay": 1000
}
保存時の末尾空白削除
{
"files.trimTrailingWhitespace": true
}
保存時の最終行追加
{
"files.insertFinalNewline": true
}
インデント幅（タブサイズ）の設定
基本的なタブサイズ設定
プロジェクトやチームの規約に合わせて、インデント幅を変更できます：
2スペースに統一
{
"editor.tabSize": 2
}
4スペースに統一
{
"editor.tabSize": 4
}
スペースとタブの選択
インデントにスペース文字を使うか、タブ文字を使うかも設定できます：
スペースを使用（推奨）
{
"editor.insertSpaces": true,
"editor.tabSize": 2
}
タブを使用
{
"editor.insertSpaces": false,
"editor.tabSize": 4
}
言語別のインデント設定
プログラミング言語によって、推奨されるインデント幅が異なります。言語ごとに個別設定することで、より柔軟なコーディング環境を構築できます：
Python（4スペースが標準）
{
"[python]": {
"editor.tabSize": 4,
"editor.insertSpaces": true
}
}
JavaScript/TypeScript（2スペースが一般的）
{
"[javascript]": {
"editor.tabSize": 2,
"editor.insertSpaces": true
},
"[typescript]": {
"editor.tabSize": 2,
"editor.insertSpaces": true
}
}
HTML/CSS
{
"[html]": {
"editor.tabSize": 2,
"editor.insertSpaces": true
},
"[css]": {
"editor.tabSize": 2,
"editor.insertSpaces": true
}
}
複数の言語をまとめて設定
{
"[javascript][typescript][json][html][css]": {
"editor.tabSize": 2,
"editor.insertSpaces": true,
"editor.formatOnSave": true
}
}
Prettierによる高度な整形
Prettierとは
Prettierは、JavaScriptやTypeScript、HTML、CSSなどの多くの言語に対応した、非常に人気の高いコードフォーマッターです。VS Codeの標準フォーマッターよりも高機能で、チーム開発での統一に適しています。
Prettier拡張機能のインストール
- VS Codeの拡張機能タブを開く
- 「Prettier – Code formatter」を検索
- 「esbenp.prettier-vscode」をインストール
Prettierをデフォルトフォーマッターに設定
{
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true
}
Prettierの設定例
より詳細な設定をしたい場合は、プロジェクトルートに.prettierrcファイルを作成：
{
"semi": true,
"trailingComma": "es5",
"singleQuote": true,
"printWidth": 80,
"tabWidth": 2,
"useTabs": false
}
言語別のフォーマッター指定
特定の言語にのみPrettierを使用したい場合：
{
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[python]": {
"editor.defaultFormatter": "ms-python.black-formatter"
}
}
トラブルシューティング
よくある問題と解決方法
フォーマットが実行されない
原因と対処法：
- フォーマッター拡張が未インストール
- 対象言語のフォーマッター拡張をインストール
- デフォルトフォーマッターが未設定
- settings.jsonで
editor.defaultFormatterを指定
- settings.jsonで
- ファイル形式が認識されていない
- ファイル拡張子を確認、または言語モードを手動設定
インデントが期待通りにならない
確認ポイント：
- タブサイズ設定
{ "editor.tabSize": 2, "editor.insertSpaces": true} - 言語別設定の競合
- ワークスペース設定とユーザー設定の確認
- EditorConfigファイルの存在
- プロジェクトにEditorConfigがある場合、そちらが優先される
保存時フォーマットが動作しない
チェック項目：
- 設定の確認
{ "editor.formatOnSave": true} - ファイルの変更検知
- ファイルが実際に変更されているか確認
- 拡張機能の競合
- 他のフォーマッター拡張との競合を確認
デバッグ方法
問題が解決しない場合の調査手順：
- 出力パネルの確認
表示→出力→ 「Prettier」や言語名を選択
- 開発者ツールでログ確認
ヘルプ→開発者ツールの切り替え
- 設定の確認
- コマンドパレットで「Open Settings (JSON)」
高度な設定とカスタマイズ
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
[*.{yml,yaml}]
indent_style = space
indent_size = 2
ESLintとの連携
JavaScript/TypeScriptプロジェクトでは、ESLintと組み合わせることで、より強力なコード品質管理が可能です：
{
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"editor.formatOnSave": true,
"eslint.format.enable": true
}
Gitフックとの連携
コミット前に自動でフォーマットを実行する設定も可能です。これにより、チーム全体でコードスタイルを強制的に統一できます。
チーム開発でのベストプラクティス
設定ファイルの共有
チーム開発では、プロジェクトレベルでの設定統一が重要です：
.vscode/settings.jsonの作成
{
"editor.formatOnSave": true,
"editor.tabSize": 2,
"editor.insertSpaces": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"[python]": {
"editor.tabSize": 4,
"editor.defaultFormatter": "ms-python.black-formatter"
}
}
推奨拡張機能の指定
.vscode/extensions.jsonで、チームメンバーに推奨する拡張機能を指定：
{
"recommendations": [
"esbenp.prettier-vscode",
"ms-python.black-formatter",
"editorconfig.editorconfig"
]
}
ドキュメント化
README.mdなどに、プロジェクトのフォーマット規則を明記：
## コーディング規約
### インデント
- JavaScript/TypeScript: 2スペース
- Python: 4スペース
- HTML/CSS: 2スペース
### フォーマッター
- JavaScript/TypeScript: Prettier
- Python: Black
まとめ
VS Codeでのインデント整形は、以下の方法で簡単に実現できます：
基本的な整形方法
- 手動整形:
Shift + Alt + F（Mac:Shift + Option + F） - 自動整形:
"editor.formatOnSave": true - インデント幅統一:
"editor.tabSize": 2
高度な設定
- 言語別設定で細かい制御
- Prettierによる統一的なフォーマット
- EditorConfigによるプロジェクト全体の設定統一
チーム開発での活用
- プロジェクト設定ファイルの共有
- 推奨拡張機能の指定
- コーディング規約の文書化
コメント