VS Code拡張機能の最小セット

入門 | 10分 で読める | 2026.06.14

公式ドキュメント
実演VS Code拡張機能初心者

今回やること

この記事では、VS Codeの拡張機能を入れる考え方と、初心者が最初に入れる候補を確認します。

拡張機能は多ければよいわけではありません。最初は必要最小限にします。

Step 1: Extensionsを開く

左側の四角いアイコン、または Cmd/Ctrl + Shift + X でExtensionsを開きます。

検索欄から拡張機能を探し、必要なものだけインストールします。

確認すること:

  • 発行元
  • ダウンロード数
  • 更新状況
  • 説明文
  • 必要な機能かどうか

Step 2: 最初の候補を選ぶ

初心者のWeb学習では、以下を候補にします。

拡張機能目的
Live ServerHTMLをローカルサーバーで確認
Prettierコード整形
ESLintJavaScriptの問題検出
Japanese Language PackUIを日本語化したい場合
Markdown All in OneMarkdown編集補助

すべて必須ではありません。最初はLive ServerとPrettierからでも十分です。

Step 3: Live Serverを試す

index.html を作り、右クリックから「Open with Live Server」を実行します。

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>Live Server</title>
  </head>
  <body>
    <h1>表示確認</h1>
  </body>
</html>

ブラウザが開き、見出しが表示されれば成功です。

Step 4: Prettierを試す

Prettierはコード整形ツールです。崩れたインデントを自動でそろえます。

Format Document をCommand Paletteから実行します。

Cmd/Ctrl + Shift + P
Format Document

整形が効かない場合は、Default Formatterの設定を確認します。

Step 5: 入れすぎを避ける

拡張機能を大量に入れると、次の問題が起きることがあります。

  • VS Codeが重くなる
  • 同じ機能が競合する
  • エラーの原因が分かりにくくなる
  • 設定が複雑になる

注意: 「おすすめ拡張機能100選」のような一覧をそのまま全部入れないでください。今の学習に必要なものだけ入れます。

よくあるエラー

困る状態よくある原因確認する場所
Format Documentが効かないフォーマッタ未設定Default Formatter
Live Serverが出ないHTMLファイルを開いていない右クリック対象
VS Codeが重い拡張機能の入れすぎExtensions一覧

次にやること

ターミナル基本操作の実演 で、フォルダ移動やファイル一覧をコマンドで確認します。

まとめ

VS Code拡張機能は、学習を補助する道具です。最初はLive Server、Prettier、必要に応じてESLintやMarkdown補助を入れます。入れすぎず、問題が起きた時に原因を切り分けられる状態を保ちます。

参考リソース

おすすめ記事

← 一覧に戻る
PR
PR
PR
PR