【拡張機能おすすめ】VSCodeの生産性を高める人気エクステンション10選
こんにちは！プログラミング知識ゼロから、AIの力を借りながら独学でWebサイトを立ち上げた者です。皆さんと全く同じ初心者でした。
「さあ、VSCode（ビジュアル・スタジオ・コード）をインストールしたぞ！これからコーディングを頑張るぞ！」と意気込んだものの、次に何をすればいいか分からず、手が止まってしまっていませんか？あるいは、「もっと効率よくコードを書きたいけど、どうすればいいんだろう？」と悩んでいませんか？
その気持ち、痛いほどよく分かります。私も最初はそうでした。真っ黒な画面を前に、ただただ途方に暮れていました。しかし、VSCodeの真価は「拡張機能（エクステンション）」を追加することで発揮されます。これらを導入することで、あなたの開発効率は劇的に向上し、コーディングが何倍も楽しくなります。
この記事では、私が実際にWebサイトを制作する中で「これがないと仕事にならない！」と心から感じた、本当に役立つ拡張機能だけを10個に厳選しました。難しい話は一切ありません。この記事の通りに真似して、コピペするだけで、あなたのVSCodeが最強の開発ツールに生まれ変わります。一緒に「動く」を体験して、生産性爆上がりの快感を味わいましょう！
1. Japanese Language Pack for Visual Studio Code - まずは日本語化で安心感
こんな人におすすめ:
- 英語のメニューに抵抗がある、または intimidated（萎縮して）しまう人
- 設定項目などを、母国語で直感的に理解したい人
【体験談】英語アレルギーだった私
プログラミングを始める上で最初の壁は、専門用語よりも「全部英語」なことでした。File, Edit, Selection... なんとなくは分かっても、複雑な設定をしようとすると、途端に思考が停止。「間違った場所をクリックしたらどうしよう」と、触るのが怖くなってしまいました。この拡張機能は、そんな私の不安を一番最初に解消してくれた恩人です。メニューが日本語になるだけで、精神的なハードルがぐっと下がり、「VSCodeと友達になれるかも」と思えたのです。
基本的な使い方
- VSCodeの左側にある四角いアイコン（拡張機能ビュー）をクリックします。
- 検索バーに「
Japanese Language Pack」と入力します。 - 一番上に出てくる拡張機能の「Install」ボタンをクリックします。
- インストール後、右下に表示される「Change Language and Restart」ボタンをクリックしてVSCodeを再起動します。
これだけで、VSCodeのUIがすべて日本語に切り替わります。簡単ですよね？まずはここから始めて、VSCodeに慣れていきましょう。
2. Live Server - 書いたコードが即座に動く感動体験を
こんな人におすすめ:
- HTMLやCSSを修正するたびに、手動でブラウザをリロードするのが面倒な人
- 自分が書いたコードの見た目の変化を、リアルタイムで確認したい人
【体験談】F5キーを連打していた日々からの解放
HTMLを学び始めた頃、私は見出しを一つ変えるたびにCtrl+Sでファイルを保存し、ブラウザに切り替えてF5キーで更新、という作業を繰り返していました。この単純作業が本当に面倒で...。「もっと楽な方法はないの？」とAIに泣きついたとき、真っ先に勧められたのがこのLive Serverでした。コードを保存した瞬間に、隣のブラウザが自動でスッと更新されるのを見た時、「魔法か！」と本気で感動しました。この「すぐ動く」体験が、私のプログラミング学習のモチベーションを爆上げしてくれたのです。
【コピペで体験】魔法を味わってみよう
まず、VSCodeで新しいファイルを作成し、index.htmlという名前で保存してください。そして、以下のコードをそのままコピペします。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Live Server Test</title>
<style>
body {
display: grid;
place-content: center;
height: 100vh;
margin: 0;
font-family: sans-serif;
background-color: #2d2d2d;
color: #ffffff;
}
h1 {
color: #669df6;
font-size: 3rem;
}
</style>
</head>
<body>
<h1>こんにちは、世界！</h1>
</body>
</html>
コードを貼り付けたら、エディタ上で右クリックし、「Open with Live Server」を選択するか、画面右下の「Go Live」ボタンをクリックしてください。自動的にブラウザが立ち上がり、「こんにちは、世界！」と表示されるはずです。
次に、VSCodeに戻って、<h1>タグの中のテキストを「Live Serverは最高！」のように書き換えて、ファイルを保存（Ctrl+S）してみてください。ブラウザに切り替えなくても、表示が即座に変わるはずです。これがLive Serverの力です！
気をつけるべき点
Live Serverは、HTMLファイルを開いている時に機能します。PHPなど、サーバーサイドのプログラムを動かすことはできないので注意してください。
3. Prettier - Code formatter - 誰が書いても美しいコードに
こんな人におすすめ:
- インデント（字下げ）やスペースがバラバラで、自分のコードが読みにくくなってしまう人
- コードの見た目を整える作業に時間をかけたくない人
【体験談】コードの「見た目」で消耗していた私
コードを書き始めた頃、インデントがガタガタだったり、行末のセミコロン;を忘れたり、とにかくコードの見た目が汚くて、後から読み返すのが大変でした。他人の綺麗なコードを見ては、「どうやったらこんなに整然と書けるんだろう…」と落ち込んでいました。Prettierは、そんな私を救ってくれた整形外科医のような存在です。ファイル保存時に、めちゃくちゃなコードが一瞬で美しいコードに整形される様は、まさに圧巻。コードの見た目を気にするストレスから解放され、ロジックを考えることに集中できるようになりました。
【コピペで体験】一瞬でコードが綺麗になる快感
まず、Prettierをインストールします。次に、VSCodeの設定を開き（Ctrl + ,）、検索バーに「Format On Save」と入力し、チェックを入れてください。これでファイルを保存するたびに自動でフォーマットがかかるようになります。
では、試してみましょう。新しいファイル script.js を作成し、わざと汚く書いた以下のコードをコピペしてみてください。
function hello( name ) {
console.log('こんにちは、' + name + 'さん！')
}
hello( "山田" )
この状態でファイルを保存（Ctrl+S）してみてください。一瞬で、下の綺麗なコードに整形されるはずです。
function hello(name) {
console.log("こんにちは、" + name + "さん！");
}
hello("山田");
インデント、スペース、セミコロンの有無など、細かいルールをPrettierがすべて面倒見てくれます。もうコードの見た目で悩む必要はありません。
4. Auto Rename Tag - タグの修正漏れとさようなら
こんな人におすすめ:
- HTMLの開始タグを修正したのに、閉じタグを修正し忘れて表示が崩れた経験がある人
- 単純な修正作業の時間を少しでも減らしたい人
【体験談】閉じタグを探す旅
Webサイトの構造が複雑になってくると、何十行も下にある閉じタグを探すのが本当に大変でした。「この<div>の閉じタグは、一体どこだ…？」と、画面をスクロールして探し回り、見つけたと思ったら別のタグだったり…。<h2>を<h3>に変えようとして開始タグだけ修正し、閉じタグを忘れてレイアウトが崩壊した時は、本当に泣きたくなりました。Auto Rename Tagは、そんな地味で、でも致命的なミスを防いでくれる、最高の相棒です。
【コピペで体験】ペアでの自動変更
この拡張機能はインストールするだけで有効になります。特別な設定は不要です。index.htmlなどのファイルを開き、以下のコードを試してみてください。
<div>
<p>ここにたくさんのコンテンツがあります。</p>
<p>ここにたくさんのコンテンツがあります。</p>
<p>ここにたくさんのコンテンツがあります。</p>
</div>
コードを貼り付けたら、開始タグの<div>にカーソルを合わせ、「div」の部分を「section」に書き換えてみてください。すると、離れた場所にある閉じタグ</div>も、自動的に</section>に変わるのが分かります。この小さな自動化が、開発のストレスを大きく軽減してくれます。
5. HTML CSS Support - CSSクラス名の入力ミスを防ぐ
こんな人におすすめ:
- CSSファイルで作ったクラス名を、HTMLファイルで入力する時に思い出せない、またはタイポ（入力ミス）してしまう人
- CSSとHTMLを行き来する時間を減らしたい人
【体験談】「あれ、CSSが効かない…」原因はいつもタイポだった
style.cssに.main-contents-wrapperという長くて格好いいクラス名を作ったは良いものの、index.htmlで使おうとすると、「あれ、contentsだっけ？ contentだっけ？ ハイフンはどこだっけ？」と、一瞬で記憶が曖昧に。結局、CSSファイルを見に行く羽目になり、この往復作業にうんざりしていました。CSSが効かない原因の9割は、このクラス名のタイポでした。HTML CSS Supportは、HTML側でクラス名を打ち始めると、CSSファイルから候補をサジェストしてくれるので、もうクラス名を覚える必要も、見に行く必要もなくなりました。
【コピペで体験】正確なクラス名補完
まず、プロジェクトフォルダ内に2つのファイル、index.htmlとstyle.cssを作成してください。
style.cssに、以下のコードをコピペします。
.container {
width: 80%;
margin: 0 auto;
}
.title-text {
color: #669df6;
font-size: 24px;
border-bottom: 2px solid #5f6368;
}
.description-paragraph {
line-height: 1.6;
}
次に、index.htmlに以下のコードをコピペします。この時点では、divタグにclass属性はまだありません。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>CSS Support Test</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="">
<h1 class="">テストタイトル</h1>
<p class="">これはテスト用の段落です。</p>
</div>
</body>
</html>
さあ、試してみましょう。<div class="">のダブルクォーテーションの間にカーソルを置いて、Ctrl + Spaceを押してみてください（または、cやtなど文字を打ち始めてみてください）。.container, .title-text, .description-paragraphといった候補が表示されるはずです。これで、もうクラス名を間違えることはありません。
6. Path Intellisense - ファイルパス指定の悪夢からの解放
こんな人におすすめ:
- 画像やCSS、JavaScriptファイルを読み込む際のパス指定でよく間違える人
../のような相対パスの計算が苦手な人
【体験談】画像が表示されない地獄
「よし、サイトに画像を配置しよう！」と思い、<img src="">と書いた後、地獄が始まりました。srcの中にパスを書くのですが、「./images/hero.png」なのか、「../images/hero.png」なのか、それとも「/images/hero.png」なのか…。何度も試してはブラウザで確認し、画像が表示されずに「×」印が出ているのを見てはため息をつく、というのを繰り返していました。この拡張機能は、""の中で入力を始めると、フォルダやファイル名を賢く予測して補完してくれます。パス間違いによる時間の浪費がゼロになりました。
【コピペで体験】迷わないパス入力
この拡張機能も、インストールするだけで動作します。次のようなフォルダ構成をプロジェクト内に作ってみてください。
my-project/
├── index.html
├── css/
│ └── style.css
└── images/
└── logo.png
index.htmlファイルを開き、以下のコードを貼り付けます。
<!DOCTYPE html>
<html lang="ja">
<head>
<title>Path Test</title>
<link rel="stylesheet" href="">
</head>
<body>
<img src="" alt="ロゴ画像">
</body>
</html>
まず、<link>タグのhref=""の中にカーソルを置き、「c」と入力してみてください。すぐに「css/」という候補が表示されるはずです。選択して/を入力すると、今度は「style.css」が補完されます。
次に、<img>タグのsrc=""の中でも同様に「i」と入力すれば、「images/」が補完され、簡単に正しいパスを入力できます。
7. indent-rainbow - コードの入れ子構造を虹色で可視化
こんな人におすすめ:
divの入れ子が深くなりすぎて、コードの構造が分からなくなる人- インデントがズレている箇所を視覚的に素早く見つけたい人
【体験談】インデントの迷子
HTMLやCSSを書いていると、どうしてもコードの入れ子（ネスト）が深くなりがちです。特に、閉じタグをどこに置けばいいのか分からなくなった時、インデントだけが頼りでした。しかし、すべてが同じ色だと、どこからどこまでが一つのブロックなのか判別するのが非常に困難でした。indent-rainbowは、インデントの深さに応じて色を付けてくれるので、コードの構造が一目瞭然になります。「この紫色のラインが、このブロックの範囲だな」と視覚的に把握できるため、閉じタグのミスやインデントのズレにすぐに気づけるようになりました。
【コピペで体験】カラフルなインデント
この拡張機能はインストールするだけで有効になります。以下の複雑な構造のHTMLをVSCodeにコピペしてみてください。indent-rainbowがない状態と、ある状態で見え方が全く違うことが分かるはずです。
<div class="container">
<header>
<nav>
<ul>
<li><a href="#">ホーム</a></li>
<li><a href="#">製品情報</a>
<ul>
<li><a href="#">製品A</a></li>
<li><a href="#">製品B</a></li>
</ul>
</li>
</ul>
</nav>
</header>
<main>
<section>
<p>コンテンツ</p>
</section>
</main>
</div>インストール後、エディタのインデント部分に赤、黄、青、紫といった色が付き、どこからどこまでが同じ階層のブロックなのか、直感的に理解できるようになったはずです。
8. vscode-icons - ファイルの種類を一目で判別
こんな人におすすめ:
- ファイル名だけでは、それが何のファイルか瞬時に判断できない人
- エクスプローラー（ファイル一覧）をもっと見やすく、楽しくしたい人
【体験談】ファイルを探す小さなストレス
プロジェクトが大きくなるにつれて、ファイル一覧はindex.html, style.css, script.js, package.json, README.md...と、似たような名前のテキストで埋め尽くされます。「あのJavaScriptファイルはどこだっけ？」と、毎回ファイル名を目で追って探す作業は、小さなストレスでした。この拡張機能を導入したところ、ファイル名の横にカラフルで分かりやすいアイコンが表示されるようになりました。HTMLは<>、CSSは#、JSはJSといった具体的なアイコンのおかげで、ファイルの種類を瞬時に「色」と「形」で認識できるようになり、ファイルを探す時間が大幅に短縮されました。
基本的な使い方
- 拡張機能をインストールします。
- インストール後、ダイアログが表示されたら「
VSCode Icons」を選択してファイル アイコンのテーマをアクティブにします。 - もしダイアログが出なかった場合は、
Ctrl + Shift + Pでコマンドパレットを開き、「File Icon Theme」と入力して選択し、VSCode Iconsを選びます。
これだけで、サイドバーのエクスプローラーに表示されるファイルアイコンが、見やすくリッチなものに変わります。日々の開発が少しだけ楽しくなる、素敵な拡張機能です。
9. Code Spell Checker - 恥ずかしいスペルミスを撲滅
こんな人におすすめ:
- 変数名や関数名、コメント内の英単語のスペルに自信がない人
- 「スペルミス」という、見つけにくくて恥ずかしいバグを未然に防ぎたい人
【体験談】動かない原因は、まさかのスペルミス
英語が苦手な私は、よく変数名でスペルミスをしていました。例えば「メッセージ」を意味する「message」を「mesage」と書いてしまい、それに気づかずに1時間以上も「なぜ動かないんだ…」と悩んだことがあります。この拡張機能は、Wordのように、間違ったスペルの単語の下に青い波線を引いて教えてくれます。あの1時間の苦悩は、これを最初から入れていれば一瞬で解決したのです。特に、人に見せるコードやチームで開発する際には、スペルミスは信頼性に関わるため、必須の拡張機能と言えます。
【コピペで体験】間違いを即座に発見
インストールするだけで、英語のスペルチェックが有効になります。JavaScriptファイル（script.jsなど）を開き、以下のコードをコピペしてみてください。
// This is a functoin to display a mesage.
function showMesage(text) {
const defaultMessage = "Hellow World!"; // "Hellow" is a typo.
console.log(text || defaultMessage);
}
// Caling the functoin.
showMesage("Correct spelling is important.");
コードを貼り付けると、functoin, mesage, Hellow, Caling といった間違ったスペルの下に、すぐに青い波線が表示されるはずです。波線の上にカーソルを合わせると、正しいスペルの候補も表示してくれます。これで、恥ずかしいミスとはおさらばです。
10. GitLens — Git supercharged - コードの「過去」を覗き見る
こんな人におすすめ:
- 「このコード、いつ誰が何のために書いたんだっけ？」と分からなくなることがある人
- Gitを使っている、またはこれから使おうと思っている人
- 過去の自分のコードを参考にして、新しい機能を作りたい人
【体験談】未来の自分を助けるタイムマシン
サイトの機能を一つ追加した後、1ヶ月後に見返すと、「なんでこんなコード書いたんだっけ…？」と、自分で書いたコードが全く分からなくなることが多々ありました。Gitでコミット履歴を辿れば分かるのですが、ターミナルでの操作は少し面倒でした。GitLensを導入すると、VSCode上でコードの各行にカーソルを合わせるだけで、「誰が、いつ、どんなメッセージでコミットしたか」が淡く表示されるようになります。これがまるでタイムマシンのようでした。「ああ、1ヶ月前の私は、こういう理由でこの行を追加したのか」と一瞬で思い出せるのです。バグの原因を探る時や、過去のコードを安心して削除する時など、あらゆる場面で未来の自分を助けてくれる、強力な味方です。
基本的な使い方
この拡張機能は、プロジェクトがGitで管理されている必要があります。Gitをまだ使ったことがない方は、まずGit公式サイトなどを参考に、基本的な使い方を学んでみてください。
Gitで管理されているプロジェクトをVSCodeで開くと、GitLensは自動で有効になります。
- コードの任意の行にカーソルを置いてみてください。その行を最後に変更したコミット情報（作成者、日付、コミットメッセージ）が、行末に薄く表示されます。
- そのコミット情報をクリックすると、変更内容の詳細を確認できます。
- サイドバーにもGitLensのアイコンが追加され、リポジトリの履歴やブランチの比較などを、GUIで直感的に操作できます。
初心者の方には少し高度に感じるかもしれませんが、Gitを使い始めたら、この拡張機能のありがたみがきっと分かるはずです。学習の次のステップとして、ぜひ覚えておいてください。
まとめ：拡張機能は最強のパートナー
今回は、私がプログラミング初心者の頃から愛用し、今では手放せなくなった10個の拡張機能をご紹介しました。
- Japanese Language Pack: まずは日本語化
- Live Server: リアルタイム更新で開発を楽しく
- Prettier: コードを自動で美しく整形
- Auto Rename Tag: タグの修正漏れを防止
- HTML CSS Support: CSSクラス名を楽々入力
- Path Intellisense: ファイルパス入力をミスなく
- indent-rainbow: コードの構造を視覚的に
- vscode-icons: ファイルの種類を一目で判別
- Code Spell Checker: 恥ずかしいスペルミスを撲滅
- GitLens: コードの過去と未来を繋ぐ
VSCodeは、そのままでも優れたエディタですが、拡張機能を追加することで、あなたのコーディングスタイルに合わせて無限に進化させることができます。今回紹介したものをベースに、ぜひ自分だけの最強の開発環境を構築してみてください。
拡張機能を使いこなせば、コーディングはもっとクリエイティブで、楽しい活動になります。この記事が、あなたの開発者としての一歩を力強く後押しできれば、これ以上嬉しいことはありません。
次のステップへ
VSCodeのメニューがまだ英語のままですか？この記事で一番最初に紹介した日本語化について、より詳しく知りたい方は、こちらの記事もぜひご覧ください。設定方法や、日本語化に関連する便利なTIPSをまとめています。
→ 【VSCode日本語化】メニューやUIを日本語にする方法とおすすめ設定