VS Codeでコードのインデントを自動整形する方法｜きれいにそろえて読みやすく！

プログラミング・IT

「VS Codeでコードを書いていて、インデントがぐちゃぐちゃになって見づらい」
「人によってスペースやタブの幅がバラバラ…」

こんな悩みはありませんか？

VS Codeなら、ショートカットや設定で簡単にインデントを自動整形できます。

この記事では、以下の内容について詳しく解説します：

  • ショートカットによる手動整形
  • 保存時の自動整形設定
  • インデント方式（スペース・タブ）の統一
  • 言語別の詳細設定
  • フォーマッタ（Prettier、ESLint）との連携
  • チーム開発での設定統一
  • トラブルシューティング

コードを見やすくして、開発効率を大幅にアップさせましょう！

スポンサーリンク

ショートカットによる手動整形

基本的な整形ショートカット

コード全体の整形

Shift + Alt + F (Windows/Linux)
Shift + Option + F (Mac)

効果

  • 現在開いているファイル全体を整形
  • インデントの修正
  • 空白やスペースの統一
  • 改行位置の最適化

選択範囲の整形

Ctrl + K, Ctrl + F (Windows/Linux)
Cmd + K, Cmd + F (Mac)

使い方

  1. 整形したい部分を選択
  2. ショートカットを実行
  3. 選択した範囲だけが整形される

その他の便利なショートカット

インデントの調整

Tab - インデントを深くする
Shift + Tab - インデントを浅くする
Ctrl + ] - 選択行のインデントを深くする
Ctrl + [ - 選択行のインデントを浅くする

行の移動と複製

Alt + ↑/↓ - 行を上下に移動
Shift + Alt + ↑/↓ - 行を複製
Ctrl + Shift + K - 行を削除

保存時の自動整形設定

基本的な自動整形

いちいちショートカットを押すのが面倒な場合は、保存するたびに自動でインデントを整える設定にできます。

settings.jsonでの設定

{
  "editor.formatOnSave": true
}

効果

  • Ctrl + S（Mac: Cmd + S）でファイル保存時に自動整形
  • 手動でのフォーマット実行が不要
  • 常に統一されたコードスタイル

GUIでの設定方法

  1. Ctrl + ,（Mac: Cmd + ,）で設定画面を開く
  2. 検索欄に「format on save」と入力
  3. 「Editor: Format On Save」にチェックを入れる

より詳細な自動整形設定

高度な自動整形オプション

{
  "editor.formatOnSave": true,
  "editor.formatOnPaste": true,
  "editor.formatOnType": true,
  "editor.codeActionsOnSave": {
    "source.organizeImports": true,
    "source.fixAll": true
  }
}

設定の意味

  • formatOnPaste – ペースト時に自動整形
  • formatOnType – 入力中に自動整形
  • organizeImports – import文の整理
  • fixAll – 修正可能な問題をすべて修正

インデント方式とサイズの設定

スペースとタブの選択

スペースを使用する設定

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

タブを使用する設定

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

インデント幅のカスタマイズ

よく使われる設定例

2スペース（JavaScript、React、Vueなど）

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

4スペース（Python、Java、C#など）

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

タブ文字（Go、Makefileなど）

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

言語別のインデント設定

詳細な言語別設定

{
  // グローバル設定
  "editor.tabSize": 4,
  "editor.insertSpaces": true,
  
  // 言語別設定
  "[javascript]": {
    "editor.tabSize": 2,
    "editor.insertSpaces": true
  },
  "[typescript]": {
    "editor.tabSize": 2,
    "editor.insertSpaces": true
  },
  "[python]": {
    "editor.tabSize": 4,
    "editor.insertSpaces": true
  },
  "[go]": {
    "editor.insertSpaces": false,
    "editor.tabSize": 4
  },
  "[html]": {
    "editor.tabSize": 2,
    "editor.insertSpaces": true
  },
  "[css]": {
    "editor.tabSize": 2,
    "editor.insertSpaces": true
  },
  "[json]": {
    "editor.tabSize": 2,
    "editor.insertSpaces": true
  },
  "[yaml]": {
    "editor.tabSize": 2,
    "editor.insertSpaces": true
  },
  "[markdown]": {
    "editor.tabSize": 2,
    "editor.insertSpaces": true,
    "editor.wordWrap": "on"
  }
}

フォーマッタとの連携

Prettier による統一

プロジェクトでJavaScript、TypeScript、HTML、CSSなどを扱う場合は、VS Code拡張「Prettier」が非常に便利です。

Prettierのインストールと設定

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": 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"
  }
}

.prettierrcファイルでの詳細設定

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

ESLint による統一

JavaScript/TypeScript プロジェクトでの設定

{
  "eslint.enable": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.workingDirectories": ["./"]
}

.eslintrcでのルール設定

{
  "rules": {
    "indent": ["error", 2],
    "no-tabs": "error",
    "quotes": ["error", "single"],
    "semi": ["error", "always"]
  }
}

言語固有のフォーマッタ

Python（Black + autopep8）

{
  "[python]": {
    "editor.defaultFormatter": "ms-python.black-formatter",
    "editor.formatOnSave": true,
    "editor.codeActionsOnSave": {
      "source.organizeImports": true
    }
  },
  "python.formatting.blackArgs": [
    "--line-length=88"
  ]
}

Go（gofmt）

{
  "[go]": {
    "editor.formatOnSave": true,
    "editor.codeActionsOnSave": {
      "source.organizeImports": true
    }
  }
}

Java（Google Java Format）

{
  "[java]": {
    "editor.defaultFormatter": "redhat.java",
    "editor.formatOnSave": true
  },
  "java.format.settings.url": "https://raw.githubusercontent.com/google/styleguides/gh-pages/eclipse-java-google-style.xml"
}

インデント変換の実用的な方法

スペースとタブの一括変換

スペースをタブに変換

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

タブをスペースに変換

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

複数ファイルの一括変換

Find and Replace での一括変換

  1. Ctrl + Shift + Hで検索・置換を開く
  2. 「フォルダ内を検索」を選択
  3. 正規表現を有効にして以下を実行：

4スペースを2スペースに変換

  • 検索: ^( ){2,}
  • 置換: （2スペース）

タブをスペースに変換

  • 検索: \t
  • 置換: （2スペース）

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

Indent Rainbow

インデントレベルを色分けして、構造を視覚的に確認できます。

{
  "indentRainbow.colors": [
    "rgba(255,255,64,0.07)",
    "rgba(127,255,127,0.07)",
    "rgba(255,127,255,0.07)",
    "rgba(79,236,236,0.07)"
  ]
}

Bracket Pair Colorizer

カッコの対応を色分けして、インデント構造を把握しやすくします。

{
  "bracket-pair-colorizer-2.colors": [
    "#ffd700",
    "#da70d6",
    "#87ceeb"
  ]
}

Auto Rename Tag

HTMLやXMLでタグをリネームする際、対応するタグも自動で変更されます。

Trailing Spaces

不要な末尾スペースをハイライト表示・自動削除します。

{
  "trailing-spaces.deleteModifiedLinesOnly": true,
  "trailing-spaces.includeEmptyLines": false
}

チーム開発での設定統一

.vscode/settings.jsonでの共有

プロジェクトルートに.vscode/settings.jsonを作成して、チーム全体で設定を統一できます。

{
  "editor.formatOnSave": true,
  "editor.tabSize": 2,
  "editor.insertSpaces": true,
  "editor.detectIndentation": false,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[python]": {
    "editor.defaultFormatter": "ms-python.black-formatter",
    "editor.tabSize": 4
  },
  "[go]": {
    "editor.insertSpaces": false
  }
}

EditorConfig による統一

.editorconfigファイルでエディタ共通の設定を管理：

root = true

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

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

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

[*.go]
indent_style = tab
indent_size = 4

[*.{html,css,scss,json,yml,yaml}]
indent_style = space
indent_size = 2

[Makefile]
indent_style = tab

Git Hooks での品質保証

コミット前に自動でフォーマットチェック：

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

# Prettierでフォーマットチェック
npx prettier --check "src/**/*.{js,ts,jsx,tsx}"

if [ $? -ne 0 ]; then
    echo "Code formatting issues found. Run 'npx prettier --write .' to fix."
    exit 1
fi

実用的な設定例

Webフロントエンド開発

React + TypeScript プロジェクト

{
  "editor.formatOnSave": true,
  "editor.tabSize": 2,
  "editor.insertSpaces": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "prettier.semi": true,
  "prettier.singleQuote": true,
  "prettier.trailingComma": "es5",
  "eslint.workingDirectories": ["./"]
}

Vue.js プロジェクト

{
  "editor.formatOnSave": true,
  "editor.tabSize": 2,
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "vetur.format.defaultFormatter.html": "prettier",
  "vetur.format.defaultFormatter.css": "prettier",
  "vetur.format.defaultFormatter.js": "prettier"
}

バックエンド開発

Python Django プロジェクト

{
  "[python]": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "ms-python.black-formatter",
    "editor.tabSize": 4,
    "editor.insertSpaces": true,
    "editor.codeActionsOnSave": {
      "source.organizeImports": true
    }
  },
  "python.linting.flake8Enabled": true,
  "python.linting.flake8Args": [
    "--max-line-length=88"
  ]
}

Node.js プロジェクト

{
  "editor.formatOnSave": true,
  "editor.tabSize": 2,
  "editor.insertSpaces": true,
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "eslint.workingDirectories": ["./"],
  "eslint.validate": [
    "javascript",
    "typescript"
  ]
}

トラブルシューティング

よくある問題と解決方法

フォーマットが効かない

原因1: フォーマッタが設定されていない

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

原因2: 拡張機能がインストールされていない

  • Prettierをインストールしているか確認
  • 拡張機能が有効になっているか確認

原因3: ファイル形式が認識されていない

  • 右下の言語モードを確認
  • 適切な拡張子が設定されているか確認

インデントが統一されない

detectIndentationを無効にする

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

既存のコードがバラバラ

プロジェクト全体を一括整形

  1. すべてのファイルを選択
  2. Ctrl + Shift + P → 「Format Document」
  3. または Find and Replace で一括変換

特定のファイルだけ整形されない

ファイル別の設定確認

{
  "editor.formatOnSave": true,
  "[markdown]": {
    "editor.formatOnSave": false  // Markdownは除外
  }
}

パフォーマンスの問題

大きなファイルでの整形

{
  "editor.largeFileOptimizations": true,
  "files.maxMemoryForLargeFilesMB": 4096
}

自動保存の設定

{
  "files.autoSave": "onFocusChange",
  "editor.formatOnSave": true
}

高度なカスタマイズ

カスタムキーバインド

独自のフォーマットショートカット

[
  {
    "key": "ctrl+shift+f",
    "command": "editor.action.formatDocument"
  },
  {
    "key": "ctrl+k ctrl+i",
    "command": "editor.action.formatSelection"
  }
]

Workspace固有の設定

プロジェクト別のフォーマット設定

{
  "folders": [
    {
      "path": "./frontend"
    },
    {
      "path": "./backend"
    }
  ],
  "settings": {
    "editor.formatOnSave": true,
    "[javascript]": {
      "editor.tabSize": 2
    },
    "[python]": {
      "editor.tabSize": 4
    }
  }
}

まとめ

VS Codeでインデントを整形する方法をまとめました：

基本的な整形方法

  • Shift + Alt + F で手動整形
  • editor.formatOnSave: true で保存時自動整形
  • editor.tabSize でインデント幅を統一

高度な設定

  • 言語別設定 で最適なインデント
  • Prettier・ESLint でより強力な統一
  • チーム統一設定 で開発環境の標準化

実用的な設定例

すぐ使える基本設定

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

プロフェッショナル設定

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.organizeImports": true,
    "source.fixAll": true
  },
  "[javascript]": {
    "editor.tabSize": 2
  },
  "[python]": {
    "editor.tabSize": 4,
    "editor.defaultFormatter": "ms-python.black-formatter"
  }
}

Youtube

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

スポンサーリンク

コメント

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