Visual Studio Code拡張機能をMarketplaceに公開する手順まとめ

1. はじめに

Visual Studio Code の拡張機能は、公式の Marketplace で公開することで、世界中のユーザーにインストールしてもらうことができます。
この記事では、拡張機能の作成〜公開までの一連の流れを、実際に私が開発した「ConcatCodes」という拡張機能を例に紹介します。

---

2. 開発環境の準備

✅ 必要なもの

ツール	バージョン例	備考
Node.js	v18 以上	npm 同梱
TypeScript	^5.x	npm install -g typescript
vsce CLI	@vscode/vsce	拡張機能パッケージ＆公開ツール

bashコピーする編集するnpm install -g @vscode/vsce typescript

---

3. 拡張機能の実装（簡易テンプレ）

プロジェクト構成（最低限）：

pgsqlコピーする編集するConcatCodes/
├── dist/extension.js      ← ビルド成果物
├── src/extension.ts       ← メイン実装
├── package.json           ← メタ情報
├── tsconfig.json
├── LICENSE
└── README.md

package.json の重要項目

jsonコピーする編集する{
  "name": "concatcodes",
  "publisher": "xxxxxxxxxxx", // Marketplace登録済みのpublisher名
  "main": "./dist/extension.js",
  "engines": { "vscode": "^1.80.0" },
  "license": "MIT",
  "repository": {
    "type": "git",
    "url": "https://github.com/yyyyyyyyyyyy" // Gitのリポジトリを指定
  }
}

---

4. Marketplace用アカウントの登録

✅ 手順

1. Marketplace 管理ページ にアクセス
2. Microsoft アカウントでログイン
3. 「Create Publisher」から Publisher ID を作成
4. Publisher名は拡張機能の package.json にも記述する

---

5. 拡張機能を vsce でパッケージ＆公開

✅ ① Personal Access Token (PAT) の作成

1. Azure DevOps にアクセス
2. 右上のユーザーアイコン → "Personal Access Tokens"
3. + New Token → スコープで Marketplace > Publish にチェック
4. コピーしたトークンを保存（再表示不可）

---

✅ ② vsce でログイン＆公開

bashコピーする編集するvsce loginxxxxxxxxxxx
# → PAT を貼り付けて Enter

vsce publish
# または
vsce publish patch  # バージョンを自動で 0.0.x → 0.0.x+1 に更新

---

6. 公開後のチェックポイント

内容	URL例
一般向けマーケットページ	https://marketplace.visualstudio.com/items?itemName=kiseeeen.concatcodes
管理用ページ	https://marketplace.visualstudio.com/manage/publishers/kiseeeen/extensions/concatcodes/hub

Marketplace に反映されるまでに 数分かかることがあります。

---

7. よくあるトラブルと解決策

エラー内容	対処方法
TF400813: not authorized	PATのスコープが正しいか、Publisherと一致しているかを確認
your-name と表示される	package.json の "publisher" が正しく設定されているか確認
LICENSE not found	プロジェクトルートに LICENSE ファイルを追加（MITなど）
Git working directory not clean	git commit するか、手動でバージョンを上げる

---

8. 補足：GitHub公開向けファイル構成例

ファイル名	用途
README.md	機能説明、インストール、使い方など
LICENSE	MITなど、必須
.gitignore	node_modules, *.vsix などを除外
CONTRIBUTING.md	貢献ルールを明記（任意）

---

🎉 まとめ

Visual Studio Code拡張機能は、ローカルでの開発だけでなく、Marketplace に公開して他の開発者と共有することで、より多くの人に価値を提供できます。

「ConcatCodes」のように小さく実用的な拡張機能から始めて、ぜひあなたのスキルを世界に発信してみてください！