はじめに
こんにちは、Visual Studio Code界のホエイプロテイン（WPI）です。これはVisual Studio Code Advent Calendar 2016の21日目の記事です。昨日はEbXpJ6bpさんでした。
Visual Studio Codeのリリース以後、ライトユーザーとして便利に使っています。今日は１ユーザーとして便利に使っていたものの、欲しい機能がなかったので拡張を作った話とその感想を書こうと思います。
作ったもの
Visual Studio CodeでOSSライセンス用のLICENSEファイルの作成、およびライセンスヘッダの挿入を簡単に行う拡張である "licenser" という拡張を作りました。
インストールは次のとおりです。
> ext install licenser
拡張を作った動機
Visual Studio Codeを使い始めるまでは、コードを書くときはEmacsかVim、Androidのコード書くときはAndroid Studioを使って書いてたわけですが、いろいろ始めから設定されてるという理由でVisual Studio Codeを使い始めました。使いはじめてこれは良いなと思ったのはこんな感じ。
- IDEとエディタの中間のような操作感
- IntelliSense由来のポップアップ補完の優秀さはさすがMSですね
- 設定の容易さ
- JSONを1つ設定しておけば良い簡便さ。設定中もオプション項目は補完が効くのは便利。
- 公式サイトでの拡張の管理。
- 3rd partyではなく拡張が公式にホストされているのは安心感がある。バージョンが上がりエディタ内でも管理出来るようになったのが楽。
- 充実したカラースキーム
- なんかオシャレっぽくできてよい
- 拡張がTypsScriptまたはJavaScriptで書ける
- 見た目だけでいえばAtomに似てるわけですが、拡張を書くためだけにCoffeeScript覚えたくなかったので、他の用途でも使えるTypeScriptで書けるのは良かった。
- デフォルトで結構戦える
- 拡張をまったく入れなくてもメジャーどころの言語を使うときはシンタックスハイライトや補完も大体問題ないので良い
しかしながら、欲が出てくるもので、IDEっぽく使えるならもっとIDEっぽい機能がほしいなと思うようになり、その中でもダントツにほしく感じたのはOSSライセンス関係の機能でした。公式で提供しているかとも思ったのですが、ありませんでした。また3rd partyで公開されていた2つも、こんな感じで求めたものではありませんでした。
- LicenseHeader - Visual Studio Marketplace
- ライセンスヘッダの追加のみしか行ってくれない上に、MITライセンス決め打ちなので自分の用途に合っていない。またC言語スタイルのコメント以外は使えない。
- License Injector - Visual Studio Marketplace
- ライセンスヘッダの追加のみしか行ってくれない上に、MITライセンス決め打ちなので自分の用途に合っていない。
これらの拡張にContributeしてもよかったのですが、大元のコードが非常に短かかったので結局はじめから書き直すことになると思い、練習がてら自分で書いてみることにしました。
拡張を作った感想
豊富な公式ドキュメント
さすがはMSだなあと思ったのは、まず提供されているドキュメントの量と質。公式ドキュメントにチュートリアルもあり、手元で少し動かすだけで簡単に動かすことが出来ました。例えばこのあたりから読みはじめて手を動かすだけでした。
- Extending Visual Studio Code
- Your First Visual Studio Code Extension - Hello World
- Visual Studio Code Example - Word Count Extension
また実際に自分の拡張を書く際にもAPIリファレンスが整備されていたので、ドキュメントとエディタの補完だけですんなり書くことが出来ました。
Yeomanを使ったボイラープレートの提供
ドキュメントにも書いてありますが、Visual Studio Codeの拡張を作る際には決まった形のディレクトリ構成でコードを書き始めることになります。自分で用意するのは面倒ですが、Yeomanのボイラープレートが用意されてるのですぐに拡張を書き始めることが出来ます。楽ちん。
$ npm install -g yo generator-code $ yo code
標準でのテスト環境の提供
作った拡張がうまく動作しているかを確認するのも簡単で、デバッグタブからデバッグ実行を行うことで、バニラ環境に開発中の拡張を入れただけのVisual Studio Codeが立ち上がり、そこで開発中の拡張の振る舞いを確認することができます。ログは開発を行っている側のウィンドウで確認できるので、特に複雑な設定をしなくても十分な検証ができます。便利。
拡張の公開用ツールの提供
作った拡張を一般公開したい場合には、パッケージングをして中央レポジトリに登録するわけですが、それも専用のNode.js製ツールを使ってコマンド一発で公開ができます。
$ npm install -g vsce $ vsce publish
最初の1回目はもろもろと設定が必要ですが、それも公式ドキュメントに細かにスクリーンショット付きで記述してあるので、迷うこと無く設定ができました。
今後の予定
とりあえず日常用途で使う分には便利に使えるようになったので、細かなアップデートが出来ればなあと思っています。たとえば
- コメントスタイルを1行コメントと複数行コメントの両方を選択できるようにする
- いまはライセンスヘッダは、1行コメントがある言語はすべて1行コメントで、複数行コメントしかない言語はそちらを使って書くようにしている。
- shebangがある場合は2行目からライセンスヘッダを書くようにする
- 対応したはずなんだけどうまく動いてないようなのであとでやる
- プロジェクト内のファイル全体に一気にライセンスヘッダを挿入する
- あんまり自分が必要になってないのでやってない
おわりに
Visual Studio Codeは安定して開発が進んでいる印象で、バージョンが上がる度にデフォルト機能が良くなっているのも好印象です。個人的には、現状の挙動だと、文字を入力する度にフックを入れるようにするとどんどん動作が重くなってしまうので、補完系のツールは気をつけないと折角の軽い動作が損なわれてしまう可能性があるということで、その辺の改善が行われていくと良いなあと思っています。
明日は @albatrosary さんです。
