vsceコマンドで、自作VS Code拡張をMarketplaceに公開する

はじめに

「せつ菜ちゃんの方が大事なの！？」¹、nikkieです😱

先日、新しい概念を最小限にした、自作VS Code拡張の公開手順を共有しました。

今回はその続編、vsceコマンドだけで拡張を公開する手順をアウトプットします。

はじめに
目次
前提
- 動作環境
拡張公開するためのvsceサブコマンド
vsce loginで必要なPersonal Access Token
- Azure DevOpsで組織（organization）を作る
- Azure DevOpsの組織でPersonal Access Tokenを作る
知っていると便利かもなvsceサブコマンド
終わりに

前提

新しい概念を最小限にした手順は実施済み（vsixファイルは作れる状態）とします。
つまり

vsceコマンドをインストール済み
Visual Studio Code Marketplaceにpublisherを作成済み
- リンクは https://marketplace.visualstudio.com/manage

とします。

新しい概念を最小限にした手順では、Webブラウザを操作してvsixファイルをアップロードして公開しました。
今回は、Webブラウザでアップロードする代わりにvsceコマンドだけで拡張を公開します。

動作環境

node v16.14.2
npm 8.5.0
vsce 2.11.0

拡張公開するためのvsceサブコマンド

コマンドとしては、以下の3つを順番に実行することになります。

# vsixファイル作成（新しい概念を最小限にした手順でも使用）
vsce package
# publisherのリストに<publisher name>を追加
vsce login <publisher name>
# 拡張公開（アップロードして公開されます）
vsce publish

ただしvsce loginにはPersonal Access Tokenの入力が必要です。

`vsce login`で必要なPersonal Access Token

Publishing Extensionsのドキュメントを参照しましょう。

「Get a Personal Access Token」で方法が紹介されています。

Azure DevOpsで組織（organization）を作る
Azure DevOpsの組織でPersonal Access Tokenを作る

Azure DevOpsで組織（organization）を作る

Publishing Extensionsの「Get a Personal Access Token」から案内された、以下のドキュメントを参照しました。

https://go.microsoft.com/fwlink/?LinkId=307137 からサインイン
組織（organization）だけを作ります

組織everlasting-diaryを作りました（https://dev.azure.com/everlasting-diary/）。

サインインにあたっては、Visual Studio Code Marketplaceにpublisherを作るのに使ったのと同じマイクロソフトアカウントを使う必要があります²。

組織を作った後にプロジェクトの作成が案内されますが（Create a project to get started）、VS Code拡張の公開にあたってはプロジェクトは必須ではないようです。
私は必須なものだけを作る主義³なので、Azure DevOpsのプロジェクトは作らずに進めました。

Azure DevOpsの組織でPersonal Access Tokenを作る

再びPublishing Extensionsの「Get a Personal Access Token」を参照しましょう（スクリーンショットも豊富です）。

右上「User settings」（人と小さい歯車アイコン）の中の「Personal access tokens」から作ります（画像は「Get a Personal Access Token」をどうぞ）。

設定項目（画像は「Get a Personal Access Token」をどうぞ）

Name
Organization
- Publishing Extensionsのドキュメントでは、All accessible organizations（アクセス可能な全組織）の設定が案内される
- nikkieの場合は、組織everlasting-diaryを指定して問題なく動いている
  - 権限は可能な限り狭くしたい派
  - 組織は1つだけなので、複数組織を持っているなら「All accessible organizations」を選ぶべきなのかもしれません
オプショナル：Expiration（トークンの有効期限）を延ばす
Scopes
- 「Custom defined」を選択する
- 左下に「Show all scopes」が表示されていたらクリック（「Show less scopes」に表示が変わる）
- MarketplaceのManageだけを選択
  - ブラウザの検索機能でMarketplaceを探しました

以上の設定で作成したPersonal Access Tokenをコピーして控えます。
これをvsce login <publisher name>で使うのです！

Expiration（トークンの有効期限）に達したらメールで通知されます。
私はそのトークンをEditして有効期限を延ばしています⁴。

知っていると便利かもな`vsce`サブコマンド

拡張公開自体はpackage・login・publishでできます。
これら以外で私が使うサブコマンドを共有します。

# publisherのリストから<publisher name>を削除
vsce logout <publisher name>

# publisherのリストを表示
# （publisherのリストは vsce login / logout で変更される）
vsce ls-publishers

Publishing Extensionsのドキュメントでは、他のサブコマンドも紹介されます：

vsce publishはバージョンの自動インクリメントも担ってくれます（使いこなしたい！）
- ref: 「Auto-incrementing the extension version」（Publishing Extensions）
vsce unpublish (publisher name).(extension name)で公開取り下げ（unpublish）ができるそうです
- ref: 「Unpublishing extensions」（（Publishing Extensions））
- 執筆時点で未検証ですが、Visual Studio Code Marketplaceのmanagement pageで拡張の行を右クリックしてAvailabilityをUnpublishedにする（※前回のエントリで言及）のと同じ操作と理解しました

終わりに

vsceコマンドでVS Code拡張を公開する方法を共有しました。
VS Code拡張公開まわりの概念に慣れたら、vsceコマンドを使ってCLI操作で拡張公開していきましょう！

ここで紹介した手順で公開した自作拡張はこちらです🎀

コマンドで拡張公開の先は自動化かなと思います。
公開の自動化についても以下のドキュメントでCIツールとその例がいくつか紹介されています（GitHub Actionsなど）。

タグを打ったことを契機に、そのバージョンの拡張が公開されたらとてもいい感じですよね。
CIツールを使った公開の自動化、取り組んでみて知見を得たらアウトプットしてみます（結構素振りが必要そう）

こちら、大好きです。
できる女の「さしすせそ」

さ『さすが〜』
し『しらなかった〜』
す『すご〜い』
せ『せつ菜ちゃんの方が大事なの！？』
そ『そうなんだ〜』
— てんわん (@Tenshi_Shitsuzi) 2022年10月8日
↩
You need to login in with the same Microsoft account you used to create the Personal Access Token in the previous section. ref: Publishing Extensionsの「Create a publisher」↩
こちらで表明しています：「あってもなくても同じなら捨てる」という片付けの考え方が（こんまりメソッドと）プログラミングに通じていました - nikkie-ftnextの日記 ↩
ここで紹介したコマンドをGitHub Actionsで実行する場合は、トークンの有効期限の扱いはより適切な方法があるかもしれません（アイデアがある方は共有いただけると大変助かります）↩