VSCodeの拡張機能が多すぎて、何を入れたらいいかわからない…。
そんな初心者の方に向けて、本当に使える拡張機能だけを15個厳選しました。
「とりあえず全部入れよう」は逆効果です。入れすぎるとVSCodeが重くなります。必要なものだけを入れましょう。
私は最初30個以上入れて重くなりました…。今は厳選した15個で快適に使っています！
拡張機能のインストール方法
まず拡張機能の入れ方を確認しましょう。
拡張機能パネルを開く
サイドバーの四角いアイコンをクリック、または `⌘ + Shift + X`（Mac）/ `Ctrl + Shift + X`（Windows）で拡張機能パネルを開きます。
検索して見つける
検索欄に拡張機能の名前を入力します。
インストール
「Install」ボタンをクリックするだけです。
【必須】全員が入れるべき拡張機能5選
1. Japanese Language Pack for VS Code
VSCodeを日本語化する拡張機能です。初期状態では英語なので、まずこれを入れましょう。
Japanese Language Pack
| 機能 | VSCodeのメニューを日本語化 |
|---|---|
| 開発元 | Microsoft |
| DL数 | 1,000万以上 |
| 必須度 | ★★★★★ |
2. Prettier – Code Formatter
コードを自動でキレイに整形してくれます。インデントや改行を自動で揃えてくれるので、見やすいコードが書けます。
Prettier
| 機能 | コードの自動整形 |
|---|---|
| 対応言語 | HTML, CSS, JavaScript, TypeScript, JSON等 |
| 開発元 | Prettier |
| 必須度 | ★★★★★ |
保存時に自動で整形する設定がおすすめです：
{
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode"
}
3. Live Server
HTMLファイルをローカルサーバーで表示し、保存するたびにブラウザが自動リロードされます。
Web制作の学習には必須の拡張機能です。
Live Server
| 機能 | ローカルサーバー起動・自動リロード |
|---|---|
| 使い方 | HTMLファイルを右クリック →「Open with Live Server」 |
| 開発元 | Ritwick Dey |
| 必須度 | ★★★★★ |
4. ESLint
JavaScriptやTypeScriptのコードの問題点を自動で指摘してくれます。変数の未使用、セミコロンの有無なども教えてくれます。
5. GitLens
Gitの履歴をVSCode上で視覚的に確認できる拡張機能です。誰が・いつ・どんな変更をしたかが一目でわかります。
GitLensを入れると、各行の横に「誰がいつ変更したか」が表示されるようになります！
【Web制作向け】HTML/CSS学習者におすすめ
6. Auto Rename Tag
HTMLの開始タグを変更すると、閉じタグも自動で変更されます。タグの変更ミスがなくなります。
7. CSS Peek
HTMLファイルからCSSの定義にジャンプできます。「このクラスのスタイルどこだっけ？」を解決。
8. HTML CSS Support
CSSのクラス名をHTMLファイルで自動補完してくれます。クラス名のタイプミスを防げます。
9. Color Highlight
CSSのカラーコードに実際の色をプレビュー表示してくれます。#ff6b6b がどんな色か、コード上ですぐにわかります。
【効率アップ】開発全般で便利な拡張機能
10. Path Intellisense
ファイルパスを自動補完してくれます。画像パスやimportのパスを手打ちする必要がなくなります。
11. Bracket Pair Colorization（内蔵機能）
カッコの対応を色分け表示してくれます。
以前は拡張機能でしたが、現在はVSCode内蔵です。設定で有効にしましょう：
{
"editor.bracketPairColorization.enabled": true,
"editor.guides.bracketPairs": true
}
12. indent-rainbow
インデントを色分け表示してくれます。Pythonのようにインデントが重要な言語では特に便利。
13. Error Lens
エラーメッセージを行の横にインライン表示してくれます。わざわざホバーしなくてもエラーが見えます。
Error Lensを入れるとエラーが一目瞭然になります。初心者には特におすすめ！
【見た目】テーマ・アイコン系
14. Material Icon Theme
ファイルの種類に応じたわかりやすいアイコンを表示してくれます。HTMLファイル、CSSファイル、画像ファイルなどが一目で区別できます。
15. One Dark Pro（テーマ）
Atomエディタで人気だったダークテーマです。目に優しく、長時間のコーディングに向いています。
もちろんテーマは好みで選んでOKです。
入れないほうがいい拡張機能
- 注意：入れすぎに注意
-
- すでにVSCode内蔵の機能と重複する拡張機能
- 長期間メンテされていない拡張機能
- 機能が被る拡張機能（整形系を2つ入れるなど）
拡張機能は定期的に見直して、使っていないものはアンインストールしましょう。
拡張機能を使いこなしてスキルアップしたいなら
拡張機能を入れるとVSCodeがさらに便利になりますが、プログラミングスキルそのものを伸ばすことが最も重要です。
- 関連記事
-
- [VSCodeの波線の意味と消し方](/blog/423/)
- [VSCodeのターミナルの開き方・使い方](/blog/3406/)
- [VSCodeで画面を拡大＆縮小するショートカット](/blog/584/)
- [VSCodeのsettings.jsonの場所と開き方](/blog/2352/)
VSCodeをもっと使いこなしたいなら
独学で限界を感じていませんか？プロのカリキュラムなら最短でスキルが身につきます。
※無料体験・無料カウンセリングあり
まとめ：まずは必須の5つから入れてみよう
今回は、VSCode初心者におすすめの拡張機能15選を紹介しました。
- まずはこの5つを入れよう
-
- Japanese Language Pack（日本語化）
- Prettier（コード整形）
- Live Server（自動リロード）
- ESLint（エラー検出）
- GitLens（Git履歴表示）
一気に全部入れるのではなく、必要になった時に追加するのがポイントです。
拡張機能を味方につけて、快適なVSCodeライフを送りましょう！
コメント