Hatena::ブログ(Diary)

hnwの日記 このページをアンテナに追加 RSSフィード

[プロフィール]
 | 

2016年5月22日(日) 勝手にMarkdownプレビューを開くVS Codeのエクステンションを書いた このエントリーを含むブックマーク このエントリーのブックマークコメント

Visual Studio Code(以下VS Code)、みなさん使ってますか?VS CodeはMicrosoftが開発しているオープンソースエディタです。Electronベースという意味ではAtomと似た存在ですが、Atomより軽いという評判を聞いたりします。


私も最近VS Codeを使い始めました。いまのところMarkdown編集専用という状況ではありますが、便利に使っています。それだけでなく、「Auto-open Markdown Preview」というエクステンションを書いて自分好みの挙動になるようにしてみました。本稿ではその顛末について紹介します。


ちなみに作業はすべてMacOSX上で行いましたが、WindowsでもLinuxでも同様だと思います。


作ったもの

今回、「Auto-Open Markdown Preview」というエクステンションを作りました。Markdownファイルを開いた場合に、自動的にプレビュー画面も開くというものです。


Auto-Open Markdown Preview導入前

f:id:hnw:20160522123147g:image


Auto-Open Markdown Preview導入後

f:id:hnw:20160522123148g:image


大した差では無いように見えるかもしれませんが、個人的な感覚としては凄い便利になりました。Markdown編集するときには常にプレビューしたいに決まっているじゃないですか。


もちろん意見には個人差があります。差があるからこそカスタマイズ性が大事だと思うんですよね。


Auto-Open Markdown Previewのインストール

このエクステンションインストールは簡単で、VS Code上で「F1」を押して「>」を消して「ext install auto-open markdown」とタイプすればインストール候補として出てきます。


f:id:hnw:20160522123146g:image


以下、これを実現するまでの流れを紹介します。


VS Codeのエクステンションとは

すでに紹介した通りVS Codeにはエクステンションの仕組みが用意されており、ユーザーの手でエディタ機能を拡張することができます。エクステンションJavaScriptまたはTypeScriptで書くことができますが、TypeScriptで書いている人が大多数のようです。


また、書いたエクステンションVisual Studio Marketplaceに誰でも無料でパブリッシュすることができます。エクステンションパブリッシュすると上で紹介したようにVS Code本体のエクステンション検索機能でインストール候補として表示されますので、多くのユーザーに簡単に使ってもらえるような仕組みになっています。


エクステンションの作成

VS Codeエクステンションを作るための道具はnpmに登録されています。あのMicrosoftがnpmに自社ツールを登録するなんて…と不思議な気持ちになるのは私だけでしょうか。それはさておき、さっそく準備していきましょう。


$ npm install -g yo generator-code
$ yo code

     _-----_
    |       |    .--------------------------.
    |--(o)--|    |   Welcome to the Visual  |
   `---------´   |   Studio Code Extension  |
    ( _´U`_ )    |        generator!        |
    /___A___\    '--------------------------'
     |  ~  |
   __'.___.'__
 ´   `  |° ´ Y `

? What type of extension do you want to create? (Use arrow keys)
> New Extension (TypeScript)
  New Extension (JavaScript)
  New Color Theme
  New Language Support
  New Code Snippets

指示に従って適当に答えていくとエクステンション名のディレクトリが作られ、その下にひな形が生成されます。また、node_modules以下に必要モジュールがnpm installされます。


自動生成直後の状態では、「Hello World」と表示するだけのextensionが作られています。


$ code --disable-extensions .

上記のようにエクステンションディレクトリをVS Codeで開き、「F5」を押せばエクステンションデバッガ上で動作します。この環境では、ブレークポイントを置いたり変数値を確認したりしながらエクステンション開発ができます。


詳しくは下記URLを参照してください。



エクステンションパブリッシュ

上記の環境で開発が一段落したら、まずパッケージングしてみましょう。


$ npm install -g vsce
$ vsce package

このようにnpmでvsceパッケージをインストールしてコマンドを打てばプロジェクトディレクトリに*.vsixファイルが出来ます。これがVSCodeのエクステンションパッケージになります。これをVS Codeでオープンすればパッケージがインストールされます。


$ code vscode-auto-open-markdown-preview-0.0.1.vsix

Marketplaceへのパブリッシュもコマンド一発です。ただし、Visual Studio Team ServicesMicrosoftの無料リポジトリ&イシュートラッキングサービス、以下VSTS)のアカウントと、VSTS上で発行されるアクセストークンが必要です。


$ vsce create-publisher hnw
$ vsce login hnw
$ vsce publish

詳しくは下記URLを参照してください。



まとめ

VS Codeの挙動に不満があったら自分でエクステンションを作れば解決できるかもしれないこと、またVS CodeのエクステンションをMarketplaceに公開するまでのハードルは非常に低いということを紹介しました。まだまだエクステンションまわりは資料が少ないという印象ですが、Microsoftの公開している資料やVS Code自体のソースコードTypeScript部分が多い)があれば何とかなると思います。


皆さんも便利なエクステンションを書いて公開してみてはいかがでしょうか。

トラックバック - http://d.hatena.ne.jp/hnw/20160522
 | 
ページビュー
2672511