VS Code拡張機能の選び方：最初に必要なものだけ入れる

拡張機能をまとめて入れると、どれが動作を変えたか分かりにくくなります。VS Codeの標準機能を使い、困っている作業に合うものを一つずつ追加しましょう。この記事では、表示・整形・診断の見やすさで困ったときの候補と、入れる前の確認点を紹介します。

標準でできることを先に確認

HTMLの補完、Emmet、基本的な整形等は標準機能にもあります。同じ機能を増やす前に、現在の設定でできないか確認します。Emmetの使い方も参考になります。

目的別の候補

発行者と公式の配布先を見る

名前が似た拡張や、発行者の違うものを選ばないようにします。検索結果へのリンクだけでなく、下記の配布先を照合してください。対応バージョン、更新状況、README、要求する権限も確認します。

Prettierを入れた後

既存の標準フォーマッターと競合する場合は、使用するフォーマッターを明示します。Format Documentで何が変わるか確認し、保存時の自動整形は差分を把握してから設定します。整形と、文法や仕様の正しさは別の確認です。

練習用ファイルで、整形の前後を比較する

既存の制作物を一括整形する前に、新しいフォルダのindex.htmlへ次の短いHTMLを保存します。HTMLとしての役割が変わらず、改行と字下げが整理されるかを確認する練習です。

<!doctype html><html lang="ja"><head><meta charset="utf-8"><title>整形練習</title></head><body><main><h1>制作メモ</h1><p>整形の前後を比べます。</p></main></body></html>

1. 拡張機能のIDがesbenp.prettier-vscodeであることを確認してPrettierをインストールします。
2. index.htmlを開き、コマンドパレットからFormat Document With...（ドキュメントのフォーマット方法）を選びます。
3. Prettier - Code formatterを選択します。候補が複数あれば、今回使うものを明示します。
4. 改行・字下げの差分を確認して保存し、ブラウザで見出しと本文が変わっていないか確認します。

フォーマット結果の字下げ幅などをこのフォルダでそろえるなら、ルートに.prettierrc.jsonを作り、次を保存します。既存プロジェクトに設定がある場合は、そのルールを先に確認してください。

{
  "tabWidth": 2,
  "useTabs": false,
  "printWidth": 80
}

printWidthは「どんな行も必ず80文字以内になる」という上限ではありません。長い文字列などはそのまま残る場合があります。整形は見出しの階層やリンク先の正しさも判定しないため、整形できたこととページの完成を分けて確認します。

保存するたびに整形する設定は、確認してから

練習用フォルダの.vscode/settings.jsonに次を置くと、HTMLに使うフォーマッターと保存時の動作を指定できます。すでにsettings.jsonがある場合は、ファイル全体を置き換えず既存のJSONへ統合します。

{
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
  }
}

動かない場合は、右下の言語モードがHTMLか、拡張がこのワークスペースで有効か、Prettierの出力欄に構文エラーがないかを順に確認します。設定の影響を分けたいときは保存時整形をfalseへ戻し、手動のFormat Documentから試してください。

整形後の確認例

Prettier 3.6.2で上の設定を使うと、次のように改行・字下げが付きます。見出しと段落の内容は変わっていません。

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <title>整形練習</title>
  </head>
  <body>
    <main>
      <h1>制作メモ</h1>
      <p>整形の前後を比べます。</p>
    </main>
  </body>
</html>

この例の整形処理はPrettierのCLIで再確認しました。VS Codeの画面操作・認証を実演した記録ではなく、拡張の操作は公式READMEに基づく案内です。

増やす前に一度無効化して比較

操作が重くなった、補完が二重に出る等の変化があれば、最近入れた拡張を無効にして比べます。「初心者なら全部必須」ではありません。目的がなくなったものは削除を検討できます。

最初の環境はVS Codeの導入、調べ方はMDNを使った確認へ進めます。

参考にした公式資料

• 日本語パック
• Prettier
• Error Lens
• VS Code：拡張機能

設定の詳細：Prettier：設定ファイル ／ Prettier：CLI