【2025年版】VSCode初心者におすすめの拡張機能15選｜これだけ入れればOK！

schedule 2025年10月26日　 update 2025年10月26日

皆さんは「VSCodeインストールしたけど、何の拡張機能を入れた方がいいのかわからない」や「英語ばかりで設定が難しい」など思ったことはありませんか？

今回は、VSCode(Visual Studio Code)初心者向けに、実際に使って便利だった拡張機能を厳選して紹介したいと思います！

そして、この記事を読んで拡張機能を入れたらプログラミングの速度が爆上がりします!（ガチです）

色々な拡張機能があって、どれ入れればいいのか分からなかったけど、
この記事を見て自分が便利そうだと思う拡張機能を入れていこうかな！

そうですね、私自身が便利だったと思っただけなので、本当にその拡張機能は自分にとって必要なのかを吟味して入れていくのが重要ですね！

また、この記事では拡張機能を紹介すると共に、GIFを活用してどのような感じかを見せていこうと思います！

動くGIF画像であれば、実際の動作が分かりやすくて大変参考なるわ～！

という事で、一応超超初心者向けに拡張機能とは何ぞやから始めていこうと思います。

Contents

VSCodeの拡張機能とは？
拡張機能の入れ方
【初心者がまず入れるべき】おすすめ拡張機能15選
まとめ：VSCode拡張機能で作業効率アップ！
- 次に読むとおすすめ

1 VSCodeの拡張機能とは？
2 拡張機能の入れ方
3 【初心者がまず入れるべき】おすすめ拡張機能15選
4 まとめ：VSCode拡張機能で作業効率アップ！
- 4.1 次に読むとおすすめ

VSCodeの拡張機能とは？

拡張機能(Extension)とは、誰かが作った機能をVSCodeに追加できる機能です。

なので、例えば

英語から日本語にする拡張機能
見た目を変える拡張機能
エラーを分かりやすくする拡張機能

等です。

「拡張機能」そのままの意味ですね～

そうですね。あまり言ってはいけないのですが、説明するか迷いましたが尺を少しでも増やしたいので書いた感じです。

拡張機能の入れ方

次に、拡張機能の入れ方について解説します。

最初に、①「Extensions(拡張機能)」をクリックしてください。

豆知識:「Ctrl」+「Shift」+「X」でも開けます。

次に、②の検索欄で入れたい拡張機能を検索し、入れたい拡張機能③をクリックします。

そして、④「Install」をクリックしたら完了です。

とても簡単ですね！

そうですね。簡単に自分に合った便利な機能を入れれるのは非常に便利です！

【初心者がまず入れるべき】おすすめ拡張機能15選

日本語化・基本操作を楽にする系

VSCode全体を日本語化！Japanese Language Pack

初めに、初心者はこれだけは絶対入れといたほうがいい日本語化パックをお勧めします！

これで、英語が苦手でも安心ですね！

でも俺は英語を頑張りたいから英語がいいかな～

全然アリですね！
英語を得意になりたい人は入れない方がいいと思います！
また、プログラミングを趣味ではなく本業でこれからやっていく人は、ドキュメントとかを読んでいくがゆえに、英語がやはり習得した方がよいので、英語がおすすめですかね。

趣味だけど俺は英語を頑張ります！（笑）

ファイルアイコンが見やすくなる Material Icon Theme

そして、このMaterial Icon Themeはその名の通り、ファイルアイコンが見やすくなります。

デフォルトよりすごい見やすいですね！

そうですね～
デフォルトも一応アイコンがありますが、Material Icon Themeはフォルダまでしっかりと識別してアイコンをつけてくれているので、非常にわかりやすいですね！
お勧めです！

目に優しいテーマ One Dark Pro

次に、このOne Dark ProはVSCodeのテーマを目に優しいテーマに変更することができます。

なんか落ち着いた感じの色合いになっていて、目に優しそうですね！

そうですね！個人的には、「One Dark Pro Night Flat」が好みです！

コードを綺麗に保つ系

自動でコードを整形 Prettier

そして、このPrettierはコードを自動で整形してくれる拡張機能です！

本当にちゃんと綺麗にコードを自動で整形してくれてる感じやな！

そうですね、一応デフォルトでも自動整形という機能はあるというものの、長いリストとかそういう細かい所は整形してくれないので、Prettierは重宝できる拡張機能です！
また、共同作業などの時に、このPrettierがあると、コードのスタイルを統一してくれるので非常に便利です！

エラー箇所がすぐわかる Error Lens

次に、このError Lensとは、エラー箇所を色で強調してくれる拡張機能です。

初心者はエラー発生しがちだから、色で強調してくれるのはありがたいです！

そうですね、デフォルトだとちょっと分かりにくいので、あった方がいいですね。

全角を強調させる zenkaku

続いて、このzenkakuは全角スペースを灰色で強調してくれる拡張機能です。

また、有効化するには「コマンドパレット」から「enable zenkaku」と入力して実行する必要があります。

/Users/ユーザ名/.vscode/extensions/mosapride.zenkaku-0.0.3/extension.js

/Users/ユーザ名/.vscode/extensions/mosapride.zenkaku-0.0.3/extension.js

しかし、常に有効化するには上のパスから

var enabled = false;

var enabled = false;

これを追加する必要があります。

VSCodeのデフォルトの機能でも少しは強調されますが、もっと強調したい場合にお勧めです。

作業効率アップ系

開閉タグ名を連動変更 Auto Rename Tag

そして、このAuto Rename TagはHTML等のタグを編集したときに、同時に対になっているタグと連動することができます。

普通は両方やらないといけないところを、1か所だけ変更するだけで変わるからいいね！

そうですね、確かに良いのですが偶にバグることがありました。

ファイルパスの補完 Path Intellisense

次に、このPath IntellisenseはVisual Studio Codeではデフォルトの状態でも、ある程度パスの入力補助がついていますが、これを使うことによってディレクトリ構造に合わせて候補を表示してくれます。
imgタグ等にパスを入れる時にいちいちフォルダを見に行かなくて良いので便利です。

{ "typescript.suggest.paths": false }
{ "javascript.suggest.paths": false }

{ "typescript.suggest.paths": false }
{ "javascript.suggest.paths": false }

また、この拡張機能を動作させるためには上の設定をfalseにする必要があります。
設定でそのまま調べたら出てくるので、そちらからfalseにすることができます。

デフォルトの状態でもある程度パスの入力補助がされるけど、一応この拡張機能も入れといて損はないね！

HTMLをブラウザで即プレビュー Live Server(Five Server)

VSCodeのLive Server（Five Server）でPHPを動かす方法!｜php.exeを指定するだけで簡単！

どうも皆さんこんにちは！皆さんは「VSCodeのLive Serverでphpを動かしてみたいな～」や「VSCodeでリアルタイムにPHP等の状況をブラウザで確認してみたいな～」と思ったことありません […]

そして、このLive Server(Five Server)はHTMLをブラウザで即プレビューすることができます。

右側にブラウザ、左側にVSCodeで確認しながら作業することが可能です！

また、これについての詳しい解説はこちらでやっているので、是非ご覧ください！

わざわざブラウザでリロードする必要が省けてすごい便利ですね！

そうですね、しかもphpのパスを指定してやるとphpも簡単に使えるようになるので、本当にApache等のサーバーを構築しなくてもできてしまいます！しかも、リロードする必要がなく、、、最強です！

学習サポート系

英単語スペルミス検出 Code Spell Checker

そして、このCode Spell Checkerは、英単語のスペルミスを検出できます。

よって、コメント・変数の誤字防止に役立ちます。

TODOを色付きで表示 TODO Highlight v2

次に、TODO Highlight v2はTODO等を色付きで表示してくれます。

また、設定は以下がおすすめです。

{
  "todohighlight.isEnable": true,
  "todohighlight.isCaseSensitive": true,
  "todohighlight.defaultStyle": {
    "color": "#222",
    "cursor": "pointer",
    "borderRadius": "4px",
    "isWholeLine": true
  },
  "todohighlight.keywords": [
    {
      "text": "TODO:",
      "before": {
        "contentText": "✅"
      },
      "color": "#222",
      "backgroundColor": "#ffaa00",
      "overviewRulerColor": "#ffaa00"
    },
    {
      "text": "FIXME:",
      "before": {
        "contentText": "🐛"
      },
      "color": "#fff",
      "backgroundColor": "#ff33aa",
      "overviewRulerColor": "#ff33aa"
    },
    {
      "text": "NOTE:",
      "before": {
        "contentText": "📝"
      },
      "color": "#fff",
      "backgroundColor": "#0066ff",
      "overviewRulerColor": "#0066ff"
    },
    {
      "text": "HACK:",
      "before": {
        "contentText": "🧑‍💻"
      },
      "color": "#333",
      "backgroundColor": "#00ff00",
      "overviewRulerColor": "#00ff00"
    },
    {
      "text": "REVIEW:",
      "before": {
        "contentText": "👍"
      },
      "color": "#fff",
      "backgroundColor": "#aa00ff",
      "overviewRulerColor": "#ffab00",
      "cursor": "pointer",
      "border": "1px solid #eee",
      "borderRadius": "4px"
    },
    {
      "text": "DEBUG:",
      "before": {
        "contentText": "🔍"
      },
      "color": "#222",
      "backgroundColor": "#ddeeff",
      "overviewRulerColor": "#ddeeff",
      "cursor": "pointer",
      "border": "1px solid #eee",
      "borderRadius": "4px"
    }
  ],
  "todohighlight.include": [
    "**/*.js",
    "**/*.jsx",
    "**/*.ts",
    "**/*.tsx",
    "**/*.html",
    "**/*.php",
    "**/*.css",
    "**/*.scss",
    "**/*.json"
  ],
  "todohighlight.exclude": [
    "**/node_modules/**",
    "**/bower_components/**",
    "**/dist/**",
    "**/build/**",
    "**/_output/**",
    "**/*.min.*",
    "**/*.map",
    "**/.next/**"
  ],
  "todohighlight.maxFilesForSearch": 5120,
  "todohighlight.toggleURI": false
}

{
  "todohighlight.isEnable": true,
  "todohighlight.isCaseSensitive": true,
  "todohighlight.defaultStyle": {
    "color": "#222",
    "cursor": "pointer",
    "borderRadius": "4px",
    "isWholeLine": true
  },
  "todohighlight.keywords": [
    {
      "text": "TODO:",
      "before": {
        "contentText": "✅"
      },
      "color": "#222",
      "backgroundColor": "#ffaa00",
      "overviewRulerColor": "#ffaa00"
    },
    {
      "text": "FIXME:",
      "before": {
        "contentText": "🐛"
      },
      "color": "#fff",
      "backgroundColor": "#ff33aa",
      "overviewRulerColor": "#ff33aa"
    },
    {
      "text": "NOTE:",
      "before": {
        "contentText": "📝"
      },
      "color": "#fff",
      "backgroundColor": "#0066ff",
      "overviewRulerColor": "#0066ff"
    },
    {
      "text": "HACK:",
      "before": {
        "contentText": "🧑‍💻"
      },
      "color": "#333",
      "backgroundColor": "#00ff00",
      "overviewRulerColor": "#00ff00"
    },
    {
      "text": "REVIEW:",
      "before": {
        "contentText": "👍"
      },
      "color": "#fff",
      "backgroundColor": "#aa00ff",
      "overviewRulerColor": "#ffab00",
      "cursor": "pointer",
      "border": "1px solid #eee",
      "borderRadius": "4px"
    },
    {
      "text": "DEBUG:",
      "before": {
        "contentText": "🔍"
      },
      "color": "#222",
      "backgroundColor": "#ddeeff",
      "overviewRulerColor": "#ddeeff",
      "cursor": "pointer",
      "border": "1px solid #eee",
      "borderRadius": "4px"
    }
  ],
  "todohighlight.include": [
    "**/*.js",
    "**/*.jsx",
    "**/*.ts",
    "**/*.tsx",
    "**/*.html",
    "**/*.php",
    "**/*.css",
    "**/*.scss",
    "**/*.json"
  ],
  "todohighlight.exclude": [
    "**/node_modules/**",
    "**/bower_components/**",
    "**/dist/**",
    "**/build/**",
    "**/_output/**",
    "**/*.min.*",
    "**/*.map",
    "**/.next/**"
  ],
  "todohighlight.maxFilesForSearch": 5120,
  "todohighlight.toggleURI": false
}

色々カスタマイズできるので、自分の好みに合わせましょう！

色を付けて分かりやすくしてくれるのが有難いですね！

そうですね！また、色々カスタマイズできるので、絵文字など変更してみるのも面白いかもしれません（笑）

Markdownをプレビュー Markdown Preview Enhanced

そして、Markdown Preview Enhancedは、マークダウンをプレビューすることができます。よって、GitHub等のReadmeとかを書くときとかに便利です！

なるほど、確かにGitHubに公開するときにマークダウン使いますもんね！

ちなみに、(「Ctrl」+「k」を押してから「v」を押す)とプレビューを起動することができます。

AIに助けてもらおう！ GitHub Copilot

次に、GitHub CopilotはAIによって今書いているコードの先を読んでAIが予測してくれる拡張機能です。

今の時代AIですもんね！超便利そう

そうですね、私もこの拡張機能を使い始めて1年目ぐらいですが、本当に便利で愛用しています（笑）

AIに助けてもらおう！ GitHub Copilot Chat

続いて、このGitHub Copilot ChatはGitHub Copilotと違ってチャットを使用することができて、しかもコードを書いてくれることも可能です！

もう難しいコードも覚える必要もなく、AIに頼んだら書いてくれる時代なんですね！

そうなんですよ！私も、このGithub Copilot Chatに結構手伝ってもらってNode.jsでパーティーゲームを作ってもらったことありますが、本当に楽に作れてしまいました！
ですが、使いすぎると身につかないので注意です。

チーム開発なら必須！ GitLens

そして、このGitLensはチームで誰がこのコードを編集したのか分かるようになる拡張機能です。

分からないコードが出てきたときに、だれが書いたのかわかるから、直ぐに質問できるな！

それと、自分がどのぐらい前に書いたコードか分かるのもいいですね！

まとめ：VSCode拡張機能で作業効率アップ！

今回は、VSCode初心者でも入れてすぐに便利さを実感できる拡張機能を紹介しました。
どれも入れるだけで「作業スピード」「見やすさ」「モチベーション」がアップします！

特におすすめは以下の3つです👇

Japanese Language Pack：英語が苦手でも安心！
One Dark Pro：目に優しく長時間の作業でも疲れにくいです
GitHub Copilot：AIがサポートしてくれます！

まずは気になった拡張機能を1つずつ試してみてください。
自分に合う環境を作ることで、プログラミングが何倍も楽しくなります！

次に読むとおすすめ

VSCodeでPHPを動かす方法（Five Server対応）

最後までご覧いただきありがとうございます！
絶対紹介した方がいい拡張機能や、ご指摘等があれば是非コメントで教えてくれると嬉しいです！

この記事は役に立ちましたか？

0人中0人がこの記事が役に立ったといっています

この記事を書いた人

pkki

このサイトの管理人のpkkiです。マインクラフトサーバーやWebサーバー等を運用しています。パソコン歴は8年程度で、サーバー運用歴は5年程度です。何かあればいつでもお問い合わせください。早ければ当日返信します。