vscodeの拡張機能(Extension)を公開するまで

gRPCのprotoファイルなど、表示を良い感じに整えることができる？拡張機能を作成し、公開してみました。


https://marketplace.visualstudio.com/items?itemName=matsuyoido-kanro.space-align-format

その時に試した内容などをまとめていきたいと思います。

※ protoファイルに関しては、下記公式をご参照ください
https://developers.google.com/protocol-buffers/docs/proto3

# 前提
1. 拡張機能のコーディングが完了していること

# 前置き
普段、IDE(統合開発環境)として、[vscode(Visual Studio Code)](https://azure.microsoft.com/ja-jp/products/visual-studio-code/) を利用しています。
多くの拡張機能があるため、実際に利用していて特に問題なかったのですが、「半角スペースを使って良い感じに見栄えを揃える」という作業が発生したことがあります。
vscode では [複数行を一つのカーソルで選択](https://code.visualstudio.com/docs/editor/codebasics#_multiple-selections-multicursor) ができる機能があるため、その時は ~~面倒に感じながらも~~ 普通に作業をするよりは早く対応ができました。
『自分達が目で見て分かりやすい』状態を保つことはとても重要だと思います。ですが、作業があまり生産的ではないことも事実…。
vscode の拡張機能を作る記事をいくつか拝見し、せっかくなのでやってみよう！という気持ちになり、作成をしてみました。
そして、自分が実際の業務でも使いたいと思ったため、公開もしました。
その時の備忘録メモとして、まとめていきます。

# 公開するための準備

## 1. Publisher ID を控える(アカウント作成)

1. https://aex.dev.azure.com/me?mkt=ja-JP にアクセス
1. (GitHub アカウントで認証をし、登録しました)
1. Azure DevOps組織 > プロジェクト にアクセス
1. Browse marketplace を押下
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2802395/8e1fa981-b654-10e0-10a9-6a93b6ebaa67.png)
1. Publish extensions を押下(右上のメニュー)
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2802395/215087a6-dc7f-f334-f13d-7214aa26ed7c.png)
1. Owner の箇所をhoverして、Publisher ID を控える
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2802395/65b4313f-be37-b0de-10fd-56a1d1bc2adf.png)
※ 隠す必要がない情報もマスクしています。


## 2. package.json に必要な情報を設定

### 必須
```json
{
  "publisher": ""
}
```
作成したアカウントのPublisher ID を設定してください

### 任意
```json
{
    "icon": "",
	"repository": {
		"type": "git",
		"url": ""
	}
}
```
* `icon` は「128px × 128px」推奨
「package.json が置いてあるディレクトリ」からの相対パスを指定
※ 指定する画像に、[SVGは利用非推奨](https://code.visualstudio.com/updates/v1_14#_constraints-for-rendering-svg-images)。
* repository > url に、ソースコードを管理しているURLを指定


# 公開する

公開する方法は 
「vsceコマンドにお任せ」 or 「vsix拡張子のvscodeに取り込むファイルをアップロードする」
の 2通りあるようです。

## 方法1. コマンド経由で公開

1. アクセストークンを生成する
    * https://docs.microsoft.com/ja-jp/azure/devops/organizations/accounts/use-personal-access-tokens-to-authenticate
    * 最低限、下記の設定は必須となります
        1. Organization: 「All accessible organizations」
        1. Scopes: 「Custom defined」
        1. Marketplace: 「Acquire」と「Manage」を選択
1. ローカルで、下記のコマンドを実行する

        $ vsce login ${Publisher ID}
        # ここで、1で生成したアクセストークンを入力して、認証をする
        $ vsce publish




## 方法2. サイトからアップロードして公開

1. ローカルで下記のコマンドを実行し、 vsix拡張子のファイルを作成する

        $ vsce package

1. Azureのアップロード画面を開き、1のファイルをアップロードする
    * https://marketplace.visualstudio.com/manage/publishers
    * 新規の場合
        1. New Extension を押下
        1. Visual Studio Code を押下
        1. 1で生成したvsix拡張子のファイルをアップロード
        1. Upload を押下
    * バージョンアップの場合
        1. 「...(More Actions)」を押下
        1. Update を押下
        1. 1で生成したvsix拡張子のファイルをアップロード
        1. Upload を押下
1. [reCAPTCHA認証](https://www.google.com/recaptcha/about/) を行う
1. 以下のメッセージが表示されればOK
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2802395/2a8c849f-9260-dcc7-1d40-e6cf04961396.png)
    ※ 反映までに少し時間がかかります


# 感想

アカウント作成や公開するページに辿り着くまでにやや時間がかかりましたが、思った以上に簡単に公開することができました。
公開をしてみて感じたことですが、「公開できた安心」と同時に「（こんな内容で）公開して大丈夫か…？」という不安にも駆られました（最終的には「使いたい人だけ使うでしょう！」と開き直りました）。

思った以上に、簡単に公開できました。実際にやってみて、
コマンド経由で簡単にできることも魅力でしたが、個人的には、Marketplace の画面から公開する方が安心感がありました（アクセストークンの管理が面倒）。
どちらの方法でも公開やバージョンアップができることは確認できましたので、個人のリリースフローに合わせた形で良さそうです[^vsix-anotherway]。


[^vsix-anotherway]: Marketplaceのサイトからアップロードする手順は、実は、公開する以外の用途でも使えます。
vsix拡張子のファイルを作成し、その[ファイルをを共有](https://code.visualstudio.com/docs/editor/extension-marketplace#_install-from-a-vsix)すれば、他の環境でも利用することが可能になります。