VS CodeでVSIXファイルをインストールする方法｜オフライン環境や独自拡張機能に

プログラミング・IT

「インターネットに接続できない環境でVS Codeの拡張機能を使いたい」
「開発チームで自作のVS Code拡張（VSIXファイル）を共有したい」
「マーケットプレイスにない拡張機能をインストールしたい」
「特定のバージョンの拡張機能を固定して使いたい」

VS Codeの拡張機能を使っていて、こんなふうに思ったことはありませんか？

そんな時に役立つのが、VSIXファイルを使った拡張機能の手動インストールです。

通常のマーケットプレイスからのインストールとは異なり、ローカルファイルから直接拡張機能を導入できる便利な方法です。

この記事では、VSIXファイルをVS Codeにインストールする方法を、基本から応用まで詳しく解説します。

スポンサーリンク

VSIXファイルとは？基本を理解しよう

VSIXファイルの基本概念

VSIX（Visual Studio Extension）ファイルは、Visual Studio Codeの拡張機能をパッケージ化したファイル形式です。

特徴詳細
ファイル形式.vsix拡張子
実体ZIP形式の圧縮ファイル
内容拡張機能のコード、設定、リソース
互換性VS Code、Visual Studio両対応

VSIXファイルを使うメリット

通常のインストール方法との比較：

方法メリットデメリット
マーケットプレイス簡単、自動更新ネット必須、公開済みのみ
VSIXファイルオフライン対応、バージョン固定可能手動管理、更新は手動

VSIXファイルが必要な場面

1. オフライン環境での開発

# セキュリティが厳しい企業環境
# インターネットアクセスが制限された開発マシン
# エアギャップ環境での開発作業

2. 独自開発の拡張機能

# 社内専用の拡張機能
# まだ公開していない開発中の拡張
# カスタマイズした既存拡張

3. バージョン固定運用

# 特定バージョンでの動作保証
# 本番環境での一貫性確保
# レガシーシステムとの互換性維持

VSIXファイルの入手方法

1. 公式マーケットプレイスからのダウンロード

手順

  1. VS Code Marketplaceにアクセス
  2. 目的の拡張機能のページを開く
  3. 右側の「Download Extension」をクリック
  4. .vsixファイルがダウンロードされる

具体例

人気拡張機能のVSIXファイル取得：

拡張機能名マーケットプレイスURL
Pythonms-python.python-*.vsix
Japanese Language Packms-ceintl.vscode-language-pack-ja-*.vsix
GitLenseamodio.gitlens-*.vsix
Prettieresbenp.prettier-vscode-*.vsix

2. GitHubリリースページから

多くの拡張機能はGitHubでソースコードを公開しており、リリースページからVSIXファイルを配布しています。

例：GitLens拡張機能の場合

# GitHubリリースページのURL例
https://github.com/gitkraken/vscode-gitlens/releases

# ダウンロードファイル例
gitlens-13.5.0.vsix

3. 自作拡張機能のビルド

開発環境でのVSIXファイル作成

# 必要なツールのインストール
npm install -g vsce

# VSIXファイルの作成
vsce package

# 出力例
my-extension-1.0.0.vsix

VSIXファイルのインストール方法

方法1：コマンドライン（ターミナル）からのインストール

最も確実で効率的な方法です。

Windows環境

# PowerShellまたはコマンドプロンプト
code --install-extension C:\Downloads\extension-name-1.0.0.vsix

# パスにスペースが含まれる場合
code --install-extension "C:\Users\User Name\Downloads\extension-name-1.0.0.vsix"

macOS環境

# ターミナル
code --install-extension ~/Downloads/extension-name-1.0.0.vsix

# 絶対パス指定
code --install-extension /Users/username/Downloads/extension-name-1.0.0.vsix

Linux環境

# bash/zsh
code --install-extension ~/Downloads/extension-name-1.0.0.vsix

# 絶対パス指定
code --install-extension /home/username/Downloads/extension-name-1.0.0.vsix

コマンドラインオプション

オプション説明使用例
--force既存拡張を強制上書きcode --install-extension file.vsix --force
--install-extension拡張機能をインストールcode --install-extension file.vsix

方法2：VS Code GUI からのインストール

視覚的でわかりやすい方法です。

詳細手順

  1. VS Codeを起動
  2. 拡張機能パネルを開く
    • 左サイドバーの拡張機能アイコン（四角いアイコン）をクリック
    • またはキーボードショートカット：Ctrl+Shift+X
  3. メニューを開く
    • 拡張機能パネル右上の「…」（その他の操作）をクリック
  4. VSIXからインストールを選択
    • ドロップダウンメニューから「VSIXからインストール…」を選択
  5. ファイルを選択
    • ファイル選択ダイアログで.vsixファイルを指定
    • 「開く」をクリック
  6. インストール完了
    • インストールが完了すると通知が表示される
    • 必要に応じてVS Codeの再起動

スクリーンショット説明

VS Code拡張機能パネル
┌─────────────────────────────┐
│ ? Marketplace で拡張機能を検索 │
├─────────────────────────────┤
│ インストール済み               │
│ ✅ Extension 1               │
│ ✅ Extension 2               │
│                           ⋮ │ ← ここをクリック
└─────────────────────────────┘
           ↓
    ┌──────────────────────┐
    │ ビューを並べ替え...     │
    │ 推奨事項を表示...      │
    │ VSIXからインストール... │ ← これを選択
    │ 拡張機能を無効にする    │
    └──────────────────────┘

方法3：ドラッグ&ドロップによるインストール

最も簡単な方法の一つです。

手順

  1. VSIXファイルをエクスプローラー（Windows）やFinder（macOS）で表示
  2. VS Codeのウィンドウに直接ドラッグ&ドロップ
  3. インストール確認ダイアログが表示される
  4. 「インストール」をクリック

インストール後の確認と管理

インストール済み拡張機能の確認

GUI での確認

  1. 拡張機能パネルを開く
  2. 「インストール済み」セクションを確認
  3. VSIXからインストールした拡張機能も表示される

コマンドラインでの確認

# インストール済み拡張機能一覧
code --list-extensions

# 詳細情報付きで表示
code --list-extensions --show-versions

# 特定の拡張機能を検索
code --list-extensions | grep "extension-name"

拡張機能の詳細情報確認

# 拡張機能の詳細表示（PowerShell/bash）
code --list-extensions --show-versions | findstr "ms-python"  # Windows
code --list-extensions --show-versions | grep "ms-python"    # macOS/Linux

VSIXファイルの更新・アンインストール

既存拡張機能の更新

同じ拡張機能の新しいバージョンをインストール

# 強制上書きでアップデート
code --install-extension new-version-2.0.0.vsix --force

# 確認メッセージ例
Installing extension 'new-version-2.0.0.vsix'...
Extension 'publisher.extension-name' v2.0.0 was successfully updated.

バージョン管理のベストプラクティス

推奨フロー：

  1. 現在のバージョンを確認
  2. 新しいVSIXファイルを準備
  3. テスト環境で動作確認
  4. 本番環境に適用

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

GUIからのアンインストール

  1. 拡張機能パネルを開く
  2. アンインストールしたい拡張機能を見つける
  3. 歯車アイコン → 「アンインストール」をクリック

コマンドラインからのアンインストール

# 拡張機能のアンインストール
code --uninstall-extension publisher.extension-name

# 例：Python拡張のアンインストール
code --uninstall-extension ms-python.python

# 複数の拡張機能を一括アンインストール
code --uninstall-extension ms-python.python --uninstall-extension ms-vscode.vscode-typescript-next

企業環境・チーム開発での活用

拡張機能の標準化

チーム用拡張機能パッケージの作成

# 推奨拡張機能リストの作成
# .vscode/extensions.json
{
  "recommendations": [
    "ms-python.python",
    "esbenp.prettier-vscode",
    "ms-vscode.vscode-typescript-next"
  ]
}

拡張機能の一括配布

PowerShellスクリプト例（Windows）：

# install-extensions.ps1
$extensions = @(
    "C:\shared\extensions\python-2023.1.0.vsix",
    "C:\shared\extensions\prettier-9.10.0.vsix",
    "C:\shared\extensions\gitlens-13.5.0.vsix"
)

foreach ($ext in $extensions) {
    Write-Host "Installing $ext..."
    code --install-extension $ext --force
}

Write-Host "All extensions installed successfully!"

Bashスクリプト例（macOS/Linux）：

#!/bin/bash
# install-extensions.sh

extensions=(
    "/shared/extensions/python-2023.1.0.vsix"
    "/shared/extensions/prettier-9.10.0.vsix"
    "/shared/extensions/gitlens-13.5.0.vsix"
)

for ext in "${extensions[@]}"; do
    echo "Installing $ext..."
    code --install-extension "$ext" --force
done

echo "All extensions installed successfully!"

セキュリティ考慮事項

VSIXファイルの検証

重要なチェックポイント：

  1. ファイルの出所確認 # ファイルのハッシュ値確認（Windows） Get-FileHash extension.vsix -Algorithm SHA256 # ファイルのハッシュ値確認（macOS/Linux） shasum -a 256 extension.vsix
  2. デジタル署名の確認 # VSIXファイルの中身確認（ZIPとして展開） unzip -l extension.vsix
  3. 内容の検証
    • package.jsonの確認
    • 不審なスクリプトの有無
    • 権限要求の確認

トラブルシューティング

よくある問題と解決法

1. インストールが失敗する

症状： VSIXファイルのインストールができない

原因と対処法：

原因エラーメッセージ解決法
ファイル破損“Invalid VSIX file”ファイルを再ダウンロード
権限不足“Permission denied”管理者権限で実行
VS Code未起動“code command not found”VS Codeのインストール確認

具体的な解決手順：

# VS Codeのパス確認
which code  # macOS/Linux
where code  # Windows

# VS CodeをPATHに追加（VS Code内から）
# Ctrl+Shift+P → "Shell Command: Install 'code' command in PATH"

# 管理者権限でのインストール（Windows）
# PowerShellを管理者として実行
code --install-extension C:\path\to\extension.vsix

2. 拡張機能が認識されない

症状： インストールは成功したが拡張機能が動作しない

解決法：

  1. VS Codeの再起動 # VS Codeを完全に終了してから再起動 # または Ctrl+Shift+P → "Developer: Reload Window"
  2. 拡張機能の有効化確認
    • 拡張機能パネルで「無効」になっていないか確認
    • 必要に応じて「有効にする」をクリック
  3. 互換性の確認 // package.json の engines フィールドを確認 { "engines": { "vscode": "^1.74.0" } }

3. 複数バージョンの競合

症状： 同じ拡張機能の異なるバージョンが競合

解決法：

# 既存バージョンをアンインストール
code --uninstall-extension publisher.extension-name

# 新しいバージョンをインストール
code --install-extension new-version.vsix

# または強制上書き
code --install-extension new-version.vsix --force

ログの確認方法

VS Codeの拡張機能ログ

  1. 開発者ツールを開く
    • Ctrl+Shift+P → “Developer: Toggle Developer Tools”
  2. Consoleタブでエラーメッセージを確認
  3. 拡張機能固有のログ確認
    • Ctrl+Shift+P → “Developer: Show Running Extensions”

コマンドラインでの詳細ログ

# 詳細ログ付きでVS Codeを起動
code --verbose --log debug

# 拡張機能インストール時の詳細ログ
code --install-extension extension.vsix --verbose

自動化とスクリプト化

CI/CDパイプラインでの活用

GitHub Actions での使用例

# .github/workflows/setup-vscode.yml
name: Setup VS Code Extensions

on:
  workflow_dispatch:

jobs:
  setup:
    runs-on: ubuntu-latest
    
    steps:
    - name: Setup VS Code
      run: |
        wget -qO- https://packages.microsoft.com/keys/microsoft.asc | gpg --dearmor > packages.microsoft.gpg
        sudo install -o root -g root -m 644 packages.microsoft.gpg /etc/apt/trusted.gpg.d/
        sudo sh -c 'echo "deb [arch=amd64,arm64,armhf signed-by=/etc/apt/trusted.gpg.d/packages.microsoft.gpg] https://packages.microsoft.com/repos/code stable main" > /etc/apt/sources.list.d/vscode.list'
        sudo apt update
        sudo apt install code
    
    - name: Install Extensions from VSIX
      run: |
        code --install-extension ./extensions/custom-extension-1.0.0.vsix
        code --install-extension ./extensions/team-extension-2.1.0.vsix

Docker環境での拡張機能セットアップ

# Dockerfile
FROM mcr.microsoft.com/vscode/devcontainers/base:ubuntu

# VS Codeの設定とVSIX拡張機能をコピー
COPY extensions/*.vsix /tmp/extensions/
COPY .devcontainer/install-extensions.sh /tmp/

# 拡張機能のインストール
RUN chmod +x /tmp/install-extensions.sh && \
    /tmp/install-extensions.sh

# install-extensions.sh
#!/bin/bash
for vsix in /tmp/extensions/*.vsix; do
    code-server --install-extension "$vsix"
done

バッチ処理での拡張機能管理

設定ファイル駆動のインストールスクリプト

// extensions-config.json
{
  "required_extensions": [
    {
      "name": "Python",
      "file": "ms-python.python-2023.1.0.vsix",
      "version": "2023.1.0"
    },
    {
      "name": "GitLens",
      "file": "eamodio.gitlens-13.5.0.vsix",
      "version": "13.5.0"
    }
  ],
  "optional_extensions": [
    {
      "name": "Prettier",
      "file": "esbenp.prettier-vscode-9.10.0.vsix",
      "version": "9.10.0"
    }
  ]
}

#!/bin/bash
# auto-install.sh - 設定ファイルベースの拡張機能インストール

CONFIG_FILE="extensions-config.json"
EXTENSIONS_DIR="./vsix-files"

# 必須拡張機能のインストール
echo "Installing required extensions..."
required_files=$(jq -r '.required_extensions[].file' "$CONFIG_FILE")

for file in $required_files; do
    full_path="$EXTENSIONS_DIR/$file"
    if [[ -f "$full_path" ]]; then
        echo "Installing $file..."
        code --install-extension "$full_path" --force
    else
        echo "Error: $full_path not found!"
        exit 1
    fi
done

# オプション拡張機能のインストール（エラーでも継続）
echo "Installing optional extensions..."
optional_files=$(jq -r '.optional_extensions[].file' "$CONFIG_FILE")

for file in $optional_files; do
    full_path="$EXTENSIONS_DIR/$file"
    if [[ -f "$full_path" ]]; then
        echo "Installing $file..."
        code --install-extension "$full_path" --force
    else
        echo "Warning: $full_path not found, skipping..."
    fi
done

echo "Extension installation completed!"

まとめ：VSIXファイルで柔軟なVS Code環境を構築しよう

VSIXファイルを使った拡張機能のインストールをマスターすることで、より柔軟で制御されたVS Code環境を構築できます。

今回学んだ重要ポイント

  1. VSIXファイルの基本: 拡張機能のパッケージファイル形式
  2. インストール方法: コマンドライン、GUI、ドラッグ&ドロップ
  3. 管理方法: 更新、アンインストール、バージョン管理
  4. 企業活用: チーム標準化、セキュリティ考慮
  5. 自動化: スクリプト化、CI/CD統合

活用シーン別まとめ

シーン推奨方法メリット
個人開発GUI インストール簡単、直感的
チーム開発スクリプト自動化標準化、効率化
企業環境バッチ処理セキュリティ、管理性
CI/CDコマンドライン自動化、再現性

Youtube

神話・歴史・伝承の解説チャンネル

スポンサーリンク

コメント

タイトルとURLをコピーしました