Visual Studio Codeに関してMarkDown用Editorとしての一面も見せながら紹介

この投稿は インタープリズム的「俺達私達の進捗を上げる25個前後のTips」 Advent Calendar 2015 - Qiitaの18日目 の記事です。

はじめに

こんにちは。ito.yです。
このブログを見ている方々は、各々お気に入りのエディターを使っている方が多いのではないでしょうか。
今回は、エディター選択の幅を広げる意味で、今年発表されたエディターであるVisual Studio Code に関して紹介したいと思います。

Visual Studio Codeについて

Visual Studio Codeとは、今年の4月にプレビュー版、11月にβ版が発表されたばかりのMicroSoft製のコードエディターです。特徴をいくつか上げると下記のようなものがあります。

クロスプラットフォーム

今までのVisual Studio製品はWindowsのみでしか使用できませんでしたが、本製品はMac, Linuxでも利用可能です。

軽量

現在の時点(Ver0.10.3)での容量はインストーラーで約40MB, インストール先フォルダで約170MBです。

様々な言語に対応

現在の時点で標準対応している言語は以下の通りです。

機能	言語
シンタックスハイライト、括弧のマッチング	Batch, C++, Clojure, Coffee Script, Dockerfile, F#, Go, Jade, Java, HandleBars, Ini, Lua, Makefile, Objective-C, Perl, PowerShell, Python, R, Razor, Ruby, Rust, SQL, Visual Basic, XML
上記に加えてスニペット対応	Groovy, Markdown, PHP, Swift
上記に加えてインテリセンス、構文チェック、アウトラインに対応	CSS, HTML, JavaScript, JSON, Less, Sass
上記に加えてリファクタリング、すべての参照の検索に対応	TypeScript, C#

拡張機能

上記で挙げた以外の言語サポートやデバッグサポートに関してもインストールすることが可能です。自分で作成し、公開することも可能です。

Markdown用のEditorとして使用しながら機能紹介

実際に、Visual Studio CodeをMarkdown用のEditorとして使用しながら、上記以外の特徴も含めて紹介します。

ソース編集画面

編集画面はこんな感じです。 f:id:interprism:20151214225026p:plain
Markdownの場合は簡単なものしかないですがスニペットにも対応しており、Ctrl+スペースで選択出来ます。 f:id:interprism:20151214225208p:plain
f:id:interprism:20151214225616p:plain

コマンドパレット機能

Ctrl+Shift+pを押すことでコマンドパレットを呼び出すことができます。コマンドパレットでは各種操作を文字列で検索し、実行することができます。 f:id:interprism:20151214225844p:plain 単語の一部を入力しただけで補完が効きますし、自分で設定したものも含めてショートカットキーの確認もできますのでかなり便利です。 f:id:interprism:20151214225901p:plain

Git連携

Visual Studio Codeは標準でGitをサポートしています。左上のバーにある下から2番目のボタンを押すことでgitメニューが開きます。 f:id:interprism:20151214230004p:plain
Initialize git repository を押すことで現在ワークスペースとして使用しているフォルダに対してローカルリポジトリを作成できます。 f:id:interprism:20151214230018p:plain
作成するとフォルダにある未コミットのファイルが表示されます。右にある＋ボタンを押すことでファイルをAddの状態にすることができ、メッセージを入力しコミットボタンを押すことでコミットできます。
f:id:interprism:20151214230025p:plain

コミット後に変更したファイルは画面右上のSwitch To Changes Viewのボタンを押す、あるいはコマンドパレットからGit: Open Changeを選択することで変更差分を出すことができます。 f:id:interprism:20151214230108p:plain

Markdownのプレビュー画面

Ctrl+Shift+vを押すとプレビュー画面に切り替えることができます。 f:id:interprism:20151214230518p:plain
また、Ctrl+k v を押す、もしくはコマンドパレットからMarkdown: Open Preview to the Sideを選択することで、プレビュー画面を分割した画面で表示することができ、プレビュー画面を見ながら編集することが可能です。 f:id:interprism:20151214230630p:plain プレビュー画面で使用されるCSSファイルは、設定画面でパスを通すことで、独自のcssファイルを適用することができます。 githubで公開されているCSSを取得し、適用してみたところこのように変更できました。 f:id:interprism:20151214230939p:plain
f:id:interprism:20151214230952p:plain

拡張機能

コマンドパレットからExtensions: Install Extensionを選択する、あるいはCtrl+pで呼び出せるコマンド画面からext installと入力することでインストールが可能な拡張機能を確認できます。 f:id:interprism:20151214231259p:plain
試しにMarkdownに対応したスペルチェック用の機能をインストールしてみます。 f:id:interprism:20151214231413p:plain
インストール後再起動することで機能が有効になります。 f:id:interprism:20151214231525p:plain
スペルチェックを有効にした画面です。固有名詞なども誤字として検出されてしまっているので IgnoreListに登録する必要がありますが、スペルミスが多い方にはよいかもしれません。
インストールした拡張機能に関してはコマンドパレットからExtensions: Show Installed Extensionsを選択することで確認でき、この画面からアンインストールすることも可能です。

タスクランナーを使用したMarkdownのhtml変換

Visual Studio Codeにはタスクランナーと呼ばれる機能があり、設定した情報を基に任意のコマンドを実行することができます。この機能を使用すればMarkdown用のコンパイラを呼び出してhtmlを作成することがVisual Studio Code上で可能です。手順は次の通りです。

Markdown用のコンパイラをインストールする。（今回はmarkdown-itを使用します。）
```
npm install -g markdown-it
```

コマンドパレットで`Tasks: Configure Task Runner`を選択することでタスクランナーの設定を呼び出しtasks.jsonを書き換えます。

{
    "version": "0.1.0",                       // バージョン
    "command": "markdown-it",                 // 実行するコマンド
    "isShellCommand": true,                   // 呼び出すコマンドが外部のコマンドの場合true
    "showOutput": "silent",                   // 出力方法の指定（`silent`, `always`, `never`から選択可能）
    "args": ["sample.md", ">", "sample.html"] // コマンドに渡す引数
}

これで準備完了です。コマンドパレットからTasks: Run Build Taskを選択する、あるいはCtrl+Shift+Bを実行することで設定したTaskを実行でき、記述したMarkdownファイルをhtmlに変換して出力することが可能です。 f:id:interprism:20151214234646p:plain