VSCode拡張機能の開発～リリース(公開)編～

2020年8月8日 02:32

shotです。今回はVSCodeの拡張機能をリリースしてみたのですが、リリースについての情報が少なかったので記しておきます。

参考サイト

リリースについては、Visual Studio Codeの公式サイトのPublishing Extensionsというページに詳しく書いてあります。この記事は、このサイトを日本語で解説・補足する形で展開していきます。

vsceのインストール

開発したVSCodeの拡張機能をリリースするためには、これをパッケージングしてからパブリッシュする必要があります。これを簡単に行えるのがvsceです。拡張機能の開発ディレクトリ上で

npm install -g vsce

コマンドを実行すればインストール可能です。(npmを利用するためにNode.jsのインストールが予め必要ですが、それは開発時点で入っているはずです。)

パッケージング

次に、vsceを使って拡張機能を配布可能な形(vsix形式)にパッケージングします。このためには、必要項目が書かれたpackege.jsonとREADME.mdが必要になります。

generator-codeによって環境構築を行なった場合、特に変更していなければpackege.jsonには必要項目は既に書かれていると思います。その項目の内容は適宜変更してください(例えばpublisherの名前)。

README.mdはそのままストアに載ることになりますので、適宜変更してください。

これらの準備が整ったら、vsceによってパッケージングを行ないます。

$ vsce package

拡張機能名-バージョン.vsix というファイルが生成されていれば成功です。

パブリッシュ

いよいよリリースです。vsix形式のファイルをストアにパブリッシュします。

しかしその前に、Azure DevOpsに登録し、Personal Access Tokenを得る必要があります。これは登録を含めて無料で行えます(2020年8月現在)。この方法については、公式サイトのPublishing Extensionsで画像付きで解説されているので、そちらを参照してください。

Personal Access Tokenを得たら、vsceを使ってpublisher情報を登録します。

vsce create-publisher (publisherの名前)

このコマンドを実行すると、Emailと紐付けるPersonal Access Tokenを尋ねられます。Emailは空でも構いません。

ここまできたら、publishコマンドを実行しましょう。

vsce publish -p <Personal Access Token>

Personal Access Tokenは先ほどと同じものです。これで晴れて、ストアに拡張機能が登録されました！

リリース後について

リリース後、作成したpublisherにログインし直したい場合は、下記のコマンドを使います。

vsce login (publisherの名前)

このときにもPersonal Access Tokenが必要なので注意してください。

また、バージョンの更新はpackage.jsonのversionの項目を変更してからpackageコマンド、publishコマンドを入力することで可能です。ただし、現行バージョンより上である必要があります。また、READMEにも何を更新したのかを書いておくと良いでしょう。

この他にも色々とありますが、書いていくときりが無いため、もっと詳しく知りたい方は公式サイトのPublishing Extensionsを参照してください。

さいごに

今回は、VSCode拡張機能開発のリリースについての記事を書きました。私自身初心者なので、間違っているところ等あればコメントで指摘していただければ幸いです。

最後にせっかくなので、私がリリースした拡張機能LoginBonusを紹介しておきます。VSCodeを起動した連続日数と総日数をカウントするシンプルなものです。毎日コードを読み書きする動機に僅かでもなれば幸いです。

ここまでお読みいただき、ありがとうございました。