初めての VS code extension 開発
Hello World extension しか作ったことがなかったので、普通に使うもの（自分が、ね）を想定してチャレンジ。
主に下の教科書と公式サイトを行ったり来たりしてた感じ。
# 今年の2月からは、本業 (VS code とは関係ないけども) で著者の方々に大変お世話になっています。
www.amazon.co.jp
作った VS code extension
denofunc (Azure Functions のカスタム ハンドラーを deno で作りデプロイする CLI ツール) のコマンドを、VS code のコマンド パレットから操作するもの。
基本的に denofunc のラッパーなので、できることはこれ (だけ) 。
- プロジェクト フォルダーの初期化
- テンプレートからの関数追加
- Azure Functions へのデプロイ
# えぇ、ターミナルでできるんですけどね。
なお Tree View とか Webview といった、extensin 感あるやつは一切使っていない。
ハマりポイント
初めての VS code extension 開発で少しハマったポイントをご紹介。
通知は await しない方がよさげ
右下のやつ。
通知を出すのは、vscode.window 名前空間の下記メソッドたち。
- showInformationMessage
- showWarningMessage
- showErrorMessage
戻り値の型が Thenable なので、盲目的に await を付けて使っていたけど、それをやると当然 resolve するまで処理が返ってこない。
通知の振る舞いとしてはその挙動は違和感があったので、await なしの方がいい気がする。
モーダルなダイアログを出したければ、await して 第二引数に {modal: true} を入れるとよい。
GitHub のブランチ名は注意
README.md 内で画像などのリンクを相対パスで書くと ( みたいに) 、vsix パッケージの生成処理 (vsce package や vsce publish の実行時) 内で、 package.json 内の repository を使って絶対パスに書き直される。
気を付けないといけないのが、上記絶対パス内のブランチ名として、既定では master が使用される。
なので、何も考えずにパッケージを作ったり publish すると master ブランチにリンクされるが、最近は main ブランチで作ることが流行りっぽいので、ブランチ自体が存在せず画像のリンクが切れる。
この README.md を修正するためにバージョン アップするのは (patch とはいえ) あまりやりたくない作業なので、気を付けた方がいい。
ちなみに最近ソースコード上では、master から HEAD に変わった様子。
ただ、この PR は vsce の最新バージョン (2021/3/7 現在 1.85.1) にまだ含まれていない (タッチの差)。
なので、 vsce の最新バージョンではまだ master が既定なので --githubBranch オプションで GitHub リポジトリのブランチ名を指定することを強く推奨。
(3/12 追記)
----
修正バージョン 1.86.0 がリリースされてた。
www.npmjs.com
----
OutputChannel に出す文字に色が付けられない
OutputChannel は、ログなどを出せるパネル。
通常、コマンドプロンプト、bash などでは、標準出力/標準エラー出力にこういう色が付けられる。
一方で VS code の OutputChannel はまだカラー対応していないらしい。探すと issue がいっぱい出てくるが例えばこれ。
上記と同じ出力をそのまま VS code extension から OutputChannel に出力すると、ANSI color code? escape code? がそのままでてくる。
# 最初、何が出ているのか理解できなかった。
結局正規表現で ANSI code を削除している。苦肉の策。
ついでのメモ
今回作った extension では child_process の spawn を使って denofunc や az を実行している。
この時、spawn の引数に {shell: true} を渡してあげないと、指定したコマンド(deno や az)が見つからず、ENOENT が発生する。Windows (コマンド プロンプト) と WSL2 (bash) で確認。
最後に
公開した extension の Visual Studio Marketplace のページ、GitHub リポジトリーはこちら。
