■ はじめに
Visual Studio Code の拡張をはじめて作りました。（自分向け） marketplace.visualstudio.com
この記事では、経緯や作る過程などをまとめます。
■ 経緯
このブログもそうなのですが、Markdown を書くことがよくあります。1つ個人的な悩みがあるのが表の書き方です。どうも横に長くなりがちなので苦手です。
|Header 1|Header 2|Header 3| |:------|:------|:------| |Column 1-1|Column 1-2|Column 1-3| |Column 2-1|Column 2-2|Column 2-3|
以下のような HTML を書いていたこともあり、表の見た目の再現性よりも縦長に書くほうが慣れていました。
<table> <tr> <th>Header 1</th> <th>Header 2</th> <th>Header 3</th> </tr> <tr> <td>Column 1-1</td> <td>Column 1-2</td> <td>Column 1-3</td> </tr> <tr> <td>Column 2-1</td> <td>Column 2-2</td> <td>Column 2-3</td> </tr>
そこで、以下のようにネストしたリストを書くと表の形式に変換できたらいいなと思いました。
- - Header 1 - Header 2 - Header 3 - - Column 1-1 - Column 1-2 - Column 1-3 - - Column 2-1 - Column 2-2 - Column 2-3
markdown、こう書いたら表になってほしいと思う時がある pic.twitter.com/jSKxBrl9HN
— よこち(yokochi) (@akira6592) 2019年1月4日
VS Code を普段使っていますが、既存の Markdown 関係の拡張機能を調べてみても該当の機能を持つものがなかったので、作ることにしました。 もしかしたら既存であったかもしれませんが、 VSCode の拡張はいままで作ったことがなかったので勉強のためにもやることにしました。
■ 開発から公開までの全体の流れを知る
こちらを参考の記事をにさせていただきました。
■ 開発〜公開
Hello World で雰囲気をつかむ
https://code.visualstudio.com/api/get-started/your-first-extension
このページに、Hello World を表示させるだけの簡単なチュートリアルがあります。 こちらを元にして少し修正してみたりして、雰囲気をつかみました。
サンプル一式のリポジトリは、Microsoft/vscode-extension-samples です。
実装
API リファレンスや、既存の拡張機能のソースを読んだりしながら、やりたいことを実装していきました。 TypeScript 自身が初めてだったのですが、VS Code で開発するとデバッグがしやすかったです。
Markdown のリストを読み込む部分は、おそらく VS Code 自身が持っている機能を利用したかったのですが、やり方が分からなかったので、ちょっとしたパース処理を書くことにしました。
テストコード
Hello World のチュートリアルで生成するプロジェクトに、簡単なテストコードも含まれていました。そのテストコードを参考にして書いていきました。 Mocha というテストフレームワークを使っているようです。
リリース準備
拡張機能の名前やバージョン番号、作成者などの情報を package.json というファイル名のマニフェストファイルに書いていきます。
Marketplace 上の説明ページなどにも利用されます。
各項目の説明は Extension Manifest に書かれています。
マニフェストファイルもやはり、既存の拡張機能のものをお手本にさせていただきました。
リリース
Publishing Extension というページに従いました。
■ 感想とまとめ
いつかなにか作ってみたいなと思っていたのですが、ようやく重い腰をあげることができまいした。やってみると思ったよりは簡単にできました。 ただ、まだまだ API リファレンス の見方になれていないため「あのプロパティはどこで拾えるんだろう？」などを調べるのが少し時間かかりました。 今回でいうと、選択中の文字列の取得や、エディタとして設定されている改行コードです。
モノや環境としてはまだまだ改善点があったり、引き続きちょっとずつ取り組んでみたいと思います。
