27
27

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Visual Studio / Visual Studio CodeAdvent Calendar 2015

Day 7

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

Last updated at Posted at 2015-12-06

はじめに

今回の情報は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](Extension Manifest File - package.json)
TabSpacer(MarketPlace)
TabSpacer(GitHub)

27
27
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
27
27

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?