Help us understand the problem. What is going on with this article?

VS CodeのエクステンションをMarketPlaceに公開する

More than 3 years have passed since last update.

はじめに

今回の情報はPreview版のMarketPlaceを元にしています。本リリースになった場合には異なる可能性があります。

事前準備

MarketPlaceにエクステンションを公開するためには、MicrosoftアカウントとVisual Studio Team Servicesに、メールアドレスを事前登録しておく必要があります。まだアカウントがない方は下記のサイトから作成しておいてください。

Microsoftアカウント
Visual Studio Team Services

Personal Access Tokenの生成

アカウントの準備ができたら、公開のためのAcccess Tokenを VS Tema Servicesのサイトから生成します。

generateToen.png

まずは画面右上の自アカウントからMy Profileを選んで、左ペインで[Security]-[Persinal Access Tokens]画面で[Add]ボタンをクリックすると上図の画面にたどり着きます。公式アカウントによると[Accounts]はall accessible accounts、[Authorized Scopes]はAll scopesにしないと動作しないらしいので注意してください。
後は、この画面で[Create Token]ボタンをクリックするだけです。Tokenは1回しか表示されないのでメモの取り忘れにはご注意を!!

package.jsonの設定

package.jsonファイルの設定で最重要項目はpublisherです。publisherは後述のvsceの設定と同じ名前にしないと後々エラーになってしまいます(大文字小文字も区別している気がします。間違いだったらごめんなさい)。また、iconを指定するとMarketPlaceにアイコンを表示できます。アイコンは128*128の正方形指定があります。また、galleryBannerを書いておくと、MarketPlace内のバナーをカスタマイズできます。

package.json
"publisher": "yuichinukiyama",
"icon": "images/spellIcon.svg",
"galleryBanner": {
    "color": "#5c2d91",
    "theme": "dark"
}

MarketPlaceへの公開

準備ができたらいよいよMarketPlaceにエクステンションを公開します。公開用ツールとして、vsceが提供されているので、インストールしておきます。

npm install -g vsce

Publisherの設定

コマンドプロンプトからpubliserの登録とログインをします。下記のコマンドを実行する際には、Personal Access Tokenの入力が求められます。繰り返しになりますが、Personal Access Tokenは1回しか表示されないので、忘れてしまった方はTokenを再度登録しなしておく必要があります。

vsce create-publisher publisher名
vsce login publisher名

packageの作成

作ったエクステンションをMarketlaceに公開せずに配布したい場合には、パッケージの生成をします(ということは、Marketplaceに公開するなら省略可能です)。そのためには、エクステンションのルートディレクトリに移動した後、以下のコマンドを実行します。

vsce package

公開

ここまで来れば後はもう公開できます。同じくルートディレクトリでpublishコマンドをたたくだけです。なお、Personal Acccess Token発効後にpubliser名を変更したりするとエラーになってしまいます。その際は、MarketPlaceのmanage Pageから調整できます(vsixファイルを生成済みであれば、manage Pageからも公開できます)。

vsce publish

publishコマンドを実行すれば、package.jsonやREADME.mdを元に、MarketPlace内にページが自動生成されるともに、VS Codeからもインストールできるようになります。

marketplace.png

MarketPlace上のエクステンションをインストールする

Marketplace上のエクステンションは、公開直後からVS Codeでインストール可能になります。コマンドで、[ext install エクステンション名]を記述して、ダウンロードボタンを押すだけです(以下の画面ショットはダウンロード後なので、右下のアイコンがアンインストールになっています)。
install.png

参考

vsce - Publishing Tool Reference
Extension Manifest File - package.json
TabSpacer(MarketPlace)
TabSpacer(GitHub)

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした