VSCodeのExtensionを作成したら(こちらの記事参照)、次のステップはMarketPlaceにリリースですね。リリースまでの対応についてまとめたので参考にしてください。
VS Codeの拡張機能をマーケットプレイスにリリースするには、以下の手順で行いました。これには、拡張機能のパッケージ化、Visual Studio Code Publisherの設定、拡張機能の公開などが含まれます。
転載元
当記事は以下ブログからの転載です。
TECH BACK
Azure DevOpsアカウントの作成とPublisherの登録
アカウント作成
そのままプロジェクトを作成してしまいましょう。
プロジェクト作成
適当なProject name・Description(プロジェクトの説明)を入力します。VisibilityはPrivateが良いでしょう。入力が終わったら、Create projectをクリックして作成してください。
次は、Publisherの登録を行います。
Publisher登録
にアクセスしてPublish extensionsから登録していきます。
Nameは適当なものを、IDはユニークなものを設定したらよいでしょう。
Create publisherからPublisherの登録を行っておいてください。
VSCEのインストール
VSCE(Visual Studio Code Extension Manager)は、VSCodeのExtensionをパッケージングし、MarketPlaceに公開するためのツールです。
Node.jsとnpmのインストール
Node.jsとnpmがインストールされていることを確認します。インストールされていない場合は、Node.jsの公式サイトからインストールします。
vsce(Visual Studio Code Extension Manager)のインストール
下記をターミナルから実行します。
npm install -g vsce
このように表示されるはずです。
% npm install -g vsce
npm WARN deprecated vsce@2.15.0: vsce has been renamed to @vscode/vsce. Install using @vscode/vsce instead.
added 112 packages in 4s
35 packages are looking for funding
run `npm fund` for details
パーソナルアクセストークンの生成
まず、Azure DevOpsのパーソナルアクセストークン(PAT)を生成します。これは拡張機能を公開するために必要です。
Azure DevOpsの個人用アクセストークンページにアクセスします。
必要な箇所を入力していくのですが、Scopesは注意が必要です。発行するTokenに必要以上の権限を与えてしまうのは避けなければなりません。
今回の用途であれば、Scopesの箇所でCustom definedにチェックを入れてMarketplaceのPublishとManageにチェックが入っていればOKです。
生成すると、tokenが発行されますので安全な場所に保存しておいてください。
取得したパーソナルアクセストークンを使用してvsceにログイン
下記コマンドでvsceにログインしておきます。
vsce login <your-publisher-name>
成功すると下記のようになります。
vsce login <your-publisher-name>
(node:51936) [DEP0040] DeprecationWarning: The `punycode` module is deprecated. Please use a userland alternative instead.
(Use `node --trace-deprecation ...` to show where the warning was created)
https://marketplace.visualstudio.com/manage/publishers/
Personal Access Token for publisher '<your-publisher-name>': ****************************************************
The Personal Access Token verification succeeded for the publisher '<your-publisher-name>'.
パッケージの準備
Extensionのコードがすべて準備できたら、パッケージングを行います。プロジェクトのルートディレクトリで以下のコマンドを実行します。
vsce package
これで、<extension-name>-<version>.vsix
というファイルが生成されます。
ここで準備不足がいくつか有ったのでご紹介。。。
READMEをちゃんと作ろうね
READMEを作っていないと、こんなのが出ます。作って再度パッケージング
Marketplaceで表示されるのはこのREADMEになりますので、ちゃんと作っておきましょう。
ERROR Make sure to edit the README.md file before you package or publish your extension.
Remote RepositoryのURLは??
package.jsonにrepositoryのURLを記載することができるんですが、コレが無いよと。
WARNING A 'repository' field is missing from the 'package.json' manifest file.
Do you want to continue? [y/N]
もちろんなしでOKなのでなしで進めていたんですが、後々GithubにPublicで登録してURLありでパッケージングし直しました。
READMEに画像を掲載したかったんですが、repositoryを登録していないとうまくいかなかったんですよね。そんな必要無かったのかもしれませんが。
Extensionのリリース
パッケージ化された拡張機能をマーケットプレイスに公開するには、次のコマンドを実行します。
vsce publish
これにより、拡張機能がVisual Studio Code Marketplaceに公開されます。vsce publishコマンドは、バージョン番号を自動的にインクリメントします。特定のバージョンを公開したい場合は、vsce publish <version>
を使用します。