VisualStudioCodeの使い方-サンプルで便利機能を試す

サンプルコードを利用してVisual Studio Codeのgit連携やデバッグ実行といった機能を試してみたいと思います。

コーディング一切無しでこれらの機能を試すことができるようになっていますので、興味があるけどまずは簡単に試してみたいという方は参考にしてください。

VisualStudioCodeをインストール

Visual Studio Code(以下VSCode)をインストールする前に事前準備として、nodeとgitが必要になります。本記事の解説でもnodeとgitは使うので、インストールされていない場合はインストールしておいてください。

nodeダウンロードサイト
gitダウンロードサイト

VSCodeのインストールは、以下の公式サイトからインストーラをダウンロードして実行するのみです。
VisualStudioCode公式サイト

ただし、この記事を書いている時点では、言語設定を日本語で使用していると問題があります。VSCodeでは「コマンドパレット」を使用して、様々な機能を呼び出すのですがここも日本語になってしまいます。

メニューの日本語化はできているが、コマンドパレットのコマンドも日本語化されてしまっている

これでは使いにくいですね。この点は不具合として認識されており、近々修正される模様です。修正されるまでは以下の手順で言語設定を英語にして使用するしかありません。

1. 「F1」キーを押してコマンドパレットを開く
2. コマンドパレットに「言語設定」と入力して選択する
3. 言語設定ファイルが開かれて「”locale”:”en-US”」となっていることを確認してVSCodeを再起動する。

言語設定はなぜか最初から英語になっているので、上記の通り一度開いて再起動すればOKみたいです。もし、「ja-JP」となっていた場合は「en-US」と修正してから保存し、再起動してください。

Microsoftのサンプルコードをダウンロード

インストールが完了したら早速機能を試してみましょう。とはいえソースコードがないとデバッグやビルドなどの機能を試すことはできません。ここではMicrosoftが公開しているサンプルコードを利用します。

Windows以外の環境だと最後の「code .」でVSCodeを開くには事前に設定が必要になります。面倒であれば、VSCodeを直接起動して、フォルダの選択から「node-express-javascript」を選択しましょう。

これで準備完了です。次章から機能を試していきます。

デバッグ実行

まずはデバッグ実行してみましょう。

デバッグ実行は左側の「Debug」タブを押してデバッグ画面を開き、上部に表示される再生ボタンを押すのみです。

再生ボタンを押して実行したあと、ブラウザで「http://localhost:3000/」に接続するとページが表示されるかと思います。

次にブレークポイントを張って停止させてみましょう。routesフォルダの中にあるindex.jsを開いて、12行目にブレークポイントをセットしてみてください。
ブレークポイントは行数の左側クリックするか、その行にカーソルがある状態で「F9」をクリックすることでセットすることができます。

ブレークポイントをセットしたら、ブラウザに戻って「Quick Start」のリンクをクリックしてみましょう。VSCodeに戻るとブレークポイントの行が黄色く表示されるかと思います。

この状態で再びデバッグタブを開くと、「VARIABLES」のところに変数が表示されます。ツリーを展開することで変数の内容を確認することができます。例えばLocalのres内にはレスポンスの内容がセットされていますね。

「WATCH」のところには変数を自分でセットして、確認することができます。例えば「+」ボタンを押して「res.statusCode」と入力してみましょう。「200」が表示されることが確認できます。(開くのが2回目以降の場合は「304」と表示されるかもしれません。)

簡単にデバッグ実行をすることができました。VisualStudioを使ったことのある人ならお馴染みの操作ですね。

今回は試しませんが、フロントエンド側のjavascriptについても同様の手順でブレークポイントでとめて、変数の内容確認をしたりすることができます。ただしIE、Edgeであれば拡張なしでいけるのですが、Chromeでやろうと思うと拡張機能などの設定が別途必要になります。この辺はまた近いうちに試したら記事にしたいと思います。

タスクランナーでビルドとテストの実行

gulpやGruntといったタスクランナーもVSCode上で実行可能です。試しにVSCode上で「Ctrl+Shift+T」を押してみてください。

OUTPUTコンソールが表示され、テストの結果が表示されたかと思います。これはgulpfile.jsのtestタスクが実行された結果です。

まずはgulpfile.jsを確認してみましょう。以下はmochaを利用したテストタスクの部分のみ抜粋しています。

次に.vscodeフォルダ内のtasks.jsonを開いてみましょう。

「test」タスクが定義されていてisTestCommandがtrueになっていますね。これは先程のgulpのtestタスクをテストコマンドとして設定している部分になります。この設定により、先ほどのショートカットからテストを実行できた訳です。

同じようにビルドコマンドにはlessのコンパイルが登録されています。こちらは「Ctrl+Shift+B」で実行可能です。実行してみるとテストの時と同じように、OUTPUTコンソールに完了が表示されたかと思います。

完了と同時に左側に数字が表示されましたね?これについては次章のgit連携にて解説します。

git連携を試す

前章のビルド実行の結果、表示されるようになった数字ですが、これはgitリポジトリに対して変更されたファイル数を表します。

数字が表示されているgitタブをクリックしてみてください。CHANGESの下に先ほどビルドした結果変更されたstyle.cssが表示されています。これをクリックすると…

エディタ部分が画面2分割され、差分が確認できていますね。

このようにgit連携では違いのあるファイル一覧と、その差分をVSCode上で確認することができます。

VSCode上からCommitやPushも実行することができます。このサンプルコードはMicrosoftのリポジトリなので、このままではPushはできませんが、Commitだけやってみましょう。

左上のMessageボックスに「test」と入力して、「Ctrl+Enter」を押します。これだけでコミット完了です。CHANGESの下からstyle.cssも消えたかと思います。

Intellisenseを試す

最後にVisualStudioのお家芸、Intellisenseを試してみましょう。

app.jsファイルを開いて、適当な行で「’test’」に続いて「.」を打つと、文字列に関するjavascritpの関数が候補に表示されます。更にそれぞれには簡単な機能説明が付いています。(英語ですが。。)

引数についても書かれているので、英語が読めなかったとしても、あとちょっと思い出せないとかいう時には便利ですね。

ちなみに使えるのはネイティブ関数だけではありません。様々なjsライブラリについてもIntellisenseは利用可能です。

適当な行で今度は「app」に続いて「.」と打ってみましょう。Expressの関数が候補に表示されます。

ライブラリのIntellisense用の定義情報は、「typings」フォルダの中にあります。例えば上記のExpressの場合はexpressフォルダの中のexpress.d.tsにおいて定義されています。

定義ファイルについてはtsdやtypingsといったコマンドを使用することでインストールできます。これらの使い方の説明についても、詳細はまた別の機会に書きたいと思います。

まとめ

ひとまず機能を試すという目的でここまで進めてきましたが、いかがでしたでしょうか?

初期インストールの状態でソースコードの編集だけでなく、デバッグ実行や自動テスト、gitによるソース管理などの作業が全てVSCode上で完結できる便利さを体感できたのではないでしょうか?

そしてVSCode自体は非常に軽量です。ブログタイトルにあるとおり、私は非常に低スペックなネットブックでVSCodeを使ってみたのですが、問題なく使うことができています。

まだまだv1.0.0がリリースされたばかりで、言語設定の問題など発展途上の部分も多いですが、開発も活発に行われており、今後更に使いやすくなっていくと思われます。

今回紹介しきれなかった機能もたくさんあるので、随時試した機能を記事にしていきたいと思います。