VSCodeでパッケージをインストールする完全ガイド｜npm・pip・拡張機能

「VSCodeでパッケージをインストールしたいけど、どうやればいいの？」
「npm installコマンドが動かない…」
「Pythonのライブラリをインストールする方法がわからない」

Visual Studio Code（VSCode）でプログラミングをしていると、さまざまな「パッケージ」をインストールする場面に遭遇します。しかし、「パッケージ」という言葉は状況によって異なる意味を持つため、初心者が混乱しやすいポイントでもあります。

この記事では、VSCodeで扱う3種類のパッケージインストール方法を、初心者にもわかりやすく詳しく解説します。

VSCodeにおける3種類の「パッケージ」

VSCodeでの「パッケージインストール」には、主に3つの意味があります。

1. VSCode拡張機能（Extensions）

VSCode自体の機能を拡張するプラグインです。

例：

• Live Server（HTMLのライブプレビュー）
• Prettier（コード整形ツール）
• Japanese Language Pack（日本語化）

インストール場所： VSCode内の拡張機能マーケットプレイスから

2. npmパッケージ（Node.js/JavaScript）

JavaScriptやTypeScriptの開発で使用する外部ライブラリです。

例：

• React（UIライブラリ）
• Express（Webサーバーフレームワーク）
• Lodash（ユーティリティライブラリ）

インストール方法： npmコマンドをターミナルで実行

3. pipパッケージ（Python）

Pythonの開発で使用する外部ライブラリです。

例：

• NumPy（数値計算ライブラリ）
• Pandas（データ分析ライブラリ）
• Requests（HTTP通信ライブラリ）

インストール方法： pipコマンドをターミナルで実行

この記事では、これら3つのパッケージインストール方法をすべて解説します。

方法1：VSCode拡張機能のインストール

VSCode拡張機能は、VSCode自体の機能を追加するためのプラグインです。

拡張機能のインストール手順

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

以下のいずれかの方法で拡張機能ビューを開きます。

• 左側のアクティビティバーにある「拡張機能」アイコン（四角が4つ並んだマーク）をクリック
• Ctrl + Shift + X（Windowsの場合）または Cmd + Shift + X（Macの場合）を押す
• メニューの「表示」→「拡張機能」を選択

手順2：拡張機能を検索

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

例：「Prettier」と入力

手順3：インストール

検索結果から目的の拡張機能を見つけて、「インストール」ボタンをクリックします。

注意点：

• 開発者名を確認しましょう（公式や信頼できる開発者のものを選ぶ）
• ダウンロード数やレビューを参考にする

手順4：必要に応じて再読み込み

一部の拡張機能は、インストール後にVSCodeの再読み込みが必要です。

右下に「Reload」や「再読み込み」ボタンが表示されたら、クリックしてください。

コマンドパレットからのインストール

拡張機能は、コマンドパレットからもインストールできます。

手順：

1. Ctrl + P（Macの場合は Cmd + P）でクイックオープンを起動
2. ext install 拡張機能名 と入力

例：ext install esbenp.prettier-vscode

3. Enterキーを押してインストール

拡張機能のアンインストール

不要になった拡張機能は簡単にアンインストールできます。

手順：

1. 拡張機能ビューを開く
2. インストール済みの拡張機能一覧を表示
3. アンインストールしたい拡張機能を見つける
4. 「アンインストール」ボタンをクリック

おすすめの拡張機能

開発言語によらず便利な拡張機能をいくつか紹介します。

Japanese Language Pack for Visual Studio Code

• VSCodeを日本語化する公式拡張機能
• 開発者：Microsoft

Prettier – Code formatter

• コードを自動整形してくれるツール
• 保存時に自動整形も可能
• 開発者：Prettier

Live Server

• HTMLファイルをリアルタイムでブラウザ表示
• 開発者：Ritwick Dey

GitLens

• Gitの履歴やコミット情報を視覚的に表示
• 開発者：GitKraken

方法2：npmパッケージのインストール（JavaScript/Node.js）

npmは、Node.jsのパッケージ管理ツールです。JavaScriptやTypeScriptの開発で外部ライブラリを使用する際に必要になります。

事前準備：Node.jsのインストール

npmを使うには、まずNode.jsをインストールする必要があります。

Node.jsのインストール手順：

1. Node.js公式サイトにアクセス
2. LTS版（長期サポート版）をダウンロード
3. インストーラーを実行し、基本的に「次へ」で進める
4. インストール完了後、VSCodeを再起動

インストール確認：

VSCodeのターミナルで以下のコマンドを実行します。

node --version

バージョン番号が表示されれば成功です（例：v20.11.1）

npm --version

こちらもバージョン番号が表示されれば、npmが使えます（例：10.2.4）

VSCode内蔵ターミナルの開き方

npmコマンドは、VSCodeの内蔵ターミナルで実行します。

ターミナルを開く方法：

• Ctrl + `（バッククォート）を押す（Windowsの場合）
• Cmd + `（Macの場合）
• メニューの「表示」→「ターミナル」を選択
• Ctrl + Shift + Pでコマンドパレットを開き、「View: Toggle Integrated Terminal」と入力

ターミナルが開くと、VSCode下部にコマンドラインが表示されます。

npmパッケージのインストール手順

基本的な流れ：

1. プロジェクトフォルダを開く
2. ターミナルを起動
3. npmコマンドでパッケージをインストール

新規プロジェクトの初期化

新しいプロジェクトを始める場合、まず初期化が必要です。

手順：

1. VSCodeで「ファイル」→「フォルダーを開く」から、プロジェクトフォルダを開く
2. ターミナルを開く
3. 以下のコマンドを実行

npm init

4. いくつか質問されますが、基本的にEnterキーを押していけばOKです

質問項目（例）：

• package name: プロジェクト名（デフォルトはフォルダ名）
• version: バージョン番号（デフォルトは1.0.0）
• description: プロジェクトの説明
• entry point: エントリーポイント（デフォルトはindex.js）
• author: 作者名

より簡単な方法：

すべてデフォルト値で作成する場合は、以下のコマンドが便利です。

npm init -y

これでpackage.jsonファイルが作成されます。

パッケージのインストールコマンド

基本構文：

npm install パッケージ名

省略形：

npm i パッケージ名

具体例：

Reactをインストールする場合：

npm install react

複数のパッケージを同時にインストール：

npm install react react-dom

インストールオプション

npmには、用途に応じたインストールオプションがあります。

1. 通常のインストール（本番環境でも必要）

npm install express

package.jsonのdependenciesに記録されます。

2. 開発環境のみで必要なパッケージ

npm install --save-dev eslint

または省略形：

npm install -D eslint

package.jsonのdevDependenciesに記録されます。

開発時のテストツールやビルドツールなどに使用します。

3. グローバルインストール

npm install -g typescript

システム全体で使えるようになります。

ただし、プロジェクトごとにインストールする方が一般的です。

パッケージの確認とアンインストール

インストール済みパッケージの一覧表示：

npm list

ローカルにインストールされたパッケージが表示されます。

グローバルパッケージの一覧：

npm list -g --depth=0

パッケージのアンインストール：

npm uninstall パッケージ名

例：

npm uninstall react

package.jsonからの一括インストール

既存のプロジェクトをクローンした場合、package.jsonに記載されたすべてのパッケージを一括でインストールできます。

手順：

1. プロジェクトフォルダを開く
2. ターミナルで以下を実行

npm install

これでpackage.jsonに記載されているすべてのパッケージがインストールされ、node_modulesフォルダが作成されます。

npmスクリプトの実行

package.jsonのscriptsセクションに定義されたコマンドを実行できます。

例：

{
  "scripts": {
    "start": "node index.js",
    "dev": "nodemon index.js",
    "test": "jest"
  }
}

実行方法：

npm run start

または、startとtestは特別なスクリプトなので、runを省略できます：

npm start

VSCode拡張機能「npm」の活用

npmコマンドをより便利に使える拡張機能があります。

npm拡張機能：

• 開発者：egamma
• 機能：package.jsonに定義されたスクリプトを簡単に実行できる

使い方：

1. 拡張機能「npm」をインストール
2. コマンドパレット（Ctrl + Shift + P）を開く
3. 「npm」と入力すると、利用可能なnpmコマンドが表示される

方法3：pipパッケージのインストール（Python）

pipは、Pythonのパッケージ管理ツールです。Pythonの外部ライブラリをインストールする際に使用します。

事前準備：Pythonのインストール

pipを使うには、まずPythonをインストールする必要があります。

Pythonのインストール手順：

1. Python公式サイトにアクセス
2. 最新の安定版をダウンロード
3. インストーラーを実行
4. 重要：「Add Python to PATH」にチェックを入れる
5. 「Install Now」をクリック

インストール確認：

VSCodeのターミナルで以下のコマンドを実行します。

python --version

または

python3 --version

バージョン番号が表示されれば成功です（例：Python 3.11.0）

pipの確認：

pip --version

または

pip3 --version

バージョン情報が表示されれば、pipが使えます。

Python拡張機能のインストール

VSCodeでPythonを快適に使うには、公式のPython拡張機能をインストールします。

手順：

1. 拡張機能ビューを開く（Ctrl + Shift + X）
2. 「Python」と検索
3. 開発者が「Microsoft」の「Python」をインストール

この拡張機能の機能：

• コード補完（IntelliSense）
• デバッグ機能
• リンター（コードチェック）
• Pythonインタープリタの選択

Pythonインタープリタの選択

VSCodeで使用するPythonのバージョンを選択します。

手順：

1. コマンドパレット（Ctrl + Shift + P）を開く
2. 「Python: Select Interpreter」と入力
3. 表示されたPythonのバージョン一覧から選択

これにより、VSCodeがどのPythonを使用するかが決まります。

pipパッケージのインストール手順

基本構文：

pip install パッケージ名

Python 3の場合、環境によってはpip3を使います：

pip3 install パッケージ名

具体例：

NumPyをインストール：

pip install numpy

複数パッケージの同時インストール：

pip install pandas matplotlib

特定バージョンのインストール

特定のバージョンを指定してインストールすることもできます。

構文：

pip install パッケージ名==バージョン

例：

pip install numpy==1.24.0

最新版にアップグレード：

pip install --upgrade パッケージ名

または省略形：

pip install -U パッケージ名

requirements.txtからの一括インストール

Pythonプロジェクトでは、requirements.txtファイルに必要なパッケージを記載するのが一般的です。

requirements.txtの例：

numpy==1.24.0
pandas==2.0.0
matplotlib>=3.5.0
requests

一括インストール：

pip install -r requirements.txt

これで、ファイルに記載されたすべてのパッケージがインストールされます。

requirements.txtの作成

現在インストールされているパッケージの一覧を出力できます。

pip freeze > requirements.txt

これにより、インストール済みのすべてのパッケージとそのバージョンがrequirements.txtに記録されます。

仮想環境（venv）の使用

Pythonプロジェクトごとに独立した環境を作ることができます。

仮想環境のメリット：

• プロジェクトごとに異なるバージョンのパッケージを使える
• システム全体のPython環境を汚さない
• 依存関係の管理が簡単

仮想環境の作成：

python -m venv venv

または

python3 -m venv venv

これでvenvという名前の仮想環境フォルダが作成されます。

仮想環境の有効化：

Windows（コマンドプロンプト）：

venv\Scripts\activate

Windows（PowerShell）：

venv\Scripts\Activate.ps1

Mac/Linux：

source venv/bin/activate

有効化すると、ターミナルのプロンプトに(venv)と表示されます。

仮想環境の無効化：

deactivate

パッケージの確認とアンインストール

インストール済みパッケージの一覧：

pip list

特定パッケージの詳細情報：

pip show パッケージ名

例：

pip show numpy

パッケージのアンインストール：

pip uninstall パッケージ名

例：

pip uninstall numpy

確認メッセージが表示されるので、yを入力してEnterを押します。

よくあるトラブルと解決方法

トラブル1：npm/pipコマンドが認識されない

症状：

'npm' は、内部コマンドまたは外部コマンド、
操作可能なプログラムまたはバッチ ファイルとして認識されていません。

または

'pip' is not recognized as an internal or external command

原因：
Node.jsまたはPythonがインストールされていないか、環境変数のPATHが設定されていません。

解決方法：

1. Node.jsまたはPythonを再インストール

• インストール時に「Add to PATH」オプションにチェックを入れる

1. VSCodeを再起動
2. それでも解決しない場合、環境変数を手動で設定

Windowsで環境変数を設定する手順：

1. 「システム環境変数の編集」を検索して開く
2. 「環境変数」ボタンをクリック
3. 「システム環境変数」の「Path」を選択して「編集」
4. Node.jsまたはPythonのインストールパスを追加

トラブル2：PowerShellでスクリプト実行がブロックされる（Windows）

症状：

このシステムではスクリプトの実行が無効になっているため、
ファイル ～ を読み込めません。

原因：
PowerShellのセキュリティポリシーがスクリプト実行を制限しています。

解決方法：

1. PowerShellを管理者として実行
2. 以下のコマンドを実行

Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser

3. 確認メッセージでYを入力
4. VSCodeを再起動

トラブル3：VSCodeのターミナルでnpm/pipが動かない

原因：
VSCodeが古いターミナルセッションを使っている可能性があります。

解決方法：

1. ターミナルを閉じる（ゴミ箱アイコンをクリック）
2. 新しいターミナルを開く（Ctrl + `）
3. それでも解決しない場合、VSCode自体を再起動

トラブル4：パッケージのインストールは成功するが、importできない（Python）

原因：
VSCodeが選択しているPythonインタープリタと、実際にパッケージをインストールしたPythonが異なります。

解決方法：

1. コマンドパレット（Ctrl + Shift + P）を開く
2. 「Python: Select Interpreter」を実行
3. パッケージをインストールしたPython環境を選択
4. VSCodeをリロード

トラブル5：node_modulesフォルダが巨大になる

原因：
npmは依存関係を含めてすべてのパッケージをダウンロードするため、フォルダサイズが大きくなります。

対策：

1. node_modulesフォルダはGitで管理しない

• .gitignoreにnode_modules/を追加

1. 不要なパッケージは定期的にアンインストール
2. 必要に応じてnpm installで再生成できる

トラブル6：pipでインストールしたパッケージが見つからない

原因：
複数のPythonバージョンがインストールされていて、間違ったPythonにインストールされています。

解決方法：

Python 3を明示的に指定してインストール：

python3 -m pip install パッケージ名

または、VSCodeで選択しているPythonを使用：

python -m pip install パッケージ名

まとめ

VSCodeでのパッケージインストール方法について解説しました。

重要なポイントをおさらいします：

VSCode拡張機能：

• VSCode自体の機能を拡張
• 拡張機能ビュー（Ctrl + Shift + X）からインストール
• 日本語化、コード整形、ライブプレビューなどが可能

npmパッケージ（JavaScript/Node.js）：

• Node.jsのインストールが必要
• npm install パッケージ名でインストール
• package.jsonでパッケージを管理
• プロジェクトフォルダでnpm installを実行

pipパッケージ（Python）：

• Pythonのインストールが必要（PATH設定を忘れずに）
• pip install パッケージ名でインストール
• requirements.txtでパッケージを管理
• 仮想環境（venv）の使用を推奨

共通のポイント：

• VSCodeの内蔵ターミナル（Ctrl + `）を使う
• パッケージ管理ファイル（package.json、requirements.txt）を活用
• 環境変数のPATH設定が重要
• トラブル時は、ターミナルやVSCodeの再起動を試す

これらの方法をマスターすれば、VSCodeでの開発がさらに効率的になります。

プロジェクトに必要なパッケージをインストールして、快適な開発環境を構築してください！