VSCEを用いてパッケージを作成する
公開の前に、独自に作成した拡張機能のパッケージファイルを作成し、
自身のVSCodeにインストールし、簡単な動作確認を行っておきます。
これができない場合は、公開しても他の方々に不具合が出るだけで良いことはないでしょう。
では、VSCE のインストール および 簡単な動作確認までを行ってみます。
vsce は、
VSCode Extension Manager の略で、
文字通り VSCodeの拡張機能の管理ツールになります。
このツールによって公開作業を行います。
ZIPツールとテキストエディタさえあれば、独自にパッケージを作成することもできますが、
このツールに従うことで簡単に作成できますし、VSCodeの拡張機能の仕様変更などのメンテナンスに対する時間も
少なくできることと思います。
そう考えれば、間違いなくおすすめツールであることは間違いありません。
VSCEをインストールする
VSCEをインストールするには、
こちらのJS編 、こちらのTS編 でも使用した
npm コマンドを使用します。
C:\> npm install -g vsce
c:\node\vsce -> c:\node\node_modules\vsce\out\vsce
c:\node
`-- vsce@1.30.0
...
C:\> vsce --help
Usage: vsce [options] [command]
Options:
-V, --version output the version number
-h, --help output usage information
Commands:
ls Lists all the files that will be published
package [options] Packages an extension
publish [options] [] Publishes an extension
unpublish [options] [] Unpublishes an extension. Example extension id: microsoft.csharp.
list Lists all extensions published by the given publisher
ls-publishers List all known publishers
create-publisher Creates a new publisher
delete-publisher Deletes a publisher
login Add a publisher to the known publishers list
logout Remove a publisher from the known publishers list
*
|
vsce のインストールを終えたら、
こちらのJS編にて 作成した独自の拡張機能のパッケージ（vsixファイル）を作成してみます。
...\extensions\sample> vsce package
Created: ...\extensions\sample\hello-0.0.1.vsix
|
作成したパッケージから拡張機能をインストールする
一般的に拡張機能は、MicroSoft Marketplace で提供されている拡張機能からネット経由でインストールします。
ここでは、先に作成した拡張機能のパッケージ（vsixファイル）からインストールを行ってみます。
- VSIXファイルからインストールします。
- サイドバー 左の "拡張機能" をクリックし、サイドバーに拡張機能を表示します。
- サイドバー右上の その他のメニューアイコン をクリックします。
- メニューから "VSIXからのインストール... " をクリックし、先に作成された "hello-0.0.1.vsix" を選択すれば、拡張機能がインストールされます。
インストールを完了するためには、VSCodeの再起動が必要です。
- インストールできているか確認します。
サイドバー 左の "拡張機能" をクリックし、サイドバーに拡張機能を表示し、先の "hello" 拡張機能がインストールされていることを確認します。
- VSCode からコマンドパネル(Ctrl + Shift + P)を起動します。
- コマンドパネル に "sample" を入力すると、"Super Simple Sample" が表示されるはずなので、そちらを起動します。
上図のような通知メッセージが表示されればOKです。
独自作成した拡張機能を公開する
ここまで確認できれば、
先の vsix を公開することで、友人、知人を含めて不特定多数の方へ、独自作成の拡張機能を配布するこが可能です。
ただ、ここでは、VSCode の左の "拡張機能" をクリックす、Marketplace で検索できるようにしたいと思います。
MicorSoft のアカウントと Visual Studio Team Services を取得する
MicorSoft が提供する Marketplace では、Microsoftアカウント が必要です。
アカウントは、画面に従い作成すればOKです。
さらに、そのアカウントは、Visual Studio Team Services を利用できなければなりません。
これについて簡単に解説しておきます。
- https://www.visualstudio.com/team-services/ をアクセスします。
"無償利用開始"をクリックします。
- MicroSoftアカウントとパスワードを入力し、ログインします。
もし、MicroSoftアカウントを持っていない場合は、画面下の"新しいMicroSoftアカウントを作成"をクリックし、MicroSoftのアカウントを作成してください。
- 権限がないと言われましたか？
もし、上の画面が表示された場合、権限がないアカウントなので、Visual Studio Team Services を作成するアカウントを作成することになります。
画面中ほどの"Create User"をクリックします。
"新しいアカウントの作成"をクリックします。
- プロジェクト情報を入力し、"続行"をクリックします。
- 管理サーバー名（or ID名）？だと思います。なんでも良いと思います。
- 履歴管理手法です。ここではgitで良いと思います。
- プロジェクト名です。ここではデフォルト(MyFirstProject)のままとしました。
- プロジェクトの進め方（開発手法）です。ここではデフォルト(Agile)のままとしました。
- プロジェクトのサーバー設置場所です。ここではデフォルト(US(アメリカ))のままとしました。
- プロジェクト作成完了したら、ユーザのトップ（ダッシュボード）へ移動し、Personal Access Talkens を取得します。
画面左上をクリックすると、ユーザのトップ（ダッシュボード）へ移動します。
画面右上のユーザメニューをクリックし、"Security" を選択します。
"Add" をクリックします。
- トークンの概要です。ここでは、解説によくある "vsce" にしました。
- トークンの期限です。ここでは、最長の1年にしました。
- トークンのアクセス可能なアカウント範囲です。ここでは、"All accessible accounts"としました。
- トークンのアクセス可能なスコープ範囲です。ここでは、全て"All scopes"としました。
すべての設定を終えたら、"Create Token" をクリックします。
トークンが作成できたら、トークンコードが出力されます。
このコードは、ここで唯一表示されるコードで、拡張機能を公開する際に必要となるコードです。
忘れないようにメモしておきます。（以降、このコードは表示されることはありません。）
- ここまで終えたらOKです。ログアウト（SignOut）します。
公開者ID(publisher)を取得・公開する
この公開者ID(publisher)は、だれが公開するのかという情報になりますが、
ここで取得した公開者ID(publisher)は、package.json の中の publisher と同じにならなければなりません。
まずは、その公開者ID(publisher)を取得し、後に package.json の中の publisher を編集します。
- 公開者ID(publisher)を取得します。
...\extensions\sample> vsce create-publisher hogehoge
Publisher human-friendly name: (hogehoge) Hogetaro Hogeoka
E-mail: hogehoge@gmail.com
Personal Access Token: ****************************************************
Successfully created publisher 'hogehoge'.
|
以下のようなエラーが出力される場合は、トークンの権限が正しくない場合が多いです。
こちらを もう一度見直されることをおすすめします。
Error: Failed Request: Unauthorized(401) - https://marketplace.visualstudio.com/_apis/gallery
|
- 取得した公開者ID(publisher)でvsce へログインします。
...\extensions\sample> vsce login hogehoge
Personal Access Token: ****************************************************
|
先の公開者ID(publisher)を取得したPCで、ログインしようとした場合、以下のようなメッセージが出力されるかもしれません。
...
Publisher 'hogehoge' is already known
Do you want to overwrite its PAT? [y/N]
Error: Aborted
...
|
この場合、既にログインしている状態なので、特に Abortで抜けても問題ありません。
- 取得した公開者ID(publisher)で 公開します。
...\extensions\sample> vsce publish
Publishing hogehoge.hello@0.0.1...
Successfully published hogehoge.hello@0.0.1!
|
公開した拡張機能を検索してみる
上記は、"macro" で検索した様子です。個人で登録した "ssmacro" が出力されているのがわかるかと思います。
（ "ssmacro" という拡張機能についての詳しい内容は、Super Simple MACRO for VSCode を参照してください。）
いかがだったでしょうか？
ちょっと MioroSoftのアカウトあたりが英語ばかりで面倒ではありますが、
それを過ぎれば、まあ、あとは簡単なのかなぁという感じです。
ここでは、無償版の登録でしたが、
アプリ開発者として登録する場合、個人アカウントが約 19 米ドルで、企業アカウントが約 99 米ドルが必要になります。
そこまで行うと、今度は、Windowsのアプリが公開できるようです。
興味のある方は、一度、お試しされるのも良いかと思います。
がおすすめ！！ 
コメントをどうぞ