TypeScriptでCircleCIのステータスを表示するVSCode拡張機能を作った

タイトル通り、TypeScriptで「CircleCI Status」というビルドステータスとかを表示できるVSCode拡張機能を作って公開しました！
「Circle CI」とかで検索すれば出てくると思うので、ぜひ使ってみてください！（アイコンがまだないので若干寂しいです）

• Marketplace
  https://marketplace.visualstudio.com/items?itemName=kuromoka.circleci-status
• GitHub
  https://github.com/kuromoka/circleci-status

機能の一部分のスクショです。

元々は勉強会の話のネタとして作っていたのですが、このときはまだ完成しておらず開発中でした。
We Are JavaScripters! @36th で登壇してきた #wejs

機能

細かくはGitHubのREADMEに書いていますが、ざっくり以下のようなことがVSCode上できるようになります。

• 直近ビルドの成功や失敗などのステータス表示
• 直近ビルドのやり直し
• 過去ビルドの一覧表示とCircleCIのビルドページへのリンク

使用技術

TypeScriptを初めて使いました。TypeScriptは触れてみたいと思いつつなかなか機会に恵まれなかったので、使うきっかけとしてVSCodeの拡張機能の開発をやってみました。
最初にYour First Extensionに書かれているジェネレータでひな形を作って、それを元にTypeScriptでカスタマイズしていく流れで進めました。

CircleCI API

CircleCIのステータスを表示するのに、APIを使っています。以下の公式ドキュメントを参考にしました。
https://circleci.com/docs/api/#circleci-api

余談ですが開発中はv1.1ベースの内容だったのでコード上でもv1.1のエントリーポイントを呼び出しているのですが、ちょうど最近v2ベースのドキュメントに更新されたようです（なのでどこかでアップデートしたい）。

拡張開発の公開

公開する前に、Marketplaceのページで表示されるGitHubリポジトリや検索用のキーワードなどを、package.jsonに定義しておきます。Extension Manifestに詳しく書かれています。特にpublisherフィールドは公開するのに必須らしく、少し手間取りました。
公開作業についてはPublishing Extensionを参考にしました。

最後に

TypeScript初めてでしたが、なんとか動くものが作れてまず良かったです！
普段はPHPを書いていてそのときもVSCodeを使っているんですが、TypeScriptを書いていると補完がガンガン効くのでとても快適にコーディングできました。
今後はワークフロー機能やBitbucketへの対応などをやっていきたいなーと思っているので、今後もウォッチしていだけると幸いです！