Visual Studio Code(以下、VS Code)はMicrosoftが無償で提供しているプログラミング向けのテキストエディタだ。今年11月、ベータ版がリリースされ、オープンソース化が発表された。ソースコードはGitHubで公開されている

名前こそVisual Studioの名を冠しているものの、Atom(本連載第169回~171回参照)と同様、マルチプラットフォーム対応のGUIツールキット「Electron」で開発されている。まだベータ版ではあるものの、Windows、Mac、Linuxで利用でき、実用にも十分な機能を備えている。今回はこのVS Codeの実力を探ってみたい。

Visual Studio CodeのWebサイト

プログラミング向けの基本機能

VS Codeはさまざまなプログラミング言語のシンタックスハイライトに対応している。また、CTRL+SPACEでコードアシスト機能を利用できる。通常はファイル内のキーワードを用いた単純な補完だが、HTMLファイルであればHTMLタグ、CSSであればセレクタやスタイルの指定などファイルの種類によってはコンテキストに応じた補完候補が提供される。

コードアシスト機能

HTMLの場合はコードアシストに加えてEmmetの展開もサポートされており、例えば「li*5」と入力してTABキーを押すと「<li></li>」5個分に展開してくれる。

また、HTMLやCSS、JavaScriptなどに関しては自動的にソースコードの構文エラーや警告をチェックしてくれる。エラー箇所にマウスを合わせると内容がツールチップで表示される。構文チェックの結果はステータスバーにも表示され、ここをクリックするとエラーの一覧からエラー箇所にジャンプできる。

コードチェック

JavaScriptのサポートが充実

VS Codeが特に威力を発揮するのは、なんといってもJavaScriptの開発だ。TypeScriptやECMAScript6、CommonJSなどもサポートされており、特にTypeScriptやECMAScript6利用時は型情報を生かした強力な補完機能やナビゲーション機能、リファクタリング機能などを利用できる。

JavaScriptのコードアシスト

なお、ECMAScript6を使用したい場合は作業ディレクトリに以下の内容でjsconfig.jsonというファイルを作成しておく必要がある。


{
  "compilerOptions": {
    "target": "ES6"
  }
}

また、VS Codeのタスク実行機能を使用してGulpやGruntを実行したり、サイドバーのデバッグビューではJavaScriptのデバッグを行ったりすることも可能だ。

:JavaScriptのデバッグ

標準でGitもサポート

Gitも標準サポートされている。サイドバーをGitビューに切り替えることでファイルのステージング、コミット、リモートリポジトリへのプッシュやプルといった操作ができる。また、ウィンドウ左下にはブランチ名が表示されており、ここからブランチの作成や切り替えを行うことが可能だ。

サイドバーからGitの操作が可能

スタータスバーのブランチ名をクリックするとブランチ操作が可能

最近のソフトウェア開発ではGitHubやBitBucketといったサービスの普及もあり、Gitの利用が一般的になりつつある。標準でGitがサポートされているのはプログラミング向けのテキストエディタとしてはありがたいところだ。

Markdown編集環境としてのVisual Studio Code

プログラミング言語向けの機能だけでなく、Markdownのサポートも充実している。

Markdownのシンタックスハイライトはもちろんのこと、プレビューにも対応している。ウィンドウを分割することでプレビューしながらMarkdownの編集を行うことも可能だ。編集内容は即座にプレビューに反映され、動作も軽快だ。また、一部のMarkdown対応エディタのプレビュー機能のように、編集時にスクロール位置がずれてしまうといったこともないため、使いやすい。

Markdownプレビュー

VS Codeはデフォルトではテキストの折り返しに対応していないが、「Code」メニューの「Preferences」→「User Settings」で表示されるsettings.jsonに以下の設定を追記することで、ウィンドウ幅に合わせて折り返しできるようになる。ただし、折り返しの挙動が英文向けなのでいずれにしても日本語文書の編集にはあまり向いていないかもしれない。


{
  "editor.wrappingColumn": 0
}

プラグインによる拡張も可能

VS Codeはプラグイン機構も備えており、例えばデフォルトでサポートされていないプログラミング言語向けのシンタックスハイライト、コードチェック、デバッグといった機能をプラグインとして追加することが可能だ。プラグインはVisual Studioファミリー向けのマーケットプレイスで探すことができる。

Visual Studioマーケットプレイス

また、VS Code上からはF1で表示されるコマンドパレットからInstall Extensionコマンドを実行するとプラグインを選択してインストールすることができる。

プラグインのインストール

VS Codeはまだ登場してから日が浅いということもあってプラグインの数は少ないが、今後の充実に期待したい。

まとめ

VS Codeは非常に強力なプログラミング向けのエディタだ。特にJavaScript関連の機能が充実していることに加え、マルチプラットフォームに対応しているということもあり、Web開発向けテキストエディタの決定版となるかもしれない。利用にあたってはVS CodeのWebサイトで提供されているドキュメントにも目を通しておくといいだろう。

今後もVS Codeの進化に要注目だ。