クロスプラットフォームでオープンソースな IDE 環境、Visual Studio Code が公開されたので試してみた。

拡張を入れなくても、デフォルトで JavaScript の「自動 Lint」「Grunt、Gulp 連携」「デバッグ」が動いた。なんだかすごく便利そうな予感。

Windows 環境で起動してみたらこんな画面だった。

なんか黒いが、色は好みにカスタマイズできるし、プリセットからも選べる。

フォルダーを開くことから始まる

Visual Studio Code にはプロジェクトの概念はない。

[File] > [Open Folder] からフォルダーを開けばよい。

ためしに、過去に作った Node.js 製の livereloadx のフォルダーを開いてみた。

左側にツリーが表示されている。プロジェクト内のファイルを開くにはツリー上でクリックしてもいいし、Ctrl+P を押せば、ファイル名でインクリメンタル検索できる (上の図では fi と入力しているので、filter.js や config.js が引っかかってる)。

ファイル内の文字列で検索するには、左の虫眼鏡を押すか、Ctrl+Shift+F から。

自動 Lint

左下の警告マークのところに 4 と出てるのでクリックしてみると、Buffer とか __dirname が見つからないといわれた。

警告をクリックして、電球マークをクリックすると、「node.d.ts をダウンロードする」というオプションがでてきた。

d.ts は TypeScript の型定義ファイル。これの Node.js 用を自動的に落とせるようだ。

落とすと警告は減った。が・・・本当に対処したほうがいいやつが出てきた・・・。

ESLint と JSHint に対応しているらしい。

Git 連携！

コードを修正すると、左側の Git マークのところに数字が！

Git マークを押すと、最後のコミットから変更されたファイルが出てくる。git status の GUI 版みたいな感じ。

ファイルを選択すると差分が分かるし、＋マークを押すと git add するし、矢印を押すと変更を破棄できる。上の部分にメッセージを書くとコミットできる。

Git フレンドリー！

Grunt, Gulp 連携

Ctrl+Shift+T を押すと、何も設定してないのに単体テストが走った!!

右側に単体テストの結果が表示されている。

理由は Gruntfile.js に test というタスクが登録してあるから。Visual Studio Code さんは、Grunt や Gulp、Jake のタスクを自動的に解釈してくれているのだ。

他にも build というタスクがあれば、Ctrl+Shift+B でビルドが走るらしい。カッコイイ。

もちろん、それ以外のタスクも開始できる。

F1 から Run Task を入力すると、実行できるタスクの一覧が出てくる。ためしに、watch タスクを選択すると、IDE 内において「編集したら、Lint して単体テスト、結果を表示」というフローが実現できた。カッコイイ。

デバッグ!!!

コードの適当なところに F9 でブレークポイントを設定して、F5 でデバッグを開始してみる。

「Node.js と Mono のどっちをデバッグする？」と聞かれた。拡張を入れたら他の言語もデバッグできるらしい。

ここでは Node.js を選ぶ。

.vscode/launch.json が開くので、ここで何をデバッグするか設定する。

program のところで開始する JS ファイルを指定してみた。

再度、F5 でデバッグを始める。

ブレークポイントで止まった。

左上の Variables にはローカル変数やクロージャー内の変数の値が出てくる。左下にはスタックトレースがある。

F10 でステップオーバー、F11 でステップイン、Shift+F11 でステップアウトできるのは Visual Studio と同じ。

他にも機能はたくさん

まだまだ確認しきれていないが、機能はたくさんあるようだ。

• TypeScript なら変数名の変更やシンボル名での検索にも対応してるらしい。
• コードスニペットは、特定の文字を入力して、Tab を押したら定型文を挿入してくれるので便利そう。
• CSS (Sass, Less) にも対応してる。Lint するし、Ctrl+Shift+O でシンボルに飛べる。
• この記事の Markdown を Visual Studio Code で書いているが、Ctrl+V でプレビューできる。

言語ごとに何ができるかは、ドキュメント の LANGUAGES の中をみると一通り書いてある。

エディターとしての機能はまだ確認しきれていない。Windows なら日本語は問題なく通る。折り返しできない (?) のが、今この記事を書いていて不便に感じる。動作はサクサクしている。

(追記) Workspace Settings から "editor.wrappingColumn" の値を変えたら、折り返し幅も変わった。

雑感

ここまでの機能がデフォルトで有効になっている、というのはなかなかの衝撃であった。

ほめちぎりすぎたので、最後に悪いところも書いておく。

現状の Visual Studio Code は、メインメニューやコンテキストメニューが状況に応じて変化しない。便利な機能を使うためには、ショートカットキーを覚えるのが前提になっている。ドキュメントを読まないと何ができるのか見当つかないし、ショートカットを覚えるコストも高い。

公式のドキュメントはよくできているので、一通り読めば分かるんだけど、言語ごとに使える機能に違いがあるので、そのあたりもややこしい。

自分は Visual Studio を普段使いしてるので、慣れてるショートカットキーがそのまま使えて、手触りはとてもよかった。