lisz-works

技術と興味の集合体

作ったVSCode拡張を公開する手順

【スポンサーリンク】

Visual Studio Code

VS Codeの拡張を作ったら、あとは普段使いたいですよね?

ということで、作ったVS Codeの拡張を公開する手順です!

アカウント作成

2つのアカウント作成を行なう。

  1. Micsofostアカウント
  2. Azure DevOps

Micsofostアカウントは普通にメールとかのアカウント作ってあればOKです。

Windows使っている方は、恐らく登録済みですよね。

Azure DevOpsでパーソナルキーの取得

Azure DevOpsにサインインしようとしたら、Get started画面が出ました。

Get Started with azure devops

Project nameを設定してContinueボタン。

こんな画面が表示されます。

ダッシュボード

  1. アカウントアイコン左にある人形マークをクリック
  2. Personal Access Tokens

Personal Access Tokens

New Tokensをクリックする。

New Tokensをクリック

Create a new personal access tokenが開くので情報を入力していきます。

項目 入力する値
Name Tokenの名称
Organization All accessible organizations
Expiration(UTC) 90 daysにした
Scopes 別記

Organizationについて

Organizationは、デフォルトだとユーザ名になっています。

しかし「All accessible organizations」に変更しないと、あとで公開コマンド実行時にエラーとなります。

Scopeについて

Scopeは「Show all scopes」で全て表示。

「Marketplace」を検索して

  1. Acquire
  2. Manage

に☑チェックを入れる。

Personal Access Tokensを作成

Createボタンを押してTokenを作成する。

Tokenが作成される

ここで表示されるTokenを控えておく。

この表示以降、2度と表示されることはないらしい。注意が必要ですね。

publisherの作成

MarketPlaceへのアップロードや表示に関わるみたいです。

package.jsonを設定していきます。
以下を追加します。

"publisher": "<publicherName>"

公開する時にこの名前を使うようです。

他にもアイコンや、MarketPlace内でのバナーをカスタマイズできるらしいです。

"icon": "<iconPath>,
"galleryBanner": {
    "color": "<color>",
    "theme": "<theme">
}

今回は、publisherとgalleryBannerだけ設定しました。

アイコンはそのうちやろう……

vsceのインストール

公開にこれが必要なのでインストールしておきます。

npm install -g vsce

MarketPlaceへ公開設定

package.jsonのあるフォルダで「vsce create-publisher」を実行します。

成功するとこのように表示されます。

> vsce create-publisher <publicherName>
Publisher human-friendly name: (hatenablogtools) <publisher-human-friendly-name>
E-mail: <mailAddress>
Personal Access Token: ****************************************************

 DONE  Created publisher '<publicherName>'.

入力内容はこのとおり

項目 内容
Publisher human-friendly name 任意
E-mail メールアドレス(G-Mailでもいけた)
Personal Access Token 取得したトークン

MarketPlaceへ公開

このコマンドを叩きます。

>vsce publish

README.mdが作成時から変更されていないと、このようなエラーが出るらしいです。

>vsce publish
 ERROR  Make sure to edit the README.md file before you package or publish your extension.

Google翻訳にかけると

公開前に必ずREADME.mdファイルを編集してください。

とそのままなことが書かれています。

編集してから、もう1度実行しましょう。

>vsce publish
 WARNING  A 'repository' field is missing from the 'package.json' manifest file.
Do you want to continue? [y/N] y
This extension consists of 939 separate files. For performance reasons, you should bundle your extension: https://aka.ms/vscode-bundle-extension . You should also exclude unnecessary files by adding them to your .vscodeignore: https://aka.ms/vscode-vscodeignore     
Publishing xxxx.yyyy@0.0.1...
 DONE  Published xxxx.yyyy@0.0.1
Your extension will live at https://marketplace.visualstudio.com/items?itemName=xxxx.yyyy (might take a few seconds for it to show up).

package.jsonにリポジトリの記述がないと、このようなWARNINGが出るようです。

 WARNING  A 'repository' field is missing from the 'package.json' manifest file.

問題ない場合は、「y」で進めればOKです。

サイドバーの拡張検索から、公開した拡張を検索するとインストールできます。

これ表示された瞬間めっちゃ嬉しいんだけど!

参考

コチラを参考にしました。ありがとうございました!

qiita.com

qiita.com

qiita.com

docs.microsoft.com

www.off-soft.net

note.mokuzine.net

あとがき

作ったVSCode拡張を公開する手順についてでした!

Azure DevOpsの画面が少し新しくなっていたので、ネットの情報と少し違ったので躓きましたが、公開までこぎつけました!

今後VS Codeで「こういう機能欲しいなー」と思ったら、自分で作れる!と思うと、モチベーション的にかなり大きい。

他の人が使って便利と思ってもらえたら、もっといいですしね。

拡張を公開するとき、よければ参考にしてください!