VSCodeでTypeScriptをデバッグする環境をつくってみた

# VSCodeでTypeScriptをデバッグする環境をつくってみた

環境作った足跡メモです。
色々と雑でごめんなさい。

## やりたいこと
- 目的：VSCodeでTypeScriptをデバッグしたい
- 要件
    1. ブレークポイントを設定してデバッグしたいのはTypeScript（生成されたJSではない）
    2. 開いているtsファイルをデバッグ対象にしたい（index.tsなどに固定しない）
    3. 生成した js ファイルは ./build/js/ に生成する

## TypeScriptが動く環境にする

流れは、以下

1. nodeが動く状態を確認（入ってなければ導入）
2. npmで拡張できる状態
3. npmでTypeScriptを入れる
  
### nodeが動く状態を確認

```
$ node -v
v11.13.0
```

入ってなければいれる。
macだったらbrewあたり。
自分はnodebrew入れたりしてます。

### npm確認

```
$ npm -v
6.9.0
```

### TypeScript導入

```
$ npm install -g -y typescript
```

-g そのマシンの共通として入れるオプション
-y だまってイエッサー

typescriptパッケージが入ったことの確認（npmから）

```
$ npm info typescript version
3.6.4
```

TypeScriptのtscコマンドが入ったことの確認

```
$ tsc -v
Version 3.6.4
```

## VSCodeの環境づくり開始

TypeScriptが入ったら環境をつくる

```
$ tsc --init
```
を実行して tsconfig.jsonというコンパイル定義ファイルを生成しておく。
後に、実行時のコンパイルで呼ばれます


### 動作の流れ

1. launch.json に今回のデバッグ「Launch TypeScript」を定義する
2. 実行前のコンパイルが必要なので、デバッグ定義ファイル（launch.json）の事前処理(preLaunchTask)にコンパイルタスク「Compile TypeScript」を指定する
3. コンパイルタスク「Compile TypeScript」をタスク定義ファイル(tasks.json)に定義する

####  launch.json

vscodeにて生成されるlaunch.jsonにLaunch TypeScriptを定義する

```
{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Launch JavaScript @index.js",
            "program": "${workspaceFolder}\\index.js",
            "outFiles": [
                "${workspaceFolder}/**/*.js"
            ]
        }
       **ここに追加***
    ]
}
```

以下を上記のところに追加する

```
        ,
        {
            "type": "node",
            "request": "launch",
            "name": "Launch TypeScript",
            "preLaunchTask": "Compile TypeScript",
            "cwd": "${workspaceFolder}",
            "program": "${file}",
            "outFiles": [
                "${workspaceFolder}/build/**/*.js"
            ]
            
        }
```

- name: タスク名
- preLaunchTask: 次のtasks.jsonのlabelと併せます
- cwd: 実行する場所
- program: 実行対象ファイル（今回は開いているtsになる）
- outFiles: コンパイル済みのjsファイルを示す（ToDo:詳細はもうちょっと調べる）

元の定義の後ろに「,」を忘れずに

#### tasks.json

tasks.jsonにCompile TypeScriptを定義する

```
{
    "version": "2.0.0",
    "tasks": [
      {
        "label": "Compile TypeScript",
        "type": "typescript",
        "tsconfig": "tsconfig.json",
        "problemMatcher": [
            "$tsc"
        ],
      }
    ]
}
```

- label: launch.jsonのpreLaunchTaskと併せます
- type: "typescript"
- tsconfig: さきほど"tsc --init" で生成したやつです
- problemMatcher:（ToDo:詳細はもうちょっと調べる）

#### tsconfig.json

コンパイルオプションの定義

```
{
  "compilerOptions": {
    "target": "es5", 
    "module": "commonjs",
    "jsx": "preserve",
    "outDir": "./build/js/", 
    "strict": true,  
    "sourceMap": true,
}
```

- target: どのバージョンとしてコンパイルするか
- outDir: jsファイルの生成先
- sourceMap: 関連付けファイルの生成(.mapファイル)



### デバッグ

- test.tsというファイルを作ってみる

```
let message1 : string = "hello1";
console.log(message1);
let message2 : string = "hello2";
console.log(message2);
```

- console.logの2箇所にブレークポイントを設定。
- VSCodeから対象ファイル ${file} （今回は test.ts）を開いている状態で「Launch TypeScript」を押してデバッグ開始

ちゃんとブレークポイントで止まりました。
画像は２つのブレークポイントまで進めたところ

![キャプチャ3.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/435600/4a07121e-30e4-99e8-f30e-90783befccb0.png)