iPhoneでGrafanaのグラフを参照できるアプリGrafanizer作ってます。 詳しくはこちらへ

VSCode用に表示中のコードを印刷できる拡張機能を作った

Dec 1, 2017  
#vscode

これは Visual Studio Code Advent Calendar 2017 用に作成したポストです。

最近、エディタはもっぱら VSCode を使っています。 VSCode いいですよね。 同じElectronを使ってる Atom と比べて起動が早い感じがしますし、エディタに統合されたターミナル機能ってのは使ってみると想像以上に便利です。

ということで、このポストでは VSCode に印刷機能を追加する PrintCode という自作エクステンションを紹介したいと思います。

image

はじめに

最近のエディタには印刷機能がついてないので、複数のエディタを行きしなくてはいけなくて面倒って人は結構いますよね?

印刷機能がない Atom と流れが一緒?な VSCode にも当然?印刷機能はありません。(両方のルーツになってる感じにSublimeはどうなんでしょ?)

以前は Atom を使ってたのですが、いろいろありまして今は VSCode を使っています。 Atom を利用していたときも印刷機能がないことが不便だったのですが、実はその時は自分でパッケージを作成して対応してました。

Qiitaのポスト → 印刷機能のないAtomでコードを印刷するたった1つのマシな方法

そんな経緯もありまして、 Atom 用に作成したパッケージを VSCode 用に移植してみました。

制限

機能紹介の前に、まずは制限を説明しておきたいと思います。

印刷機能を追加したと言っても、 VSCode から直接印刷できるわけではありません。一度ローカルにHTMLを作成してそれをブラウザで開いて印刷するという動作になります。

Atom ではElectronを直接触れたので、隠しペインを作成し擬似的ですが直接印刷してるようにすることができました。しかし、どうも VSCode ではElectronを直接触ることができないようなので、一度テンポラリなHTMLを作成してブラウザで開きなおすという動作になっています。

将来的にElectronを直接触ることができるようになったり、もしかして実は触ることができるんだよってことであれば Atom パッケージと同じように擬似的な直接印刷をサポートしたいとは思っています。

機能紹介

では、ようやく機能を紹介したいと思います。

とは言っても、通常の拡張機能と同じようにインストールし、 F1 キーでコマンドパレットを表示させて PrintCode を選択するだけです。規定のブラウザが立ち上がり印刷ダイアログが表示されるはずです。

設定項目も少なく、タブサイズとフォントサイズを指定できるだけです。

詳しくは README を参照ください。

内部動作

ここまでだけではただの宣伝になってしまうので、少し内部的な話をしたいと思います。

内部的には下記の動作をしています。

  1. 表示中のコードを取得
  2. 表示中の言語を取得
  3. CodeMirror の対応言語からモードを取得
  4. 取得した情報を元にHTMLファイルを作成
  5. 作成したHTMLファイルを規定のWebブラウザで表示
  6. Javascriptで印刷ダイアログを表示

ほとんど Atom 版パッケージと変わりません。

が、次項の違いにより内部的なコードはかなりクリーンになり見通しが良くなりました。

また、 Atom ではCoffeScriptで実装したのですが、今回 VSCode ではPureJSで開発できましたので見慣れたコードになりこれだけでもかなり見通しが良くなってます。

Atom版パッケージとの比較

Atom パッケージのときは [highlight.js][] を使っていましたが、今回はコードのハイライト処理に CodeMirror を利用しています。

Atom 版パッケージを使ってた人がいるかわかりませんが、両方のライブラリを比較すると、

項目 highlight.js CodeMirror
対応言語 豊富 まあまあ豊富
テーマ 豊富 いまいち?
行番号表示 自作 サポート
折り返し表示 自作 サポート


という感じです。

今回は表示のキレイさより行番号表示や折り返し表示の安定性を優先して、 CodeMirror を採用しました。

ブラウザでの表示はそこそこコントロールできるのですが、印刷用の表示っていうのはなかなか面倒なんです。 なので、ライブラリが標準でサポートしてるというのは、かなりありがたかったです。

しかし、その代償として印刷用のテーマは固定にしちゃいました。あまり良いテーマがなかったということもあるのですが、ダークなテーマが多くて白い紙に印刷するのには適してなさそうなものばかりだったからです。

時間がとれたらデフォルトよりはマシなプリンタで印刷するのに最適なテーマなど作って見ようかなと思ってますが、こういうのって個人の好みもあるのでなかなか作る気力がわかないのですが...

開発全般について

Atom 用にもいくつかパッケージを作っていたこともあり、 VSCode 用の開発はそれほど時間がかかりませんでした。むしろ使い慣れたPureJSを使えるので効率は良いかもしれません。

ですが、公開するにあたってMSTSなるアカウントを取得するだとか、MarketPlaceへの導線が分かりづらいとか、GitHubに作ったリポジトリで大丈夫ということが分かる(最初はMSTSにGitリポジトリを作成した)までとか、 Atom では不要だったアイコンが必要だったとか、プログラム以外のところで時間がかかった感じです。

まあ、一度やればなんとか理解できましたけど。(それにしてもMSさんのサイトは情報量が多すぎてほんとわかりづらい...)

公開場所

ということで、最後にマーケットプレイスやリポジトリの紹介です。

まず、マーケットプレイスの場所はこちらになります。

https://marketplace.visualstudio.com/items?itemName=nobuhito.printcode

それと、GitHubのリポジトリはこちらになります。

https://github.com/nobuhito/vscode.printcode

まとめ

  • VSCode用に印刷機能を追加する拡張機能をつくったよ
  • Atom版とくらべて少し機能は落ちたけどその代わりに安定して使えると思うよ
  • MSのサイトはかなり分かりづらかったよ

Qiitaに書いた記事も未だにアクセスが多いし、すでに放置気味のAtom用パッケージのダウンロード数もまだまだ伸びてる。

印刷機能ってのはまだまだ需要がありそうなんだけど、GitHubにしてもMicrosoftにしてもかたくなに実装しないのは何故なんだろう?