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


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

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

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

## はじめに

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

- [Visual Studio Code Blog](https://code.visualstudio.com/blogs)

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

## 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 以降で日本語環境の場合：

![install-command-line-script.png](https://qiita-image-store.s3.amazonaws.com/0/27976/bd173dcf-d508-04ec-64c2-4d923396b5fe.png "install-command-line-script.png")

英語環境の場合：  

![install-vscode-command-line.jpg](https://qiita-image-store.s3.amazonaws.com/0/27976/10178c6f-9385-c5b8-e9b7-f19b339952b4.jpeg "install-vscode-command-line.jpg")


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

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

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


## エディタの特徴

### 編集画面

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

![vscode-panel.jpg](https://qiita-image-store.s3.amazonaws.com/0/27976/feb91c58-9aeb-c980-2511-e16e5b577c2c.jpeg "vscode-panel.jpg")

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

一覧はこちら。

- [Key Bindings for Visual Studio Code](https://code.visualstudio.com/Docs/customization/keybindings)


## タスクの実行

### gulpのタスクの起動

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

- Command  + Shift + P

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

#### Command  + Shift + P -> task

![select-tasks.jpg](https://qiita-image-store.s3.amazonaws.com/0/27976/e9d5dd0e-e664-95a8-4298-2153e03b8e22.jpeg "select-tasks.jpg")

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

![select-gulp-tasks.jpg](https://qiita-image-store.s3.amazonaws.com/0/27976/eede32ec-2cb6-4f74-9486-4940f0f632f3.jpeg "select-gulp-tasks.jpg")

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

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

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

- [Editing TypeScript (Visual Studio Code公式サイト) ](https://code.visualstudio.com/Docs/languages/typescript)

#### 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](https://github.com/Microsoft/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が立ち上がり、デバッグが開始されます。

![debug-with-chrome.jpg](https://qiita-image-store.s3.amazonaws.com/0/27976/636e52de-b67e-06bc-ba90-208a83985f77.jpeg "debug-with-chrome.jpg")

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

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

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

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

![ext-install.jpg](https://qiita-image-store.s3.amazonaws.com/0/27976/ceca9fdc-5697-ca83-e54e-325f0764fd57.jpeg "ext-install.jpg")



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

- [Visual Studio Marketplace](https://marketplace.visualstudio.com/VSCode)

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


## 今回のまとめ

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

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

- [TypeScript Tutorial](http://www.typescriptlang.org/Tutorial)

## 更新履歴

####20160416

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

####20160330

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