「コードのインデントがぐちゃぐちゃで読みにくい」「コピペしたらタブとスペースが混ざって崩れた」そんな経験ありませんか？
Visual Studio Code（VS Code）なら、一括でインデントを整形したり、保存時に自動でキレイにしてくれる便利な機能 があります。
この記事では、VS Codeでインデントを一括整形する方法と、さらに自動でインデントを整える設定 を初心者向けにわかりやすく紹介します。これらの機能を使えば、見た目がバラバラだったコードが一瞬で美しく整理されます。
なぜインデントの統一が重要なのか
コードの可読性向上
統一されたインデント
- コードの階層構造が一目でわかる
- if文やfor文の範囲が明確
- チーム開発での読みやすさが向上
バラバラなインデント
- どこからどこまでが一つのブロックか分からない
- コードレビューで指摘事項になりやすい
- バグの原因になることもある
実際の例
整形前（読みにくい）
def calculate_total(items):
total = 0
for item in items:
if item['price'] > 0:
total += item['price']
if item['discount']:
total *= 0.9
return total
整形後（読みやすい）
def calculate_total(items):
total = 0
for item in items:
if item['price'] > 0:
total += item['price']
if item['discount']:
total *= 0.9
return total
プログラミング言語別の重要性
Python
- インデントが文法の一部
- 間違うとエラーになる
JavaScript
- 可読性に大きく影響
- ES6以降では特に重要
HTML/CSS
- 入れ子構造の理解に必須
- メンテナンス性が向上
VS Codeでインデントを一括整形する基本方法
ドキュメント全体の整形
ショートカットキーによる整形
最も基本的で効率的な方法です。
Windows / Linux
Shift + Alt + F
macOS
Shift + Option + F
このショートカットを押すと、現在開いているファイル全体が一括で整形され、インデントがキレイに揃います。
実際の使用例
整形前（JavaScript）
function processData(data){
if(data.length>0){
for(let i=0;i<data.length;i++){
console.log(data[i]);
if(data[i].status==='active'){
processItem(data[i]);
}
}
}
}
Shift + Alt + F を実行すると：
整形後
function processData(data) {
if (data.length > 0) {
for (let i = 0; i < data.length; i++) {
console.log(data[i]);
if (data[i].status === 'active') {
processItem(data[i]);
}
}
}
}
右クリックメニューからの整形
マウス操作を好む方向けの方法です。
手順
- エディタ内で右クリック
- 「ドキュメントのフォーマット」を選択
- 整形が実行される
コマンドパレットからの整形
手順
Ctrl + Shift + P（Mac:Cmd + Shift + P）でコマンドパレットを開く- 「Format Document」と入力
- Enterキーで実行
選択範囲のみの整形
ファイル全体ではなく、特定の部分だけを整形したい場合：
手順
- 整形したい範囲を選択
Ctrl + K, Ctrl + F（Mac:Cmd + K, Cmd + F）を実行- または右クリック → 「選択範囲のフォーマット」
実用例
<!-- 選択した部分のみ整形 -->
<div class="container">
<h1>タイトル</h1>
<p>段落テキスト</p>
</div>
上記のdiv内部のみを選択して整形すれば、その部分だけがキレイに整列されます。
保存時に自動でインデントを整える設定
基本設定：formatOnSave
settings.json での設定
最も確実な方法は、設定ファイルに直接記述することです。
Ctrl + ,（Mac:Cmd + ,）で設定画面を開く- 右上の「設定（JSON）を開く」アイコンをクリック
- 以下を追加：
{
"editor.formatOnSave": true
}
GUI での設定
Ctrl + ,で設定画面を開く- 検索バーに「format on save」と入力
- 「Editor: Format On Save」にチェックを入れる
言語別の設定
特定の言語でのみ自動整形を有効にしたい場合：
{
"[javascript]": {
"editor.formatOnSave": true
},
"[python]": {
"editor.formatOnSave": true
},
"[html]": {
"editor.formatOnSave": false
}
}
ワークスペース固有の設定
プロジェクトごとに異なる設定を適用：
.vscode/settings.json の作成
プロジェクトフォルダ内に .vscode フォルダを作成し、その中に settings.json を配置：
{
"editor.formatOnSave": true,
"editor.tabSize": 2,
"editor.insertSpaces": true
}
この設定は、そのプロジェクトでのみ有効になります。
インデント設定の詳細カスタマイズ
タブとスペースの設定
基本設定
{
"editor.tabSize": 4, // タブ幅を4に設定
"editor.insertSpaces": true, // タブキーでスペースを挿入
"editor.detectIndentation": false // 自動検出を無効化
}
設定項目の詳細
| 設定 | 説明 | 推奨値 |
|---|---|---|
tabSize | タブの幅（スペース数） | 2または4 |
insertSpaces | タブキーでスペースを挿入 | true |
detectIndentation | ファイルごとの自動検出 | false |
言語別のインデント設定
JavaScript/TypeScript
{
"[javascript]": {
"editor.tabSize": 2,
"editor.insertSpaces": true
},
"[typescript]": {
"editor.tabSize": 2,
"editor.insertSpaces": true
}
}
Python
{
"[python]": {
"editor.tabSize": 4,
"editor.insertSpaces": true
}
}
HTML/CSS
{
"[html]": {
"editor.tabSize": 2,
"editor.insertSpaces": true
},
"[css]": {
"editor.tabSize": 2,
"editor.insertSpaces": true
}
}
EditorConfig との連携
.editorconfig ファイル
プロジェクトルートに .editorconfig ファイルを配置すると、VS Code が自動的に設定を読み込みます：
# EditorConfig is awesome: https://EditorConfig.org
root = true
[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
[*.py]
indent_size = 4
[*.md]
trim_trailing_whitespace = false
VS Code での EditorConfig サポート
- 「EditorConfig for VS Code」拡張機能をインストール
.editorconfigファイルが自動的に適用される- プロジェクト固有の設定が優先される
フォーマッタの設定と管理
デフォルトフォーマッタの設定
VS Code では言語ごとにフォーマッタを指定できます。
主要言語のフォーマッタ設定
{
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[python]": {
"editor.defaultFormatter": "ms-python.black-formatter"
},
"[html]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[css]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
}
}
Prettier の設定
インストールと基本設定
- Prettier 拡張機能をインストール
- プロジェクトルートに
.prettierrcを作成：
{
"semi": true,
"trailingComma": "es5",
"singleQuote": true,
"printWidth": 80,
"tabWidth": 2,
"useTabs": false
}
VS Code との連携設定
{
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"prettier.requireConfig": true
}
Black（Python）の設定
インストール
pip install black
VS Code 設定
{
"[python]": {
"editor.defaultFormatter": "ms-python.black-formatter",
"editor.formatOnSave": true
}
}
Black 設定ファイル（pyproject.toml）
[tool.black]
line-length = 88
target-version = ['py38']
include = '\.pyi?$'
高度な整形設定
条件付き整形
大きなファイルでの整形無効化
{
"editor.formatOnSave": true,
"editor.formatOnSaveMode": "modifications",
"files.maxMemoryForLargeFilesMB": 4096
}
特定のフォルダを除外
{
"files.exclude": {
"**/node_modules": true,
"**/dist": true
}
}
パフォーマンス最適化
タイムアウト設定
{
"editor.formatOnSaveTimeout": 5000,
"editor.codeActionsOnSaveTimeout": 3000
}
カスタムフォーマットルール
ESLint との連携
{
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"eslint.format.enable": true
}
よくあるトラブルと対処法
フォーマットが実行されない
原因1：フォーマッタが設定されていない
症状： Shift + Alt + F を押しても何も起こらない
対処法：
{
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
}
}
原因2：拡張機能がインストールされていない
確認方法：
- 拡張機能タブ（
Ctrl + Shift + X）を開く - 必要なフォーマッタ（Prettier、Black など）がインストール済みか確認
原因3：言語が正しく認識されていない
対処法： 右下のステータスバーで言語モードを確認し、必要に応じて変更
タブとスペースが混在する
問題の確認
VS Code で空白文字を表示：
Ctrl + Shift + Pでコマンドパレット- 「View: Toggle Render Whitespace」を実行
一括変換
タブをスペースに変換：
Ctrl + Shift + Pでコマンドパレット- 「Convert Indentation to Spaces」を実行
スペースをタブに変換：
Ctrl + Shift + Pでコマンドパレット- 「Convert Indentation to Tabs」を実行
保存時整形が重い
原因と対処法
大きなファイルでの整形：
{
"editor.formatOnSaveMode": "modifications"
}
変更部分のみを整形して高速化。
フォーマッタのタイムアウト調整：
{
"editor.formatOnSaveTimeout": 10000
}
特定のファイルで整形したくない
ファイル単位での無効化
ファイルの先頭にコメントを追加：
/* prettier-ignore-file */
# fmt: off
フォルダ単位での除外
.prettierignore ファイルを作成：
node_modules/
dist/
build/
*.min.js
実用的な設定例
フロントエンド開発者向け設定
{
"editor.formatOnSave": true,
"editor.tabSize": 2,
"editor.insertSpaces": true,
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[html]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[css]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[scss]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[json]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
}
}
Python 開発者向け設定
{
"editor.formatOnSave": true,
"[python]": {
"editor.tabSize": 4,
"editor.insertSpaces": true,
"editor.defaultFormatter": "ms-python.black-formatter"
},
"python.formatting.provider": "black",
"python.linting.enabled": true,
"python.linting.pylintEnabled": true
}
チーム開発向け設定
{
"editor.formatOnSave": true,
"editor.detectIndentation": false,
"editor.insertSpaces": true,
"editor.tabSize": 2,
"files.trimTrailingWhitespace": true,
"files.insertFinalNewline": true,
"files.trimFinalNewlines": true
}
まとめ
VS Codeでインデントを一括で揃える方法は、効率的なコード編集の基本です。重要なポイントをまとめると：
基本の整形方法
- ショートカット：
Shift + Alt + F（Mac:Shift + Option + F）でドキュメント全体を整形 - 部分整形：選択範囲のみを
Ctrl + K, Ctrl + Fで整形 - 右クリック：「ドキュメントのフォーマット」でマウス操作
自動整形の設定
- 保存時整形：
"editor.formatOnSave": trueで保存時に自動実行 - 言語別設定：言語ごとに異なるフォーマッタと設定を適用
- プロジェクト設定：
.vscode/settings.jsonでプロジェクト固有の設定
インデント統一
- タブ設定：
tabSizeとinsertSpacesでスペース幅を統一 - EditorConfig：チーム全体で設定を共有
- フォーマッタ設定：Prettier、Black などの専用ツールを活用
トラブル対策
- フォーマッタの設定確認
- 拡張機能のインストール状況確認
- タブとスペースの混在解消
コメント