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

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

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

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

前提

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

前置き

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

公開するための準備

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

1. https://aex.dev.azure.com/me?mkt=ja-JP にアクセス
2. (GitHub アカウントで認証をし、登録しました)
3. Azure DevOps組織 > プロジェクト にアクセス
4. Browse marketplace を押下
   
5. Publish extensions を押下(右上のメニュー)
   
6. Owner の箇所をhoverして、Publisher ID を控える
   
   ※ 隠す必要がない情報もマスクしています。

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

必須

{
  "publisher": ""
}

作成したアカウントのPublisher ID を設定してください

任意

{
    "icon": "",
	"repository": {
		"type": "git",
		"url": ""
	}
}

• icon は「128px × 128px」推奨
  「package.json が置いてあるディレクトリ」からの相対パスを指定
  ※ 指定する画像に、SVGは利用非推奨。
• 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」
     2. Scopes: 「Custom defined」
     3. Marketplace: 「Acquire」と「Manage」を選択

2. ローカルで、下記のコマンドを実行する

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

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

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

    $ vsce package
   

2. Azureのアップロード画面を開き、1のファイルをアップロードする

   • https://marketplace.visualstudio.com/manage/publishers
   • 新規の場合
     1. New Extension を押下
     2. Visual Studio Code を押下
     3. 1で生成したvsix拡張子のファイルをアップロード
     4. Upload を押下
   • バージョンアップの場合
     1. 「...(More Actions)」を押下
     2. Update を押下
     3. 1で生成したvsix拡張子のファイルをアップロード
     4. Upload を押下

3. reCAPTCHA認証 を行う

4. 以下のメッセージが表示されればOK
   
   ※ 反映までに少し時間がかかります

感想

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

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

1. Marketplaceのサイトからアップロードする手順は、実は、公開する以外の用途でも使えます。
   vsix拡張子のファイルを作成し、そのファイルをを共有すれば、他の環境でも利用することが可能になります。 ↩