始まりはStack Over Flowのとある質問。Can I automatically start a task when a folder is opened?

Visual Studio Codeでフォルダーを開いたタイミングでタスクを実行できないか？という質問で、なんでそんなことをしたいかと言うと、gulpのウォッチをタスク実行しなくとも走らせたいということだった。

gulpでも、TypeScriptのトランスパイルで使うtscでも、ファイルの変更を自動でウォッチしてもらって、何か変更があったタイミングでビルドするというのは、一度タスクを走らせないといけなかった。

ところが、フォルダーを開いた時に自動でタスクが走ってくれゝば、そうした手間を減らせる。

規模の大きなプロジェクトだとどうなんだろうという気はするけれど、ウォッチを自動で始めてくれるなら確かに安心だな。

回答には、「今はそういう機能ないから、Visual Studio Codeの機能追加お願いしといてよ！」だった。そんならということで、この機能を拡張機能（エクステンション）で実現してみた。Blade Runnerというのがそれだ。あゝ、「火星の人」はやく日本公開しないかな。

 

この拡張機能を公開する過程で色々得たものがあるので、今回は、Visual Studio Codeの拡張機能をマーケットプレイスで公開する方法を解説しようと思う。

拡張機能自体の作り方はこちら

 

vsceのインストール

Visual Studio Codeの拡張機能をマーケットプレイスで公開できる様にパッケージ化するため、vsceというツールを使う。

 

Personal Access Tokenの取得

拡張機能はVisual Studio Team Serviceを通して認証や管理が為される。と言ってもそう肩の凝る話ではなく、このサービスが提供するPersonal Access Tokenをvsceに渡せば、後はうまくやってくれる。

 

まずはマイクロソフトのアカウントを作る（既に持っている場合はスキップしていい）。

次に、Visual Studio Team Servicesへサインインし、画面右上からMy profileを表示する。

 

Securityタブを開き、トークンを追加する。

 

 

 

トークンの設定はこのようにする。

 

無事に作成が終わると、次の画面でPersonal Access Tokenが表示されるから、コピーしておこう。

 

Publisherを作る

拡張機能の発行者をPersonal Access Tokenに紐付けて作るため、このコマンドをたたく。(publisher name)には、各人の好みの名前を入れよう。

これを実行すると、マーケットプレイスに表示するための名前や、トークンを聞かれるから入力していこう。

 

拡張機能をパッケージにする

Publisherを作れたら、拡張機能プロジェクトのルートディレクトリに移り、vsceを使って拡張機能をひとまとめにする。

首尾よくパッケージングが終われば、同じディレクトリに .vsix ファイルが作られているはず。これは拡張機能を圧縮したもので、マーケットプレイスにはこの形でアップする。

 

拡張機能を公開する

いよいよ全世界に向けてあなたの拡張機能を公開する時が来た。とはいえ、そう難儀なものではないので安心してほしい。

まずはマーケットプレイスにアクセスし、ページの最下部にある”Publish Extensions”へ入る。

 

次の画面で右上の”Upload New Extension”をクリックする。

 

すると、拡張機能のアップロード画面が出てくるから、先ほど作ったvsixファイルをアップロードすれば公開完了となる。

 

READMEを書く

さっそくアップした拡張機能のページを見てみよう。とんでもなく寂しいことだろう。さもありなん。拡張機能の説明やアイコン、バナーのカスタマイズをしていないからだ。

というわけで、まずは説明文を付けるためにREADMEを書く。

拡張機能プロジェクトのルートディレクトリにREADME.mdというファイルがあり、ここにMarkdown記法で書いた説明文がマーケットプレイスで表示される。

Markdownの書き方はQiitaのチートシートを見てもらうとして、内容としては、

1. 拡張機能の概要
2. インストール方法と使い方
3. フィードバック方法

あたりを書いておけばいいだろう。

ちなみにBlade Runnerはこんな感じ。

 

アイコンを付ける

拡張機能のアイコンがあると、それだけでちゃんとしてる感が出るので是非モノで付けておきたい。

128*128pxのpng画像を用意し、拡張機能プロジェクトの好きなところへ配置し、package.jsonに”icon”プロパティを書いて参照するだけでOK。

この”icon”は、package.jsonのトップレベル(nameなどと同じ階層)に書く。

 

公開画面のテーマ、バナーの色を変える

ここまででもかなり見栄え良くなっているけれど、ダメ押しにテーマとバナー（拡張機能の名前やアイコンのある部分）をカスタマイズする。

アイコンと同じく、package.jsonのトップレベルに”galleryBanner”を書き、その中に”color”と”theme”を書く。
“color”によってバナーの色を設定できる。

themeは、今のところ”light”か”dark”を指定できる。アイコンに合った方を選ぼう。

 

公開画面のカスタマイズについて詳しく

ここで解説したカスタマイズはまだ序の口で、ライセンスの種類やリポジトリへのリンク（GitHubなど）を貼れたりもする。その全容はこちらへ。

Extension Manifest File – package.json

 

拡張機能を更新する

カスタマイズが終わったら、再度 “vsce package” を叩いてvsixファイルを作る。

拡張機能をアップロードした画面へアクセスし、拡張機能の名前の左にある矢印から更新をかける。

公開した時と同じく、アップロード画面が出てくるから、更新版のvsixファイルをアップすれば、文句なしの公開完了！お疲れ様でした。

 

Blade Runner

ファイルのウォッチを開始するために、Visual Studio Codeを開いてビルドをかけているあなた。Blade Runnerが、そのちょっとした手間を減らすお手伝いを致します。

Blade Runner – Run Task When Open

 

言語が違っても通用する、”読みやすいコード”を書くための名著。エンジニアとしての階段を確実に一段登れます。