VSCodeでコード整形を極める！自動フォーマットの設定から便利な拡張機能まで完全解説

コードを書いていて、インデントがバラバラになったり、改行位置が統一されていなかったりして困ったことはありませんか？

実は、コードの見た目を整える「整形（フォーマット）」は、プログラミングの効率を大きく左右する重要な要素なんです。きれいに整形されたコードは読みやすく、バグも見つけやすくなります。

VSCodeには強力な整形機能が備わっていて、ワンクリックでコードを美しく整えることができるんですよ。しかも、保存時に自動で整形する設定もできるので、一度設定すれば意識せずにきれいなコードが書けるようになります。

この記事では、VSCodeの整形機能を使いこなすための方法を、初心者の方でも実践できるように詳しく解説していきます。

1. 今すぐ使える！基本の整形ショートカット
1. 瞬時にコードを整形する3つの方法
2. 選択範囲だけを整形したい場合
2. 保存時に自動整形する設定（これが便利！）
1. 基本の自動整形設定
2. 特定の言語だけ自動整形する設定
3. 言語別のおすすめフォーマッター拡張機能
4. インデントとタブの詳細設定
5. 整形をカスタマイズする高度な設定
6. よくあるトラブルと解決方法
整形設定のベストプラクティス
1. プロジェクトタイプ別おすすめ設定
まとめ：整形機能で開発効率を劇的に向上させよう

1. 今すぐ使える！基本の整形ショートカット

瞬時にコードを整形する3つの方法

VSCodeでコードを整形する方法は、実はとてもシンプルです。

方法1：ショートカットキーを使う（最速！）

Windows/Linux: Shift + Alt + F
Mac: Shift + Option + F

方法2：右クリックメニューから選択

コードエディタ内で右クリック
「ドキュメントのフォーマット」を選択

方法3：コマンドパレットを使用

Ctrl + Shift + P（Mac: Cmd + Shift + P）でコマンドパレットを開く
「format document」と入力
「ドキュメントのフォーマット」を選択

選択範囲だけを整形したい場合

文書全体ではなく、特定の部分だけを整形したいこともありますよね。

選択範囲の整形方法：

整形したい部分を選択
Ctrl + K, Ctrl + F（Mac: Cmd + K, Cmd + F）を押す

この機能は、他の人のコードを部分的に修正する時などに便利です。全体のスタイルを変えずに、自分が編集した部分だけをきれいにできるんです。

2. 保存時に自動整形する設定（これが便利！）

基本の自動整形設定

毎回手動で整形するのは面倒ですよね。VSCodeでは、ファイルを保存するたびに自動で整形することができます。

設定方法：

Ctrl + ,で設定画面を開く
検索ボックスに「format on save」と入力
「Editor: Format On Save」にチェックを入れる

または、settings.jsonに直接記述する方法もあります：

{
    "editor.formatOnSave": true
}

特定の言語だけ自動整形する設定

すべてのファイルではなく、特定のプログラミング言語だけ自動整形したい場合の設定です。

{
    "[javascript]": {
        "editor.formatOnSave": true
    },
    "[python]": {
        "editor.formatOnSave": true
    },
    "[html]": {
        "editor.formatOnSave": false
    }
}

この設定により、JavaScriptとPythonは保存時に自動整形され、HTMLは自動整形されません。

3. 言語別のおすすめフォーマッター拡張機能

Prettier（JavaScript/TypeScript/HTML/CSS）

Web開発で最も人気のあるフォーマッターです。

インストール方法：

拡張機能タブ（Ctrl + Shift + X）を開く
「Prettier」を検索
「Prettier – Code formatter」をインストール

基本設定（settings.json）：

{
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "prettier.tabWidth": 2,
    "prettier.semi": true,
    "prettier.singleQuote": true,
    "prettier.printWidth": 80
}

プロジェクト単位の設定（.prettierrc）：

{
    "tabWidth": 2,
    "semi": true,
    "singleQuote": true,
    "trailingComma": "es5",
    "bracketSpacing": true
}

Python用フォーマッター

Black（人気No.1）

妥協のない、厳格なフォーマッターです。設定項目が少なく、チーム開発に最適。

{
    "[python]": {
        "editor.defaultFormatter": "ms-python.black-formatter",
        "editor.formatOnSave": true
    }
}

autopep8（PEP8準拠）

Pythonの公式スタイルガイドPEP8に準拠した整形を行います。

{
    "python.formatting.provider": "autopep8",
    "python.formatting.autopep8Args": [
        "--max-line-length=120",
        "--aggressive"
    ]
}

その他の言語向けフォーマッター

C/C++：

{
    "C_Cpp.clang_format_style": "Google",
    "C_Cpp.clang_format_fallbackStyle": "Visual Studio"
}

Go言語：

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

Java：

{
    "java.format.settings.url": "https://raw.githubusercontent.com/google/styleguide/gh-pages/eclipse-java-google-style.xml",
    "java.format.enabled": true
}

4. インデントとタブの詳細設定

インデントサイズの調整

コードの階層を表すインデント（字下げ）の設定は、読みやすさに大きく影響します。

基本設定：

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

tabSize: インデントの幅（スペース数）
insertSpaces: タブキーを押した時にスペースを挿入するか
detectIndentation: ファイルを開いた時に自動でインデント設定を検出

言語ごとのインデント設定

言語によって推奨されるインデント幅は異なります。

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

既存ファイルのインデント変換

すでにあるファイルのインデントを変更する方法：

ファイルを開く
右下のステータスバーにある「スペース: 4」などをクリック
「インデントをスペースに変換」または「インデントをタブに変換」を選択

5. 整形をカスタマイズする高度な設定

EditorConfigを使った統一設定

チーム開発では、.editorconfigファイルを使って設定を統一できます。

.editorconfig の例：

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

整形から除外するファイル・フォルダ

特定のファイルを整形対象から外したい場合：

{
    "files.associations": {
        "*.min.js": "plaintext",
        "*.min.css": "plaintext"
    },
    "[plaintext]": {
        "editor.formatOnSave": false
    }
}

コード整形時の細かい挙動設定

{
    "editor.formatOnPaste": true,
    "editor.formatOnType": true,
    "editor.autoIndent": "full",
    "files.trimTrailingWhitespace": true,
    "files.insertFinalNewline": true,
    "files.trimFinalNewlines": true
}

formatOnPaste: 貼り付け時に自動整形
formatOnType: 入力時に自動整形
autoIndent: 自動インデントのレベル
trimTrailingWhitespace: 行末の空白を削除
insertFinalNewline: ファイル末尾に改行を追加

6. よくあるトラブルと解決方法

Q: 整形ショートカットが効かない

解決方法：

デフォルトフォーマッターが設定されているか確認
- コマンドパレットで「Format Document With…」を選択
- 「既定のフォーマッターの構成」を選択
- 使用したいフォーマッターを選択
キーボードショートカットの確認
- Ctrl + K, Ctrl + Sでショートカット設定を開く
- 「format document」で検索
- 競合していないか確認

Q: 保存時の自動整形が動作しない

チェックポイント：

{
    "editor.formatOnSave": true,
    "editor.formatOnSaveMode": "file",
    "[言語ID]": {
        "editor.defaultFormatter": "拡張機能ID"
    }
}

確認事項：

フォーマッター拡張機能がインストールされているか
言語に対応したフォーマッターが設定されているか
ワークスペース設定が優先されていないか

Q: Prettierとの設定が競合する

解決策：

ESLintとPrettierを併用する場合：

{
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    },
    "eslint.validate": ["javascript", "typescript"],
    "prettier.eslintIntegration": true
}

Q: チームメンバーと設定を統一したい

推奨方法：

プロジェクトルートに設定ファイルを配置
- .vscode/settings.json（VSCode設定）
- .prettierrc（Prettier設定）
- .editorconfig（エディタ共通設定）
必要な拡張機能をリスト化
- .vscode/extensions.jsonを作成：

{
    "recommendations": [
        "esbenp.prettier-vscode",
        "dbaeumer.vscode-eslint",
        "editorconfig.editorconfig"
    ]
}

整形設定のベストプラクティス

プロジェクトタイプ別おすすめ設定

フロントエンド開発：

Prettier + ESLint
タブサイズ: 2
セミコロン: お好みで
シングルクォート: true

バックエンド開発（Node.js）：

Prettier または StandardJS
タブサイズ: 2
セミコロン: false（Standard JSの場合）

Python開発：

Black または autopep8
タブサイズ: 4（PEP8準拠）
行の最大長: 79文字（PEP8）または88文字（Black）

まとめ：整形機能で開発効率を劇的に向上させよう

VSCodeの整形機能を使いこなすことで、コードの品質と開発効率が大幅に向上します。

今すぐ実践すべき3つの設定：

保存時の自動整形を有効化
- "editor.formatOnSave": trueを設定
言語に応じたフォーマッターをインストール
- Web開発: Prettier
- Python: Black
- その他: 各言語の標準フォーマッター
チーム開発なら設定ファイルを共有
- .editorconfigや.prettierrcを活用

整形機能は一度設定すれば、あとは自動で動いてくれます。最初の設定に少し時間をかけるだけで、その後の開発がとても楽になりますよ。

きれいなコードは、自分にとっても、チームメンバーにとっても読みやすく、保守しやすいものです。ぜひこの記事を参考に、VSCodeの整形機能を活用してみてください！