VSCodeのExtensionをMarketPlaceにリリースする方法

VSCodeのExtensionを作成したら([こちらの記事参照](https://qiita.com/teckback/items/5a70b6d643359ca4c55c))、次のステップはMarketPlaceにリリースですね。リリースまでの対応についてまとめたので参考にしてください。

VS Codeの拡張機能をマーケットプレイスにリリースするには、以下の手順で行いました。これには、拡張機能のパッケージ化、Visual Studio Code Publisherの設定、拡張機能の公開などが含まれます。

## 転載元
当記事は以下ブログからの転載です。
[TECH BACK](https://techback.info/vscode-extension-release-steps/)

## Azure DevOpsアカウントの作成とPublisherの登録

### アカウント作成

[azure.microsoft.com](https://azure.microsoft.com/ja-jp/products/devops)

にアクセスしてアカウントを作成します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/450952/b535989e-1533-6c9a-c232-b41ccb0f86df.png)


このウインドウはそのままContinueでOK
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/450952/4461e876-5798-5670-c1d9-967c4d90694d.png)

この画面まで来たらアカウントの作成はできています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/450952/74723fbc-6505-8215-18d5-8400d50ba0fc.png)


そのままプロジェクトを作成してしまいましょう。

### プロジェクト作成

適当なProject name・Description（プロジェクトの説明）を入力します。VisibilityはPrivateが良いでしょう。入力が終わったら、Create projectをクリックして作成してください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/450952/f9aa8ac6-7d94-75b2-0c72-2901a1c637a5.png)


次は、Publisherの登録を行います。

### Publisher登録

[marketplace.visualstudio.com](https://marketplace.visualstudio.com)

にアクセスしてPublish extensionsから登録していきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/450952/f7adba22-fca0-30c6-28cc-f0b5c5025380.png)


Nameは適当なものを、IDはユニークなものを設定したらよいでしょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/450952/c14fabc1-8f03-0bd7-e88f-fb3de09954a7.png)


完了すると下記のような画面になります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/450952/8b9d5126-7a82-e16f-62cf-ccd7e217857f.png)


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の個人用アクセストークンページにアクセスします。

Personal access tokensをクリックして
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/450952/8ed000d8-debb-73ff-17eb-579a4fbb7e3a.png)


右上のNew Tokenをクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/450952/028429b5-ae70-1de0-4782-0cf4f261708c.png)


必要な箇所を入力していくのですが、Scopesは注意が必要です。発行するTokenに必要以上の権限を与えてしまうのは避けなければなりません。

今回の用途であれば、Scopesの箇所でCustom definedにチェックを入れてMarketplaceのPublishとManageにチェックが入っていればOKです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/450952/dae5e0dd-fcc5-59b2-79d6-c93e375aafc3.png)


生成すると、tokenが発行されますので安全な場所に保存しておいてください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/450952/4c4bc879-3b70-4092-6233-fffcffb7b86c.png)


### 取得したパーソナルアクセストークンを使用して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>`を使用します。

こんな感じでMarketplaceに
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/450952/a9dd6b5a-258a-db99-459f-ff9e1e933d1b.png)


そしてこんな感じで、インストール数・Page View数とか分かったりします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/450952/8b8f2a72-ec62-622f-3936-ccefa5cfdc27.png)