先日、VSCode向けの拡張を作成して公開したのですが、作成に当たって日本語の情報があまりなかったので、こういう流れでやりましたよ~。的なのをザックリと書いてみます。

開発にあたって


まず、VSCode拡張を作るとなればJavaScriptとかTypeScriptバリバリなんでしょ?的なイメージがあると思うのですが、私は両方ともかなりレベル低いです。そんな私でも今回作ったくらいの拡張であればあまり詰まるところなく作成できました。これは…

  • Yeomanでひな形プロジェクトの作成できる
  • 公式チュートリアル・サンプルがしっかりしている
  • TypeScriptの型付けのおかげで開発が楽
  • デバッグが容易

と、公式の情報・サンプルが整っており、経験がなくても楽に開発できる環境がすぐに整うというのが大きかったように思えます。また、個人的には幸いにも多少なりともC#の経験があり、TypeScriptがC#と近い感覚で記述できたというのもあります。

流れ


下記のような流れで作成しました。

  • 公式チュートリアルを見ながらサンプルを作ってみる
  • どうやって実現するか考える
  • API一覧を確認する
  • GitHubでVSCode本体の実装やMSのサンプルを見ながら実装する
  • ロゴ作る
  • テストする
  • 公開する

これらのうち、大半はMSの公式ドキュメントやサンプルを参考にしてます。

作業時間は計ってないのでわからないですが、後からコミットを見た感じだと前述の一連の流れでおおよそ20時間くらいかかったみたいです。スキルの高い人ならもっと短時間で終わると思います。

では、各手順をもう少し細かく書いていきます。

公式チュートリアルのサンプルを作ってみる


Your first extension Hello Worldを見ながら進めます。ここには大まかに下記のようなことが書いてあります。

  • Yeomanを使用したひな形プロジェクトの作成
  • 拡張のファイル・ディレクトリ構成
  • ひな形プロジェクトコードの修正と実行
  • デバッグのやりかた

まず、これらをザックリ読んでやり方をつかみます。おわれば引き続き別のサンプルのExample - Word Countでイベントの購読や破棄のやりかたを学びます。

どうやって実現するか考える


次に自分がやりたいことをどの機能を使って実現するか考えます。私の場合は下のようなメニューを実現するためにQuickPickerというのを使用しています。

何を使えば実現できそうかVSCode本体の機能や他の人のプラグインを参考にしながら決めました。

API一覧とサンプルを参考に実装する


次にAPI一覧を参考にして実装を進めます。といってもAPI一覧だけではしんどかったりするのでMS公式の拡張サンプル集VSCode本体のを参考にすると実装しやすいと思います。インテリセンスのオーラを感じながら開発しましょう。

ロゴを作る


やはりロゴが欲しかったので作ってみました。難しい形でなければ素人でもそれっぽいのは作成できました。

作成にはVectrというソフトを使用しました。「ログインしないと保存できませんよ」的なオーラが出ているのですが、デスクトップ版だと普通にローカルに保存できました。

ちなみにVSCodeのロゴはSVGは使用できません。

テストとサポートバージョンの決定


恥ずかしながらテストコードを書いていないのでゴリゴリ手動でやりました。Windows10とUbuntu18.04でテストしました。テストを行ってLinuxだと別途パッケージをインストールしていないと一部の機能が動かないということがわかりました。

また、テスト時に段階的にVSCodeのバージョンを上げていってどのバージョンから動作するかも確認し、サポートバージョンも決定しました。

公開する


Extension Manifest Fileを参考にしながら良い感じにManifestファイルを仕上げていきます。それが終われば後はVisual Studio Team Servicesアカウントを作成し公開するだけです。

アカウントの作成から公開までの手順は下記の公式ドキュメント通りにやれば特につまるところはありません。

Publishing Extensions

感想


はじめにスーパーハッカー氏に「拡張がないなら自分でつくればいいじゃない。簡単にできますよ。」と言われたときは「ほんまにぃ??スーパーハッカー氏基準なのでは…??」と疑ったのですが、思ったより簡単にできました。なのでマーケットに欲しいものがない場合は作成してみるのもありだと思います。