Mac版 Visual Studio Codeを使ってみます #VSCode

すでにVisual Studio Codeについての情報はたくさん出ておりますので、こちらはわたしのメモとしまして。

以下の内容で記載しています。

はじめに：アップデートなど
試してみる理由
セットアップ / 調整
エディタの特徴（？）
タスクの実行
TypeScriptのコンパイル
TypeScriptのデバッグ（Chrome利用）

はじめに

初回投稿した時点から、Visual Studio Code (VS Code) はどんどん改良されています。いつのまにか嬉しい機能が付いていたりしますので、ぜひこちらの情報もチェックしてみてください！

Visual Studio Code Blog

こちらの記事にも、気がついた更新情報は追記していこうと思います。

Visual Studio Codeを試す理由

現在はフロント系を修行中...。
主にAngular 1系、CofeeScript での作業を行っています。ですが、世の中すでにAngular2が出ております。遅ればせながら、Angular2、そしてそれに先立ってTypeScriptも勉強しないとなあと思った次第。

無理に使っているエディタは増やさなくてもいい状況ですが、TypeScriptの勉強ならば、『やはり開発元のMicrosoftのツールを使うといいのでは？』と思い、Visual Studio Codeのスタートとなりました。

セットアップ

以下のセットアップ手順を参考にインストールします。

https://code.visualstudio.com/Docs/editor/setup

公式サイトでは、brewではなくパッケージ版が掲載されていますので、ダブルクリックして展開、インストール完了です。
（Windows版は試していませんが、各OSに対応したインストーラーがあります）

コマンドラインからの起動

20160330 Update:

v0.10.10 から、.bash_profileに設定を追加する方法ではなく、$PATHにVSCodeを起動するスクリプトを追加する方式になりました。

以下の方法で設定します。(v1.0.0以降での方法になります)

Command + Shift + Pを押して、Command Paletteを起動
「シェル」（もしくはshell)と入力すると、コマンドラインからの起動スクリプトをインストールするメニューが出ます。

v1.0.0 以降で日本語環境の場合：

英語環境の場合：

上記の設定後、/usr/local/bin/code というVSCode起動用のスクリプトがインストールされます。
.bash_profileで起動させていた場合は、deprecatedとして、『設定を削除してください』といったメッセージも出ます。（画面から.bash_profileの編集画面も開きます）

あとは、code と打てば起動します。

$ code . #開きたいディレクトリ指定で起動

エディタの特徴

編集画面

文字コード
- 基本はUTF-8ですが、Shift_JIS, EUCも編集可能です。（地味にありがたいです）
操作画面
- Gitやデバッグ、検索ツールは画面の左側に配置してあります。

表示されているメニューは以外と少なく、実際は表示されていない細かい機能についてのキーボードショートカットがたくさんあります。

一覧はこちら。

Key Bindings for Visual Studio Code

タスクの実行

gulpのタスクの起動

コードの編集は問題ありませんが、gulpのタスクを実行したりしたい。
この場合は、

Command + Shift + P

でコマンドパレットを開き、"task" と入力すると、タスクの実行やタスクの設定のためのメニューが出てきます。
Gulpfileで定義されているタスクの場合は、Run Taskを選ぶと、実行するタスクを選択するダイアログが出ますので、そこからbuildやserve、testが実行できます。

Command + Shift + P -> task

Run Taskからgulpのタスクを選択

TypeScriptのコンパイル / デバッグ

さて本題の、TypeScriptの学習用にVisualStudio Codeを利用する件です。
TypeScriptのコードは、実際の動作にはJSへのコンパイルが必要です。

こちらに、詳しい方法が書いてありますが、かいつまんでメモ。

Editing TypeScript (Visual Studio Code公式サイト)

tsconfig.json の設定

作業しているディレクトリ全体を、TypeScriptのプロジェクトとして扱う場合は、直下にtsconfig.jsonというファイルを置きます。

{
    "compilerOptions": {
        "target": "es5",
        "module": "amd",
        "sourceMap": true
    }
}

TypeScriptのプロジェクトであることを定義
コンパイルオプション(tscコマンドに対応）を指定
- 上記の場合、 tsc -m amd -t es5 --sourceMap と同じ

sourceMapの設定をしておくと、コンパイルされたJSと、元のTypeScriptのファイルの関連付けが出来るので、デバッグの際にも便利です。

.vscode/tasks.json の設定

基本はtsconfig.jsonで設定したフォーマットでコンパイルされますが、
更新されたら自動でコンパイルする...といったタスクランナーを設定します。

以下、サンプルです。

定義してあるタスクは、buildとwatch
buildオプションの -p は、対象のディレクトリ以下の*.tsを対象にする設定
watchの設定をいているので、*.tsファイルに変更があれば自動でビルド（コンパイル）する

vscode/tasks.json

{
    "version": "0.1.0",
    "command": "tsc",
    "isShellCommand": true,
    "windows": {
            "command": "tsc.exe"
    },
    "tasks": [
        {
            "taskName": "build",
            "isBuildCommand": true,
            "suppressTaskName": true,
            "args": ["-p","."],
            "problemMatcher": "$tsc"
        },
        {
            "taskName": "watch",
            "isBuildCommand": false,
            "isWatching": true,
            "suppressTaskName": true,
            "args": ["-w"], 
            "problemMatcher": "$tsc"
        }       
    ]
}

TypeScriptのデバッグ

まだサーバを利用したアプリケーションは作れていないのですが、ローカルのHTML・TypeScriptをブラウザと連携してデバッグしたい...。
今回は、Chromeの拡張を使ってみることにしました。

インストール

Command + Shift + P (またはCommand Paletteを表示)で、install と入力すると、Extension (プラグイン）のインストール可能なプラグインが表示されます。
"Chrome" と入力すると、Debugger for Chromeが表示されます。

こちらが、プラグインのリポジトリになります。

vscode-chrome-debug

.vscode/launch.json の設定

こちらはデバッグ用の設定になります。

以下、Chromeを使ってデバッグするためのサンプルです。
デフォルトでは、作業ディレクトリのgreeter.html を開くような設定です。

リモートデバッグではなく、まずはローカルのファイルを開いてのデバッグであれば、1つめの設定。

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch greeter.html",
            "type": "chrome",
            "request": "launch",
            "file": "./greeter.html",
            "sourceMaps": true
        },
        {
            "name": "Launch localhost with sourcemaps",
            "type": "chrome",
            "request": "launch",
            "url": "http://127.0.0.1:8080/greeter.html",
            "sourceMaps": true
        },
        {
            "name": "Attach",
            "type": "chrome",
            "request": "attach",
            "port": 9222,
            "sourceMaps": true
        }
    ]
}

画面左のデバッグ（虫）ボタンを押すとデバッグ用のパネルが表示されます。
再生ボタンを押すと、Chromeが立ち上がり、デバッグが開始されます。

SouceMapの設定を行っているため、コンパイル後のJavaScriptではなくCoffeScript側のブレークポイントも有効になります。

拡張機能　/ プラグイン情報 (v1.0以降)

v1.0に切り替えた後、プラグイン情報がとても充実していたのに気がついたので、ちょっと紹介します。

拡張機能に関するメニューは、画面の左下の四角いアイコンをクリックすると表示されます。アップデートがあれば、このアイコンにマークがつきます。
また、おすすめの拡張機能を表示することも出来ます。

拡張機能の一覧は、こちらになります。

Visual Studio Marketplace

非常にたくさんの種類があって、検索もしやすく、面白いです！
面白そうなものがあれば、また紹介したいと思います。

今回のまとめ

ということで、Visual Studio CodeでTypeScriptのデバッグができるところまで試してみました。Mac上にVisual Studioのアイコンが表示されるのも不思議な感じがしますが、個人的にはシンプルで良いなあと思います。

本題のTypeScriptの学習も、下記をベースに進めていきたいと思います！（うまくいくといいのですが....）

TypeScript Tutorial

更新履歴

20160416

v1.0.0のリリースで、日本語対応されましたので、画像、情報を追加しました。

20160330

コマンドラインからの起動方法について修正しました。

Mac版 Visual Studio Codeを使ってみます