【VSCode】自作した拡張機能を公開する方法

## はじめに

[前回](https://qiita.com/yusu79/items/96dd9b09d0cebb86f1be)に引き続き､今度は自作したVScode拡張機能の公開方法を記述します｡


- 自作する ← 【[前回](https://qiita.com/yusu79/items/96dd9b09d0cebb86f1be)】
- 公開する ← 【今回】

拡張機能の公開手順は以下の通りです｡
1. vsceのインストール
2. Azure DevOpsアカウントを取得
3. パーソナルアクセストークンを取得する
4. パブリッシャーIDの確認
5. package.jsonに追記
6. vsceでpublisherにログイン
7. 拡張機能の公開


### 1. vsceのインストール
拡張機能を公開するには`vsce`をnpmでインストールする必要があります｡
vsceとは､「**Visual Studio Code Extensions**」の略で､VScodeの拡張機能の､
- パッケージ化
- 公開
- 管理

を実行するためのコマンドラインツールです｡

```bash:Windowsでインストール
> npm install -g vsce
```
```bash: Linuxでインストール
$ sudo npm install -g vsce
```

### 2. Azure DevOpsアカウントを取得
[Microsoft Azure](https://l.pg1x.com/JzYj)に**GitHubアカウント**でログインします｡

### 3. パーソナルアクセストークンを取得する

パーソナルアクセストークンを取得するには､まずホーム画面の「**Azure DevOps organizations**」をクリックします｡

![mosaic_20240803161835.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/395294/203af144-6311-24d0-f041-c2fe5e8825f1.png)



プロファイルを作ったら､「**新しい組織の作成**」をクリックします｡すると､`https://dev.azure.com/プロファイル名/組織名`のURLが発行されます｡
ここでは､「test」という組織にしています｡

![mosaic_20240803162252.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/395294/1341dba5-a6db-619a-6433-25db1d9871df.png)



右上の「User settings」アイコンをクリックして､「**Personal access tokens**」をクリックします｡

![mosaic_20240803162400.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/395294/b506f6bc-cd8a-5611-b13b-cd301a7bc092.png)



「 **+ New Token** 」をクリックしパーソナルアクセストークンを作成します｡
以下の2つの項目を記入して､「**Create**」を押します｡
- Name
  - パーソナルアクセストークンの名前
- Marketplace
  - デフォルトでは項目が表示されていないため､下部の「**Show all scopes**」をクリックして展開します｡
  - 「**Acqire**」と「**Manage**」をチェックします｡

![mosaic_20240803162513.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/395294/5040ed43-3acf-7053-24d4-7571ee327ab8.png)

![acquire_manage.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/395294/83030a73-dda0-6450-6079-b3e8fc1a4701.png)

パーソナルアクセストークンが発行されます｡
トークンは**1度**しか発行されないため､忘れずにコピーします｡

![mosaic_20240803162609.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/395294/25305b7d-e4df-4ae4-a365-1d84bdddb87d.png)




### 4. パブリッシャーIDの確認

先程の`https://dev.azure.com/プロファイル名/組織名`に移動し､今度は右上のアイコンから「**Browse marketplace**」をクリックします｡

![mosaic_20240803162400.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/395294/419a5b45-402c-64ec-0d57-ab8eb670e9ea.png)



右上の「**Publish extensions**」をクリック｡

![mosaic_20240803162710.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/395294/9b2e84d4-30a8-e45a-70a4-0b35fe3524c6.png)


Ownerの箇所をマウスホバーすると､パブリッシャーIDが分かります｡


### 5. package.jsonに追記

公開したい拡張機能の`package.json`に`"publisher":"パブリッシャーID"`を追記します｡

```json:package.json
{
  "publisher": "パブリッシャーID",
}
```

それから「CHANGELOG.md」も編集します｡

### 6. vsceでpublisherにログイン

`vsce login パブリッシャーID`とすると､パーソナルアクセストークンを聞かれるため入力します｡
すると､ログインできます｡

```bash:vsceにログイン
$ vsce login パブリッシャーID
https://marketplace.visualstudio.com/manage/publishers/
Personal Access Token for publisher 'パブリッシャーID': **パーソナルアクセストークンを入力**
```

### 7. 拡張機能の公開
ログインした状態で`vsce publish`とすると､`package.json`に登録されたパブリッシャーIDでマーケットプレイスに拡張機能が公開されます｡


```bash:マーケットプレイスへ公開
$ vsce publish
```

## 更新と非公開

更新方法は簡単｡
`package.json`の`"version": `を更新して､`vsce publish`するだけです｡

```json:拡張機能を更新する
{
  "version": "新しいバージョン",
}
```

一方､非公開にするには､`vsce unpublish パブリッシャーID.拡張機能`とします｡
```bash:マーケットプレイスから削除
$ vsce unpublish パブリッシャーID.拡張機能
This will delete ALL published versions! Please type 'パブリッシャーID.拡張機能' to confirm: パブリッシャーID.拡張機能
 DONE  Deleted extension: パブリッシャーID.拡張機能!
```