VS Codeでコードを書いていると、インデントや改行位置がばらついて見づらくなることがあります。
特にフリーランスや複数案件を行き来する働き方だと、現場が変わるたびにVS Codeの設定を見直す場面も多く、「またこの設定をするのか…」と感じやすいです。
結論からいうと、VS Codeの自動整形は拡張機能と設定ファイルを組み合わせて運用するのがおすすめです。
HTML・CSS・JavaScriptなら、まずはPrettierを導入し、保存時に自動整形する設定から始めると、コードの見た目をそろえやすくなります。
この記事では、VS Codeで自動整形する基本設定、Prettierの導入手順、現場ごとに設定を変えすぎないための考え方までわかりやすく解説します。
もくじ
VS Codeで自動整形する方法は大きく2つある
VS Codeでコードを整形する方法は、大きく分けると次の2つです。
| 方法 | 概要 | 向いているケース |
|---|---|---|
| VS Code標準の整形機能 | 言語ごとに用意された既定のフォーマット機能を使う方法 | まずは最低限整形したい場合 |
| 拡張機能を使う方法 | Prettierなどの拡張機能を入れて整形ルールを統一する方法 | 現場やチームで書式をそろえたい場合 |
とりあえず整形したいだけなら標準機能でも使えますが、実務では誰が保存しても同じ形になることが重要です。
そのため、個人開発よりもチーム開発や案件参加を意識するなら、拡張機能ベースでそろえる方が運用しやすくなります。
VS Code標準整形とPrettierの違い
どちらを使うか迷った場合は、まず以下の違いを押さえておくと整理しやすいです。
| 項目 | VS Code標準整形 | Prettier |
|---|---|---|
| 導入の手軽さ | 高い | 拡張機能の導入が必要 |
| ルール統一 | やや弱い | 強い |
| チーム開発との相性 | 普通 | 高い |
| 案件をまたぐ運用 | 設定がぶれやすい | 設定ファイルで共有しやすい |
個人で少し使うだけなら標準整形でも十分なことがあります。
ただし、現場ごとにルールが違う環境では、設定ファイルと組み合わせて運用しやすいPrettierの方が扱いやすいです。
まずはPrettierで自動整形するのがおすすめな理由
VS Codeで自動整形を始めるなら、まずはPrettierを使うのがおすすめです。
Prettierはコードの見た目を自動で整えるフォーマッターで、HTML、CSS、JavaScript、JSONなど幅広い形式に対応しています。
- 保存時に自動整形しやすい
- 手作業で整える必要が減る
- 案件ごとの見た目のぶれを減らしやすい
- 設定ファイルを置けば、チーム内でそろえやすい
特に実務では、「自分の好きな整形」よりも誰が触っても同じ形になることの方が大切です。
その点でPrettierは、細かい調整項目を増やしすぎず、一定のルールでそろえやすいのが強みです。
Prettier拡張機能をインストールする
まずはVS CodeにPrettierの拡張機能をインストールします。
- VS Codeの拡張機能画面を開く
Prettier - Code formatterを検索する- インストールする
これで、VS Code上でPrettierをフォーマッターとして使えるようになります。
保存時に自動整形する設定
拡張機能を入れただけでは、自動整形が有効になっていないことがあります。
保存時に自動で整形したい場合は、Format on Save を有効にします。
{
"editor.formatOnSave": true
}
設定画面からオンにしてもよいですが、settings.jsonに直接書いておくと内容を把握しやすくなります。
settings.jsonで設定する例
HTML・CSS・JavaScriptを主に整形したい場合は、たとえば以下のように設定できます。
{
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"[html]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[css]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[javascriptreact]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[json]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
}
}
この設定をしておくと、対象ファイルを保存したタイミングでPrettierが動きやすくなります。
なお、言語ごとに別のフォーマッターを使いたい場合は、[python]のように個別設定を分けることもできます。
settings.jsonの開き方がわからない場合は、以下の記事を先に確認しておくとスムーズです。
-
【VS Code】settings.json の開き方｜ユーザー設定とワークスペース設定の違いも解説
VS Codeの設定を調整しようとしたとき、「settings.jsonはどこから開けばいいの？」と迷うことがあります。 自動整形やPrettierの設定を追加したいときも、設定画面ではなくJSONを ...
現場ごとに設定し直す手間を減らすコツ
ここが今回の記事でいちばん実務的に大事なポイントです。
毎回VS Codeの個人設定だけで対応していると、案件が変わるたびに微調整が増えやすくなります。
そのため、設定は次のように分けて考えるのがおすすめです。
| 置き場所 | 役割 |
|---|---|
| ユーザー設定 | 自分のPC全体で共通に使う設定 |
| ワークスペース設定 | 案件やフォルダごとに変えたい設定 |
| .prettierrc などの設定ファイル | プロジェクト内で共有したい整形ルール |
個人的には、保存時に整形するかどうかのような自分用設定はユーザー設定に、クォートやセミコロン、改行幅のような書式ルールはプロジェクト側に寄せるのが運用しやすいです。
こうしておくと、新しい現場に入っても「VS Code側の最低限の設定」だけで済みやすくなります。
ユーザー設定に入れるもの・プロジェクトに置くもの
設定をまとめるときは、何でもVS Codeのユーザー設定に入れるのではなく、役割を分けるのが大切です。
| 分類 | 例 |
|---|---|
| ユーザー設定に向いているもの | 保存時整形、フォントサイズ、タブ表示、ミニマップ表示など |
| プロジェクト設定に向いているもの | シングルクォート、セミコロン、改行幅、末尾カンマなど |
見た目や操作感のような自分専用の設定はユーザー設定に、チームでそろえるべきコードルールはプロジェクト設定に寄せると整理しやすくなります。
.prettierrcを使うとさらに安定する
PrettierはVS Code拡張だけでなく、プロジェクト内の設定ファイルにも対応しています。
たとえば、次のような.prettierrcを置いておくと、現場ごとのルールをファイルとして残せます。
{
"singleQuote": true,
"semi": true,
"tabWidth": 2,
"printWidth": 100
}
この形にしておくと、ローカルの感覚ではなく、プロジェクトのルールに従って整形されやすくなります。
チーム開発では、個人のVS Code設定よりも、こうした設定ファイルがある方がトラブルを減らしやすいです。
.prettierignoreも用意しておくと安心
プロジェクトによっては、すべてのファイルを整形すると困ることがあります。
たとえば、ビルド成果物や外部ライブラリ、圧縮済みファイルなどは整形対象から外した方が安全です。
dist build node_modules *.min.js
.prettierignoreを用意しておくと、意図しないファイルまで整形されるのを防ぎやすくなります。
自動整形でよくあるハマりどころ
フォーマットされない
保存しても整形されない場合は、まず以下を確認します。
editor.formatOnSaveが有効か- 既定のフォーマッターがPrettierになっているか
- 対象ファイル形式がPrettier対応か
- 別の拡張機能と競合していないか
現場のコードと整形結果が合わない
既存案件では、すでに別のルールで運用されていることがあります。
その場合、自分のユーザー設定だけで整形すると、不要な差分が大量に出ることがあります。
まずはプロジェクト内に設定ファイルがあるか確認し、なければ勝手に整形を広げすぎない方が安全です。
LintとFormatの役割が混ざる
自動整形は主に「見た目をそろえる」ためのものです。
一方で、Lintはコードの問題点やルール違反を検出する役割があります。
この2つを同じものとして考えると混乱しやすいため、整形とチェックは分けて理解しておくのがおすすめです。
CSSまで整えたい場合の考え方
CSSもPrettierである程度整形できますが、プロパティ順序のようなルールは別の考え方が必要になることがあります。
つまり、改行やインデントの整形と、記述ルールの統一は少し役割が違います。
CSSの並び順やルールまで厳密にそろえたい場合は、PrettierだけでなくStylelintなども含めて考えると整理しやすいです。
CSSプロパティの並び順については、以下の記事でも詳しくまとめています。
-
【CSS】プロパティの記述順序の決め方｜おすすめの並び順を解説
CSSを書いていて、「なんとなく書いたけど、あとから見返したら読みにくい…」と感じたことはありませんか？ CSSは自由度が高いぶん、同じ見た目でも書き方が人によって変わりやすく、プロパティの並び方がバ ...
まとめ
VS Codeで自動整形を行うなら、まずはPrettierを導入し、保存時フォーマットを有効にするのが始めやすい方法です。
- VS Codeの自動整形は、標準機能より拡張機能運用の方が実務で安定しやすい
- HTML・CSS・JavaScriptなら、まずはPrettierがおすすめ
editor.formatOnSaveを有効にすると保存時に整形しやすい- 個人設定とプロジェクト設定を分けると、現場ごとの再設定を減らしやすい
- チーム開発では、VS Code設定より設定ファイルでルール共有する方が安全
「毎回なんとなく設定する」状態から抜けるだけでも、案件をまたぐときのストレスはかなり減ります。
まずは、自分のVS Codeで最低限必要な設定と、プロジェクトに置くべき設定を分けて整理するところから始めてみてください。