Visula Studio Code で超簡単・拡張機能の必要最小限のデバッグ環境を構築してみる(TypeScript編)

まずは、JavaScriptのデバッグ環境を構築する

まずは、JavaScriptで作成した拡張機能(Extension) の最低限のデバッグ環境を構築し、 Visula Studio Code で超簡単・拡張機能を作ってみる(JavaScript・デバッグ環境無編) で作成した JavaScript の超簡単な拡張機能(Extension)をデバッグ起動してみます。

Node.js をインストールするまでは、Visula Studio Code で超簡単・拡張機能の必要最小限のデバッグ環境を構築してみる(JavaScript編) で構築したデバッグ環境と同じです。 既に Node.js をインストール済の方は、こちらから参照されてください。

typescriptファイルを設置します。

拡張機能ディレクトリ/sample/ 配下に拡張機能 typescript ファイル( "hello.ts" )を設置します。
このコードは、Visula Studio Code で超簡単・拡張機能を作ってみる(JavaScript・デバッグ環境無編) で使用した javascript を typescript へ変換したものです。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

//  vscode モジュール(Visual Studio Code モジュール )を読み込みます。
import * as vscode from 'vscode';
 
//  この拡張機能が有効になった時に呼ばれる関数になります。
export function activate(context: vscode.ExtensionContext) {
	//  vscodeで利用できるように 'hello.sayHello' というコマンドを登録し、該コマンドが実行されたときの関数を同時に定義します。
	var disposable = vscode.commands.registerCommand('hello.sayHello', () => {
		//  'hello.sayHello' コマンドが実行されたら、情報画面にて 'Hello World!' を表示します。
		//	your source code...
		vscode.window.showInformationMessage('Hello World!');
	});
	//  context : Exetensionオブジェクト(vscode.ExtensionContext)になります。
	//  そのオブジェクトにここで定義したコマンドを設定(追加)します。
	context.subscriptions.push(disposable);
}

Node.js をインストールします。

Node.jsは、VSCode に基本（ベースとなっているソフトウェア）でもありますし、TypeScript を利用する上でも必須です。

https://nodejs.org/ja/download/releases/ から、 現在インストールしている VSCodeが使用している Node.js と同じバージョンをダウンロードファイルし、インストールします。

ここでは、v6.11.2 をダウンロードし、 適当なディレクトリに解凍します。(ポータブル版なので、そこがインストール先ディレクトリとなります。)

続けて、環境設定でインストール先のパスを PATH 環境に追加します。

環境が整っているか、確認しておきます。

適当なディレクトリで node が実行できるか確認しておきます。
以下のようにバージョン情報が確認できれば、PATHの設定ができています。 もし、うまく出力されない場合は、こちらの環境設定を再度実行してみてください。

C:\temp> node -v
v7.4.0

次に、同じように適当なディレクトリで npm が実行できるか確認しておきます。
以下のようにバージョン情報が確認できれば OK です。 もしうまく出力されない場合は、先のダウンロードしたファイルに誤りがなかったか再確認にしてください。

C:\temp> npm -v
4.0.5

最後に、同じように適当なディレクトリで Visual Studio Code が実行できるか確認しておきます。
以下のようにバージョン情報が確認できれば、PATHの設定ができています。 もし、うまく出力されない場合は、こちらの環境設定にならって、 PATH に Visual Studio Code のインストール先の code.cmd があるパスを追加してみてください。

C:\temp> code -v
1.15.1
41abd21afdf7424c89319ee7cb0445cc6f376959

TypeScriptのデバッグ環境を構築する

引き続き、TypeScriptのデバッグ環境を構築していきます。

typescript をインストールします。

# typescript をインストール
C:\temp> npm install typescript -g
c:\node\tsc -> c:\node\node_modules\typescript\bin\tsc
c:\node\tsserver -> c:\node\node_modules\typescript\bin\tsserver
c:\node
`-- typescript@2.5.2

# typescript のバージョンを確認する
C:\temp> tsc -v
Version 2.5.2

正しくパスを設定できていないと、違うバージョンが表示されたります。 nodeへのパスが正しいか確認しましょう。 （特に Visual Studio などをインストールしていると そちらのパスが優先しているかもしれないので、確認してみてください。）

パッケージの依存関係およびスクリプトを設定します。

拡張機能ディレクトリ/sample/ 配下の 拡張機能マニフェストファイル( "package.json" )を編集します。

今回対象となるパッケージの開発時、リリース時の依存パッケージをそれぞれ指定します。 また、typescriptのコンパイル時のスクリプトイメージ、ならびに、パッケージをインストールした時のスクリプトを記述します。

[ .../extensions/sample/package.json ] ( 詳しい解説は、こちらを参照してください。)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

{
  "name": "hello",
  "displayName": "hello",
  "description": "super simple vsc sample",
  "version": "0.0.1",
  "publisher": "hoge",
  "engines": {
    "vscode": "^1.12.0"
  },
  "categories": [
    "Other"
  ],
  "activationEvents": [
    "onCommand:hello.sayHello"
  ],
  "main": "./hello",
  "contributes": {
    "commands": [
      {
        "command": "hello.sayHello",
        "title": "Super Simple Sample "
      }
    ]
  },
  "scripts": {
    "vscode:prepublish": "tsc -p ./",
    "compile": "tsc -watch -p ./",
    "postinstall": "node ./node_modules/vscode/bin/install",
    "test": "node ./node_modules/vscode/bin/test"
  },
  "devDependencies": {
    "typescript": "^2.0.3",
    "vscode": "^1.0.0",
    "mocha": "^2.3.3",
    "@types/node": "^6.0.40",
    "@types/mocha": "^2.2.32"
  },
  "dependencies": {
    "marked": "^0.3.6"
  }
}

25行目から追加になります。 以下に、各設定項目の意味を解説しておきます。

• scripts 必須[ N ]

  npm’s scriptsと同じですがextra VS Code specific fieldsを使用できます。

  • vscode:prepublish

    パッケージがパッケージ化および公開される前に実行するコマンドになります。開発ディレクトリにて "npm install" を実行した時にも実行されます。
    "tsc" は、typescriptのコンパイルコマンドです。 -p パラメータは、コンパイル対象ディレクトリ or ファイルとなります。

  • compile

    コンパイル実行時のコマンドになります。
    "tsc" は、typescriptのコンパイルコマンドです。 -watch パラメータは、ファイルの更新を確認します。更新時は、コンパイルを実行します。 -p パラメータは、コンパイル対象ディレクトリ or ファイルとなります。

  • postinstall

    パッケージがインストール後に実行するコマンドになります。

  • test

    npm test にて実行されるコマンドになります。

  "npm install" を実行すると、"prepublish" と "postinstall" が実行されることになります。

• dependencies 必須[ N ] パッケージ名 : バージョン情報

  拡張機能に必要なランタイムNode.js依存関係を指定します。npm’s dependenciesと同じです。（実行に必要なパッケージの定義になります。）
  ここでは、以下のようになります。

  • typescript 2.0.3 以上

    typescriptパッケージになります。これは、TSコンパイルには必須です。

  • vscode 1.0.0 以上

    vscodeパッケージになります。これは、vscode の拡張機能を使う場合、必須です。

  • mocha 2.3.3 以上

    Node.js でのテストフレームワークになります。これは、デバッグ環境では、必須です。

  • @types/node 6.0.40 以上

    typescript で必要となる node の型定義ファイルになります。

  • @types/mocha 2.2.32 以上

    typescript で必要となる mocha の型定義ファイルになります。

  ここで指定している依存パッケージは、基本的に、typescriptとNode.jsのデバッグ環境になります。

• devDependencies 必須[ N ] パッケージ名 : バージョン情報

  拡張機能に必要なデベロップメントNode.js依存関係を指定します。npm’s devDependenciesと同じです。（パッケージの開発に必要なパッケージの定義）

  • marked 0.3.6 以上

    マークダウンパッケージになります。これは、readme.md のためかな？

  ここで指定している依存パッケージは、基本的に、js の動作環境に依存したものはありません。Visula Studio Code で超簡単・拡張機能を作ってみる(JavaScript・デバッグ環境無編) で何も指定していなかったのは、そのためです。

パッケージの依存関係のパッケージをインストールします。

カレントディレクトリ( 拡張機能ディレクトリ/sample/ )から、以下のように "npm install" を実行し、依存したパッケージを ".\node_modules" へインストールします。

# npm install を使って環境に依存したパッケージをインストールします。
.\extensions\sample> npm install
...
> hello@0.0.1 postinstall .\extensions\sample
> node ./node_modules/vscode/bin/install

Detected VS Code engine version: ^1.0.0
Found minimal version that qualifies engine range: 1.0.0
Fetching vscode.d.ts from: https://raw.githubusercontent.com/Microsoft/vscode/fa
6d0f03813dfb9df4589c30121e9fcffa8a8ec8/src/vs/vscode.d.ts
vscode.d.ts successfully installed!

hello@0.0.1 .\extensions\sample
+-- @types/mocha@2.2.43
+-- @types/node@6.0.88
+-- marked@0.3.6
+-- mocha@2.5.3
| +-- commander@2.3.0
| +-- debug@2.2.0
...

typescript のコンパイル条件を設定します。

拡張機能ディレクトリ/sample/ 配下の typescript をコンパイルする時のコンフィグファイル( "tsconfig.json" )を編集します。
このファイルには、コンパイルのパラメータを指定します。

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

ここでは、最小限の指定を行っています。 指定がない場合は、デフォルト値が使用されます。（出力先などは、デフォルト値であるカレントディレクトリとなります。）

• compilerOptions

  tsc のコンパイルオプションになります。

  • target

    ECMAScript のターゲットバージョン: "ES3" (default), "ES5", "ES6"/"ES2015", "ES2016", "ES2017" or "ESNext"(最新) のいずれかを指定します。

  • module

    モジュールコード生成の指定: "None", "CommonJS", "AMD", "System", "UMD", "ES6", "ES2015" or "ESNext"(最新) のいずれかを指定します。

  • sourceMap

    対応する .map ファイルを生成するか否かを指定します。 デバッグ情報などを含むコンパイル時に作成されるソースコードとのマップ情報ファイルになります。

パッケージ内のtypescriptをコンパイルします。

カレントディレクトリ( 拡張機能ディレクトリ/sample/ )から、以下のように "tsc" を実行し、 typescriptをコンパイルします。

# typescriptをコンパイルします。
.\extensions\sample> tsc
...
# エラーがなければ何も出力されません。
# jsファイルが出力されているか確認します。
.\extensions\sample> dir *.js
...
2017/09/13  08:31             1,312 hello.js
...

TypeScriptのデバッグ実行する

ここまでに、コンパイル環境、パッケージ環境が整いました。 最後にデバッグ実行環境を整えます。

tasks.json JavaScript の拡張機能(Extension)をデバッグしてみる。

拡張機能ディレクトリ/sample/.vscode/ 配下にタスクランナー コンフィグファイル( "tasks.json" )を編集します。

コマンドパネル( Ctrl + Shift + P ) を表示し、"タスクランナーの構成( Tasks: Configure Task Runner )" を選択し、 タスクの種別に "Others" を選択することでデフォルトのタスクランナー コンフィグファイル( "tasks.json" )を作成します。 以下は、出力されたデフォルトの "tasks.json" ファイルです。

{
	// See https://go.microsoft.com/fwlink/?LinkId=733558
	// for the documentation about the tasks.json format
	"version": "2.0.0",
	"tasks": [
		{
			"taskName": "echo",
			"type": "shell",
			"command": "echo Hello"
		}
	]
}

上記のものを以下のように編集します。

{
	// See https://go.microsoft.com/fwlink/?LinkId=733558
	// for the documentation about the tasks.json format
	"version": "2.0.0",
	"tasks": [
		{
			"taskName": "compile-completions",
			"type": "shell",
			"command": "npm",
			"isBackground": true,
			"args": ["run", "compile", "--loglevel", "silent"],
			"problemMatcher": "$tsc-watch"
		}
	]
}

• tasks

  マルチタスク定義になります。

  • taskName

    タスク名

  • type

    タスク種別 "shell" , "process" のいずれかです。ただし、 "npm" や "typescript" などを指定することもできます。 各タイプによってパラメータの指定方法も変わってきます。

  • command

    実行するコマンドになります。

  • isBackground

    バックグランドで実行するか否かを指定します。

  • args

    command で実行するコマンドに対して渡すパラメータになります。 2番目の引数は、"package.json" の "scripts" 内で定義されている "compile" 部分が実行されることを意味しています。

  • problemMatcher

    command で実行した結果の問題を検出するためのキーワード設定になります。 ここでは既に定義されている "tsc -w" のエラー出力マッチング定義を利用しています。

TypeScriptをデバッグ実行する

ここまで、できたら デバッグ起動(F5) でデバッグ実行してみましょう。

ブレイクポイントを適当なところに設定しておきます。

デバッグ起動(F5) でデバッグ実行します。

上図のようにVSCodeが起動されるはずです。

その起動したVSCode からコマンドパネル(Ctrl + Shift + P)を起動します。

コマンドパネル に "sample" を入力すると、"Super Simple Sample" が表示されるはずなので、そちらを起動します。

上図のような通知メッセージが表示されればOKです。

ブレイクポイントをブレイクできたか確認しておきます。

OKのようですね。