【VSCode】プロジェクト限定で拡張機能を管理する方法 - extensions.jsonとワークスペース設定

VSCode ではプロジェクト（ワークスペース）単位で拡張機能を管理できます。チームで開発環境を統一したい場合や、プロジェクトによって使う拡張機能を切り替えたい場合に便利です。

この記事では、.vscode/extensions.json による推奨設定と、ワークスペース単位での有効/無効の切り替え方法を解説します。

2つの管理方法

VSCode でプロジェクト限定の拡張機能管理を行う方法は、大きく分けて2つあります。

方法	用途	設定ファイル
extensions.json	チームへの推奨・共有	.vscode/extensions.json
ワークスペース有効/無効	個人の環境切り替え	.vscode/settings.json

方法1: extensions.json で推奨拡張機能を定義する

extensions.json とは

.vscode/extensions.json は、プロジェクトで推奨する拡張機能のリストを定義するファイルです。Git でリポジトリに含めることで、チームメンバー全員に同じ拡張機能を推奨できます。

ファイルの作成

プロジェクトルートに .vscode/extensions.json を作成します。

{
  "recommendations": [
    "dbaeumer.vscode-eslint",
    "esbenp.prettier-vscode",
    "bradlc.vscode-tailwindcss"
  ],
  "unwantedRecommendations": []
}

• recommendations — 推奨する拡張機能の ID リスト
• unwantedRecommendations — 推奨しない拡張機能の ID リスト

推奨のポップアップ

extensions.json を含むプロジェクトを VSCode で開くと、未インストールの推奨拡張機能がある場合にポップアップが表示されます。

コマンドパレットから一括確認

ポップアップを見逃した場合でも、コマンドパレットから確認できます。

unwantedRecommendations の活用

特定の拡張機能をプロジェクトで使わせたくない場合、unwantedRecommendations に追加します。

{
  "recommendations": [
    "dbaeumer.vscode-eslint"
  ],
  "unwantedRecommendations": [
    "hookyqr.beautify"
  ]
}

この設定により、hookyqr.beautify は推奨一覧に表示されなくなります。Prettier と Beautify の競合を防ぐような場面で有効です。

方法2: ワークスペース単位で拡張機能を有効/無効にする

UI からの操作

グローバルにインストール済みの拡張機能を、特定のワークスペースだけで有効/無効にできます。

この設定は .vscode/settings.json に保存されます。

settings.json での管理

ワークスペース単位の有効/無効は、settings.json で直接管理することもできます。

{
  "extensions.disabled": [
    "ms-python.python"
  ]
}

方法の使い分け

実践例: Vue.js プロジェクトの設定

Vue.js プロジェクトでの extensions.json の例を示します。

{
  "recommendations": [
    "Vue.volar",
    "dbaeumer.vscode-eslint",
    "esbenp.prettier-vscode",
    "vuetifyjs.vuetify-vscode",
    "syler.sass-indented",
    "netlify.netlify"
  ],
  "unwantedRecommendations": []
}

各拡張機能の役割は以下のとおりです。

拡張機能 ID	役割
Vue.volar	Vue の言語サポート（シンタックスハイライト、型チェック）
dbaeumer.vscode-eslint	ESLint によるコード品質チェック
esbenp.prettier-vscode	コードの自動フォーマット
vuetifyjs.vuetify-vscode	Vuetify のスニペット・自動補完
syler.sass-indented	Sass/SCSS のシンタックスサポート
netlify.netlify	Netlify デプロイ連携

よくある間違い

recommendations に追加しただけでは動かない

extensions.json に拡張機能を追加しても、自動インストールはされません。チームメンバーには「コマンドパレット → Show Recommended Extensions からインストールしてください」と伝える必要があります。

拡張機能 ID を間違える

拡張機能名ではなく、拡張機能 ID（publisher.extensionName 形式）を記載する必要があります。

{
  "recommendations": [
    "ESLint",
    "dbaeumer.vscode-eslint"
  ]
}

上記の "ESLint" は ID ではないため認識されません。正しくは "dbaeumer.vscode-eslint" です。

まとめ

参考文献

• Extension Marketplace - Visual Studio Code
• Workspace Trust - Visual Studio Code