【公開編】Visual Studio Code拡張機能の作り方

【入門編】Visual Studio Code拡張機能の作り方では、Visual Studio Codeの拡張機能の作り方を紹介しました。この記事では作成したVisual Studio Code拡張機能をパッケージ化する方法を記載します。

準備

1. VSCEをインストールする

   まずは準備として、パッケージ化（vsix化）に必要なVSCEをインストールします。

   npm install -g vsce

2. Personal Access Tokenを取得する

   Azure DevOpsでPersonal Accessを取得します。

   手順は、Microsoftが公開している手順を参考に進めます。

手順

1. package.jsonにpublisherを追加

   package.jsonにpublisherプロパティを追加します。これは拡張機能の作者を表すプロパティになります。

   {
       "publisher": "kissy",
       "name": "vscode-blogger",
       "displayName": "VSCode Blogger",
       "description": "upload markdown to Blogger",
       "version": "0.0.1",
       "engines": {
           "vscode": "^1.40.0"
       },
       "categories": [
           "Other"
       ],
       ...(省略)...

2. README.mdを編集

   ジェネレータで作成したままのREADME.mdではパッケージ化できませんので、拡張機能に合わせて修正します。ユーザーが最初に見るドキュメントですので、とても重要なドキュメントです。機能、要件、インストール方法、使用方法などを記載して、README.mdを見ればユーザーがすぐに使用できるようにします。

3. パッケージ化（vsix化）

   パッケージ化するために、VSCodeのターミナル上でpackage.jsonのあるフォルダに移動し、以下のコマンドを実行します。すると、VSIXパッケージが作成されます。

   vsce package

4. vsixでのインストールとテスト

   Marketplaceで公開していないローカルのパッケージは、拡張機能のメニュー（…-[VSIXからのインストール…]）からインストールします。

5. マーケットプレイスへ公開

   以下のコマンドを実行してマーケットプレイスへ公開します。

   vsce publish

最後まで読んでいただきありがとうございます。 また読んでくださいませ。 そんじゃーね。

関連記事