スポンサーリンク
概要
VSCodeでTypescriptを使ってデバッグできる所までを忘備録としてメモに。
スポンサーリンク
前提
Mac上でVSCode及びNode.jsをインストール済の環境。
VSCode 1.28.0
Node.js 8.12
それ以外にVS拡張として
nom 0.3.5
TSLint 1.0.4.0
などをインストールしています。
スポンサーリンク
スポンサーリンク
空のフォルダの生成
プロジェクトのルートとなる、空のフォルダを作成し、VSCodeで開く。
npmの初期化
画面上部のターミナル→新しいターミナルを選択する。
ターミナルが表示されら、から下記のコマンドを実行する。
npm init -y
下記のようなpackage.jsonファイルが作成される。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
{ "name": "nodeTest", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [], "author": "", "license": "ISC" } |
不用な設定をカットし、private項目を追加しtrueとする。
|
1 2 3 4 5 6 7 |
{ "name": "nodeTest", "version": "1.0.0", "description": "", "main": "src/index.js", "private": true } |
追加フォルダの作成
ルートに以下のフォルダを追加
.vscode
src
build
srcがtypescriptファイル、buildがトランスパイル結果のjsファイルを格納する場所として利用。
typescript
下記のコマンドを実行する。devDependenciesにTypescriptが追加される。
npm i -DE typescript ts-node
インストール後に以下のコマンドを実行する。
node_modules/.bin/tsc --init
tsconfig.jsonがルートに作成される。
設定を下記のように書き換える。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
{ "compilerOptions": { "target": "ES2017", "module": "commonjs", "sourceMap": true, "outDir": "build", "strict": true }, "include": [ "src/**/*" ] } |
トランスパイルを試す
srcフォルダ以下にindex.tsファイルを作成し、下記のようなコードを打ち込む。
|
1 |
console.log("hello typescript!!"); |
ターミナル→ビルドタスクの実行 を選択して、tsc:ビルド を選択。
buildフォルダ以下にindex.jsが出力される。
|
1 2 3 |
"use strict"; console.log("hello typescript!!"); //# sourceMappingURL=index.js.map |
デバッグ実行
.vscode/lunch.josnを作成する。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
{ "version": "0.2.0", "configurations": [ { "type": "node", "request": "launch", "name": "プログラムの起動", "program": "${workspaceFolder}/build/index.js", "preLaunchTask": "tsc: build - tsconfig.json", "outFiles": [ "${workspaceFolder}/build/**/*.js" ] } ] } |
作成後、ブレークポイントを張ってデバッグ実行を行い、止まる事を確認する。
TSLintインストール
静的解析としてTSLintをインストール
ターミナルから下記を実行する
npm i -DE tslint
実行後、下記コマンドで初期化を実施する。
node_modules/.bin/tslint --init
実施すると、tslint.jsonが生成される。
生成されたファイルの内容を変更する。
①rulesを追記。(console.logでエラーを出すルールを除外)
②defaultSeverityをerrorからwarnに変更。(TSLintで検出事項をerrorではなくwarnとして扱う）
|
1 2 3 4 5 6 7 8 9 10 11 |
{ "defaultSeverity": "warn", "extends": [ "tslint:recommended" ], "jsRules": {}, "rules": { "no-console": false }, "rulesDirectory": [] } |
下記のように警告が出るようになる事を確認する。
