【VS Code】拡張機能で自動整形する方法｜保存時フォーマットの設定も解説

VS Codeでコードを書いていると、インデントや改行位置がばらついて見づらくなることがあります。

特にフリーランスや複数案件を行き来する働き方だと、現場が変わるたびにVS Codeの設定を見直す場面も多く、「またこの設定をするのか…」と感じやすいです。

結論からいうと、VS Codeの自動整形はPrettierなどの拡張機能と設定ファイルを組み合わせて運用するのがおすすめです。

HTML・CSS・JavaScriptなら、まずはPrettierを導入し、保存時に自動整形する設定から始めると、コードの見た目をそろえやすくなります。

この記事では、VS Codeで自動整形する基本設定、Prettierの導入手順、settings.jsonの設定例、現場ごとの再設定を減らす考え方までわかりやすく解説します。

VS Codeで自動整形する方法は大きく2つある
VS Code標準整形とPrettierの違い
まずはPrettierで自動整形するのがおすすめな理由
Prettier拡張機能をインストールする
保存時に自動整形する設定
settings.jsonで自動整形を設定する例
現場ごとに設定し直す手間を減らすコツ
ユーザー設定とプロジェクト設定の使い分け
.prettierrcを使うと整形ルールをそろえやすい
.prettierignoreも用意しておくと安心
自動整形でよくあるトラブル
CSSも整えたい場合は役割の違いを押さえる
まとめ

VS Codeで自動整形する方法は大きく2つある

VS Codeでコードを整形する方法は、大きく分けると次の2つです。

方法	概要	向いているケース
VS Code標準の整形機能	VS Codeで利用できる既定のフォーマッターや、言語側で用意された整形機能を使う方法	まずは最低限整形したい場合
拡張機能を使う方法	Prettierなどの拡張機能を入れて整形ルールを統一する方法	現場やチームで書式をそろえたい場合

とりあえず整形したいだけなら標準機能でも使えますが、実務では誰が保存しても同じ形になることが重要です。

そのため、個人開発よりもチーム開発や案件参加を意識するなら、拡張機能ベースでそろえる方が運用しやすくなります。

VS Code標準整形とPrettierの違い

どちらを使うか迷った場合は、まず以下の違いを押さえておくと整理しやすいです。

項目	VS Code標準整形	Prettier
導入の手軽さ	高い	拡張機能の導入が必要
ルール統一	やや弱い	強い
チーム開発との相性	普通	高い
案件をまたぐ運用	設定がぶれやすい	設定ファイルで共有しやすい

個人で少し使うだけなら標準整形でも十分なことがあります。

ただし、現場ごとにルールが違う環境では、設定ファイルと組み合わせて運用しやすいPrettierの方が扱いやすいです。

まずはPrettierで自動整形するのがおすすめな理由

VS Codeで自動整形を始めるなら、まずはPrettierを使うのがおすすめです。

Prettierはコードの見た目を自動で整えるフォーマッターで、HTML、CSS、JavaScript、JSONなど幅広い形式に対応しています。

たとえば、Prettierには次のようなメリットがあります。

保存時に自動整形しやすい
手作業で整える必要が減る
案件ごとの見た目のぶれを減らしやすい
設定ファイルを置いておくと、チーム内で整形ルールをそろえやすくなる

特に実務では、「自分の好きな整形」よりも誰が触っても同じ形になることの方が大切です。

その点でPrettierは、細かい調整項目を増やしすぎず、一定のルールでそろえやすいのが強みです。

Prettier拡張機能をインストールする

ここからは、実際にVS CodeでPrettierを使うための設定手順を見ていきます。

まずはVS CodeにPrettierの拡張機能をインストールします。

VS Codeの拡張機能画面を開く
Prettier - Code formatterを検索し、「Install」をクリックする
「Trust Publisher & Install」をクリックする

これで、VS Code上でPrettierをフォーマッターとして使えるようになります。

保存時に自動整形する設定

Prettierをインストールしたら、次は保存したときに自動で整形されるように設定します。

拡張機能を入れただけでは、自動整形が有効になっていないことがあります。

保存時に自動で整形したい場合は、Format on Saveを有効にします。

{
  "editor.formatOnSave": true
}

設定画面からオンにしてもよいですが、settings.jsonに直接書いておくと内容を把握しやすくなります。

settings.jsonの開き方がわからない場合は、以下の記事を先に確認しておくとスムーズです。

あわせて読む

: 【VS Code】settings.json の開き方｜ユーザー設定とワークスペース設定の違いも解説
VS Codeの設定を調整しようとしたとき、「settings.jsonはどこから開けばいいの？」と迷うことがあります。自動整形やPrettierの設定を追加したいときも、設定画面ではなく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]のように個別設定を分けることもできます。

現場ごとに設定し直す手間を減らすコツ

ここが今回の記事でいちばん実務的に大事なポイントです。

毎回VS Codeの個人設定だけで対応していると、案件が変わるたびに微調整が増えやすくなります。

そのため、設定は次のように分けて考えるのがおすすめです。

置き場所	役割
ユーザー設定	自分のPC全体で共通に使う設定
ワークスペース設定	案件やフォルダごとに変えたい設定
.prettierrc などの設定ファイル	プロジェクト内で共有したい整形ルール

個人的には、保存時に整形するかどうかのような自分用設定はユーザー設定に、クォートやセミコロン、改行幅のような書式ルールはプロジェクト側に寄せるのが運用しやすいです。

こうしておくと、新しい現場に入っても「VS Code側の最低限の設定」だけで済みやすくなります。

ユーザー設定とプロジェクト設定の使い分け

設定をまとめるときは、何でもVS Codeのユーザー設定に入れるのではなく、役割を分けるのが大切です。

分類	例
ユーザー設定に向いているもの	保存時整形、フォントサイズ、タブ表示、ミニマップ表示など
プロジェクト設定に向いているもの	シングルクォート、セミコロン、改行幅、末尾カンマなど

見た目や操作感のような自分専用の設定はユーザー設定に、チームでそろえるべきコードルールはプロジェクト設定に寄せると整理しやすくなります。

.prettierrcを使うと整形ルールをそろえやすい

PrettierはVS Code拡張だけでなく、プロジェクト内の設定ファイルにも対応しています。

たとえば、次のような.prettierrcを置いておくと、現場ごとのルールをファイルとして残せます。

{
  "singleQuote": true,
  "semi": true,
  "tabWidth": 2,
  "printWidth": 100
}

この形にしておくと、個人の感覚ではなく、プロジェクトのルールに沿って整形しやすくなります。

チーム開発では、個人のVS Code設定よりも、こうした設定ファイルがある方がトラブルを減らしやすいです。

.prettierignoreも用意しておくと安心

.prettierignoreは、Prettierで整形したくないファイルやフォルダを指定するための設定ファイルです。

プロジェクトによっては、すべてのファイルを整形すると困ることがあります。

たとえば、ビルド成果物や外部ライブラリ、圧縮済みファイルなどは整形対象から外した方が安全です。

dist
build
node_modules
*.min.js

.prettierignoreを用意しておくと、意図しないファイルまで整形されるのを防ぎやすくなります。

自動整形でよくあるトラブル

フォーマットされない

保存しても整形されない場合は、まず以下を確認します。

editor.formatOnSaveが有効か
既定のフォーマッターがPrettierになっているか
対象ファイル形式がPrettier対応か
別の拡張機能と競合していないか

保存しても思った通りに整形されない場合は、自分のVS Code設定ではなく、プロジェクト内の.prettierrcや.editorconfigが影響していることもあります。

既存案件では、個人設定よりもプロジェクト側のルールが優先される前提で確認すると、原因を切り分けやすくなります。

現場のコードと整形結果が合わない

既存案件では、すでに別のルールで運用されていることがあります。

その場合、自分のユーザー設定だけで整形すると、不要な差分が大量に出ることがあります。

まずはプロジェクト内に設定ファイルがあるかを確認し、なければむやみに整形対象を広げない方が安全です。

LintとFormatの役割が混ざる

自動整形は主に「見た目をそろえる」ためのものです。

一方で、Lintはコードの問題点やルール違反を検出する役割があります。

この2つを同じものとして考えると混乱しやすいため、整形とチェックは分けて理解しておくのがおすすめです。

CSSも整えたい場合は役割の違いを押さえる

CSSもPrettierである程度整形できますが、プロパティ順序のようなルールまでは別で考える必要があります。

つまり、改行やインデントを整えることと、記述ルールを統一することは少し役割が違います。

CSSの並び順までそろえたい場合は、PrettierだけでなくStylelintもあわせて検討すると整理しやすいです。

CSSプロパティの並び順については、以下の記事で詳しくまとめています。

あわせて読む

: 【CSS】プロパティの記述順序の決め方｜おすすめの並び順を解説
CSSを書いていて、「なんとなく書いたけど、あとから見返したら読みにくい…」と感じたことはありませんか？ CSSは自由度が高いぶん、同じ見た目でも書き方が人によって変わりやすく、プロパティの並び方がバ ...

Stylelintについては、以下の記事で詳しくまとめています。

あわせて読む

: StylelintでCSSプロパティの順番を統一する方法
CSSのプロパティ順序は、チームや案件ごとにルールが分かれやすいポイントです。自分で意識して並び順をそろえることもできますが、毎回手作業で合わせるのは大変です。結論からいうと、CSSプロパティの順 ...

まとめ

VS Codeで自動整形を行うなら、まずはPrettierを導入し、保存時フォーマットを有効にする方法から試すのがおすすめです。

VS Codeの自動整形は、標準機能より拡張機能を使った方が実務で運用しやすい
HTML・CSS・JavaScriptなら、まずはPrettierがおすすめ
editor.formatOnSaveを有効にすると、保存時に整形されるようになる
個人設定とプロジェクト設定を分けると、現場ごとの再設定を減らしやすい
チーム開発では、VS Code設定より設定ファイルでルールを共有する方が運用しやすい

「毎回なんとなく設定する」状態から抜けるだけでも、案件をまたぐときのストレスはかなり減ります。

まずは、自分のVS Codeで最低限必要な設定と、プロジェクトに置くべき設定を分けて整理するところから始めてみてください。