読者です 読者をやめる 読者になる 読者になる

interprism's blog

インタープリズム株式会社の開発者ブログです。

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#

デバッグ機能内蔵

Node.jsアプリのデバッグをサポートしています。

拡張機能

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

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上で可能です。 手順は次の通りです。

  1. Markdown用のコンパイラをインストールする。(今回はmarkdown-itを使用します。)
    npm install -g markdown-it
  2. コマンドパレットで`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

おわりに

紹介した内容的には公式ドキュメントに載っているような情報が多いですが、 英語なので敬遠している人や各機能の詳細を知らない方もいると思いますので画像付きでまとめて紹介してみました。
皆様のエディター選びの選択肢を1つ増やすことができたら嬉しいです。

参考リンク

Visual Studio Codeの使い方、基本の「キ」
Languages
Markdown and VS Code

インタープリズム的「俺達私達の進捗を上げる25個前後のTips」 Advent Calendar 2015 - Qiita19日目の記事

インタープリズムのページ

PAGE TOP