VS Codeの拡張機能の入れ方｜初めての人でもすぐわかる簡単手順

プログラミング・IT

2025.07.10

VS Codeを初めて使う人から、よくこんな質問をいただきます。

「VS Codeをインストールしたけど、機能が足りない気がする」
「PythonやJavaScriptの開発に必要な拡張機能ってどこから入れるの？」
「そもそも拡張機能って何？」

実は、VS Codeの真の力は**拡張機能（Extension）**にあります。拡張機能を追加することで、VS Codeは普通のテキストエディタから、プロ仕様の開発環境に変身します。

この記事では、VS Codeで拡張機能をインストールする方法を初心者にもわかりやすく解説します。記事を読み終わる頃には、自分好みのVS Code環境を構築できるようになるでしょう。

拡張機能とは？基本知識
1. 拡張機能でできること
2. なぜ拡張機能が必要なの？
VS Codeで拡張機能をインストールする手順
インストール後の設定と使い方
1. 拡張機能が正しくインストールされたか確認
2. 拡張機能の設定を変更する
初心者におすすめの拡張機能
1. プログラミング言語別
2. テーマ・見た目
拡張機能管理のコツ
よくある問題と対処法
拡張機能選びのポイント
1. 信頼できる拡張機能の見分け方
まとめ

拡張機能とは？基本知識

拡張機能でできること

VS Codeの拡張機能を使うと、以下のようなことができるようになります：

プログラミング言語のサポート: Python、JavaScript、Java等の構文ハイライト
コード補完: 変数名や関数名の自動補完
デバッグ機能: エラーの原因を簡単に見つける
テーマ変更: エディタの見た目をカスタマイズ
Git連携: バージョン管理をより便利に

なぜ拡張機能が必要なの？

VS Code本体は軽量で高速ですが、最初から全ての機能を含んでいません。必要な機能だけを拡張機能として追加することで、自分の開発スタイルに合った環境を作れます。

VS Codeで拡張機能をインストールする手順

方法1: 拡張機能ビューから（おすすめ）

最も基本的で簡単な方法です。

手順1: 拡張機能ビューを開く

VS Codeを起動したら、左側のサイドバーにある四角が4つ集まったアイコンをクリックします。このアイコンが拡張機能ビュー（Extensions）への入り口です。

手順2: 拡張機能を検索する

画面上部の検索ボックスに、インストールしたい拡張機能の名前を入力します。

人気の拡張機能例:

Python – Python開発に必須
Prettier – コードの自動整形
Japanese Language Pack – VS Codeの日本語化
Live Server – Webページのライブプレビュー
GitLens – Git機能の拡張

手順3: インストールする

検索結果に表示された拡張機能の中から、目的のものを見つけて**「Install」ボタン**をクリックします。

インストールが完了すると、ボタンが「Installed」に変わります。これで拡張機能の追加は完了です。

方法2: コマンドパレットから

キーボード操作が好きな人におすすめの方法です。

手順

Ctrl + Shift + P（Macは Cmd + Shift + P）を押す
Extensions: Install Extensionsと入力
Enterキーを押すと拡張機能ビューが開く
あとは方法1と同じ手順でインストール

方法3: VS Code Marketplaceから

ブラウザで拡張機能を探してからインストールする方法です。

手順

ブラウザで VS Code Marketplace を開く
欲しい拡張機能を検索
拡張機能のページで「Install」ボタンをクリック
VS Codeが自動で起動してインストールが始まる

この方法は、拡張機能の詳細な説明や評価を確認してからインストールしたい場合に便利です。

インストール後の設定と使い方

拡張機能が正しくインストールされたか確認

インストール後は、以下の方法で確認できます：

拡張機能ビューの「Installed」タブを開く
インストールした拡張機能が一覧に表示される
拡張機能名の横に「歯車アイコン」があれば正常にインストール完了

拡張機能の設定を変更する

多くの拡張機能は、インストール直後から使えますが、より便利に使うために設定を調整できます。

設定画面の開き方

Ctrl + ,（Macは Cmd + ,）で設定画面を開く
検索欄に拡張機能名を入力
該当する設定項目を調整

拡張機能個別の設定

拡張機能ビューで該当の拡張機能を選択し、「歯車アイコン」から「Extension Settings」を選ぶと、その拡張機能専用の設定画面が開きます。

初心者におすすめの拡張機能

プログラミング言語別

Python開発

Python: Python言語の基本サポート
Pylance: より高度なコード補完とエラーチェック

JavaScript/Web開発

ES7+ React/Redux/React-Native snippets: React開発用のコードスニペット
Auto Rename Tag: HTMLタグの自動リネーム
Live Server: ローカルサーバーでWebページをプレビュー

汎用的に便利

Japanese Language Pack for Visual Studio Code: VS Codeの日本語化
Prettier – Code formatter: コードの自動整形
GitLens — Git supercharged: Git機能の大幅拡張
Bracket Pair Colorizer: 対応する括弧を色分け

テーマ・見た目

One Dark Pro: 人気のダークテーマ
Material Icon Theme: ファイルアイコンをわかりやすく
Dracula Official: 目に優しいダークテーマ

拡張機能管理のコツ

不要な拡張機能をアンインストール

使わなくなった拡張機能は、VS Codeの動作を重くする原因になります。

アンインストール手順

拡張機能ビューを開く
削除したい拡張機能を見つける
「歯車アイコン」をクリック
「Uninstall」を選択

拡張機能の有効/無効切り替え

プロジェクトによって使う拡張機能を変えたい場合は、一時的に無効にできます。

無効化手順

拡張機能ビューで該当の拡張機能を選択
「Disable」ボタンをクリック
再度有効にしたい場合は「Enable」をクリック

ワークスペース固有の拡張機能

特定のプロジェクトでのみ使いたい拡張機能は、ワークスペース単位で管理できます。

設定方法

プロジェクトフォルダを開いた状態で拡張機能をインストール
「歯車アイコン」から「Enable (Workspace)」を選択
そのプロジェクトでのみ拡張機能が有効になる

よくある問題と対処法

拡張機能がインストールできない

原因と対処法

ネットワーク接続の問題

インターネット接続を確認
会社のファイアウォール設定を確認

VS Codeのバージョンが古い

VS Codeを最新版にアップデート
拡張機能の対応バージョンを確認

拡張機能が動作しない

確認すべきポイント

拡張機能が有効になっているか確認
VS Codeの再起動を試す
拡張機能の設定を確認
他の拡張機能との競合がないかチェック

VS Codeが重くなった

拡張機能を多数インストールすると、VS Codeの起動や動作が遅くなることがあります。

対処法

使わない拡張機能をアンインストール
必要に応じて拡張機能を無効化
VS Codeの設定を最適化

拡張機能選びのポイント

信頼できる拡張機能の見分け方

VS Code Marketplaceには数多くの拡張機能がありますが、以下のポイントで品質を判断できます：

チェックポイント

ダウンロード数: 多くの人に使われているか
評価（星の数）: ユーザーからの評価が高いか
最終更新日: 定期的にメンテナンスされているか
作者の信頼性: Microsoft公式やよく知られた開発者か

避けるべき拡張機能

長期間更新されていない
評価が極端に低い
説明が不十分
作者の情報が不明確

まとめ

VS Codeの拡張機能のインストールは、以下の簡単な手順で行えます：

拡張機能ビューを開く（左のサイドバーの四角アイコン）
検索して「Install」をクリック
必要に応じて設定をカスタマイズ