「コードのインデントやスペースがバラバラで読みづらい」
「保存するたびに自動でキレイに整形したい」
Visual Studio Code（VS Code）には、コードを自動で整形（フォーマット）する機能が備わっています。これを使えば、誰が書いても読みやすくて美しいコードが簡単に作れます。
この記事では、VS Codeでコード整形をする基本のやり方から、自動整形の設定までを初心者向けにわかりやすく解説します。
コード整形の基本操作
ショートカットで整形
Windows / Linux
Shift + Alt + F
macOS
Shift + Option + F
これを押すと、現在開いているファイル全体が自動で整形されます。
右クリックメニューからも可能
エディタ内で右クリックし、「ドキュメントのフォーマット」を選んでもコード整形できます。
選択した部分だけ整形
コードの一部分だけを整形したい場合は：
- 整形したい部分を選択
- 右クリックして「選択範囲のフォーマット」を選択
- または
Ctrl + K, Ctrl + F（Mac:Cmd + K, Cmd + F）
自動でコード整形する設定
保存時に自動整形をする
毎回手動で整形するのは面倒なので、保存時に自動でフォーマットするのがおすすめです。
GUIでの設定方法
- 左下の歯車アイコン → 「設定」をクリック
- 検索窓に「format on save」と入力
- 「Editor: Format On Save」にチェックを入れる
settings.jsonに追記
{
"editor.formatOnSave": true
}
これを入れておくと、Ctrl + S（Mac: Cmd + S）で保存するたびに自動でコードが整形されます。
入力時に自動整形する
タイピング中にリアルタイムで整形したい場合は：
{
"editor.formatOnType": true
}
ペースト時に自動整形する
コピペしたコードも自動で整形されます：
{
"editor.formatOnPaste": true
}
フォーマッタの選び方と設定
言語別のフォーマッタを使う
VS Codeは複数のフォーマッタをサポートしています。主要な言語とおすすめフォーマッタをご紹介します。
Python
- Prettier：最も人気のあるフォーマッタ
- ESLint：コードの品質もチェック
拡張機能をインストール後、settings.jsonで設定：
{
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
}
}
Python
- Black：Pythonコミュニティで人気
- autopep8：PEP8に準拠
設定例：
{
"[python]": {
"editor.defaultFormatter": "ms-python.black-formatter"
}
}
Go
- gofmt：Go標準のフォーマッタ
- goimports：importも自動整理
HTML/CSS
- Prettier：Web開発に最適
- Beautify：軽量でシンプル
複数のフォーマッタがある場合
同じ言語で複数のフォーマッタがインストールされている場合、デフォルトを指定できます：
Ctrl + Shift + Pでコマンドパレットを開く- 「Format Document With…」と入力
- 使いたいフォーマッタを選択
- 「Configure Default Formatter」で常に使用するものを設定
実践的な設定例
プロジェクトごとの設定
プロジェクトフォルダに .vscode/settings.json を作成すると、そのプロジェクト専用の設定ができます：
{
"editor.formatOnSave": true,
"editor.tabSize": 2,
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[python]": {
"editor.defaultFormatter": "ms-python.black-formatter"
}
}
Prettierの設定をカスタマイズ
プロジェクトルートに .prettierrc ファイルを作成：
{
"semi": false,
"singleQuote": true,
"tabWidth": 2,
"trailingComma": "es5"
}
EditorConfigとの連携
.editorconfig ファイルでプロジェクト全体のスタイルを統一：
root = true
[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true
よくあるトラブルと対処法
フォーマットが効かない場合
原因1：フォーマッタがインストールされていない
- 使いたい言語のフォーマッタ拡張機能をインストール
- 拡張機能が有効になっているか確認
原因2：デフォルトフォーマッタが設定されていない
settings.jsonでフォーマッタを指定- コマンドパレットで「Format Document With…」を実行
原因3：シンタックスエラーがある
- コードにエラーがあると整形されない場合があります
- エラーを修正してから再試行
保存時に整形されない場合
"editor.formatOnSave": trueが設定されているか確認- 拡張機能の競合やエラーがないかチェック
- VS Codeを再起動してみる
整形が思った通りにならない場合
インデントの設定を確認
{
"editor.tabSize": 4,
"editor.insertSpaces": true
}
言語固有の設定を追加
{
"[python]": {
"editor.tabSize": 4
},
"[javascript]": {
"editor.tabSize": 2
}
}
便利な追加機能
コード整形のステータス表示
ステータスバーにフォーマッタの情報を表示：
{
"editor.formatOnSaveMode": "modifications"
}
特定のファイルを整形から除外
.prettierignore ファイルで除外設定：
node_modules/
dist/
*.min.js
組織やチームでの設定共有
- プロジェクトに
.vscode/settings.jsonを含める .editorconfigや.prettierrcをバージョン管理に含める- READMEに設定手順を記載
まとめ
VS Codeでコード整形は：
- ✅
Shift + Alt + F（Mac:Shift + Option + F）で即時整形 - ✅
editor.formatOnSaveをtrueにすれば保存時に自動整形 - ✅ 言語に合ったフォーマッタをインストール＆設定で快適に
- ✅ プロジェクトごとの設定でチーム開発も統一
これだけで、読みやすくて美しいコードが簡単に書けます。
コード整形を活用することで、開発効率が大幅に向上し、チーム開発でのコードレビューもスムーズになります。ぜひ試してみてください！
コメント