visual Studioコードのバージョン0.3を使用しており、ソースマップを有効にしてtsファイルをデバッグする方法がわからない
次のエラーが表示されますcan't launch program '/Projects/app-server/server.ts'; enabling source maps might help
ソースマップとTypeScriptデバッグを有効にするにはどうすればよいですか。私のソースマップはtrueに設定されています
tsconfig.json
{
"compilerOptions": {
"target": "ES5",
"module": "commonjs",
"sourceMap": true
}
}
launch.json
{
"version": "0.1.0",
// List of configurations. Add new configurations or edit existing ones.
// ONLY "node" and "mono" are supported, change "type" to switch.
"configurations": [
{
// Name of configuration; appears in the launch configuration drop down menu.
"name": "Launch server.ts",
// Type of configuration. Possible values: "node", "mono".
"type": "node",
// Workspace relative or absolute path to the program.
"program": "server.ts",
// Automatically stop program after launch.
"stopOnEntry": true,
// Command line arguments passed to the program.
"args": [],
// Workspace relative or absolute path to the working directory of the program being debugged. Default is the current workspace.
"cwd": ".",
// Workspace relative or absolute path to the runtime executable to be used. Default is the runtime executable on the PATH.
"runtimeExecutable": null,
// Environment variables passed to the program.
"env": { }
},
{
"name": "Attach",
"type": "node",
// TCP/IP address. Default is "localhost".
"address": "localhost",
// Port to attach to.
"port": 5858
}
]
}
この構成は私のためにうまく機能しています:
|-- .vscode
|----- launch.json
|-- bin
|----- app.js
|----- app.js.map
|-- src
|----- app.ts
|-- node_modules
|-- [..]
|-- tsconfig.json
|-- [...]
アイデアは、TypeScriptをsrc
フォルダーの下にコンパイルし、bin
フォルダーの下に配置することです。
sourceMap
オプションをアクティブにすることが重要です。
{
"compilerOptions": {
"emitDecoratorMetadata": true,
"module": "commonjs",
"target": "ES5",
"outDir": "bin",
"rootDir": "src",
"sourceMap": true
}
}
====編集====
これは、現在Visual Studio Code v1で使用している構成です。
{
"version": "0.2.0",
"configurations": [
{
"args": [],
"cwd": "${workspaceRoot}",
"env": {
"NODE_ENV": "development"
},
"externalConsole": false,
"name": "DEBUG",
"outDir": "${workspaceRoot}/bin",
"preLaunchTask": "compile",
"program": "${workspaceRoot}/src/app.ts",
"request": "launch",
"runtimeArgs": [
"--nolazy"
],
"runtimeExecutable": null,
"sourceMaps": true,
"stopOnEntry": false,
"type": "node"
},
{
"name": "Attach",
"type": "node",
"request": "attach",
"port": 5858
}
]
}
キーpreLaunchTask
は、タスクランナーを gulp として使用している場合に非常に役立つことに注意してください。IDEはタスクを名前で検出できるためです。
ts
をコンパイルします(端末で入力rm -r bin/ ; tsc
またはコンパイルタスクの実行)Launch type
(設定名)それはリリースを経てますますシンプルになったと思います...
ts-node
をインストールしたので、設定ファイルは非常にシンプルになります...
{
"name": "Launch index.ts",
"type": "node",
"request": "launch",
"runtimeArgs": [
"-r",
"ts-node/register"
],
"args": [
"${workspaceFolder}/src/index.ts"
]
}
注目に値する2つのことがあります。
runtimeArgs
-ts-nodeを登録してTypeScriptファイルを処理するためにノードに渡されます。program
プロパティはありません。代わりに、開始するTSファイルの名前が最初の引数として指定されます。そうすれば、TSをJSにコンパイルする必要はなく、TSで記述されたモジュールをまだJSにコンパイルされていない状態にすることもできます。
これが、2017年11月現在の最新のTSおよびVsCodeで私のために働いていることです
次の構成は、VS Code内でサーバーを起動してTSをデバッグするのに役立ちます
これは、mytsconfig.jsonのようなものです:
{
"compilerOptions": {
"declaration": false,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"lib": ["es2017", "dom"],
"module": "commonjs",
"moduleResolution": "node",
"outDir": "../build",
"sourceMap": true,
"target": "es2016",
"typeRoots": [
"../node_modules/@types"
]
},
"include": [
"**/*.ts"
],
"exclude": [
"../node_modules",
"../*.js"
]
}
そして、これは私のディレクトリ構造のようです:
注意を払えば、srcフォルダーとbuildフォルダー(結果のトランスポートされたJSファイルとマップファイルを含む)が並んで表示されるので、論理的なディレクトリ構造を維持できます。
さて、今すぐlaunch configが来ます:
{
"type": "node",
"request": "launch",
"name": "Start and Debug",
"preLaunchTask": "nb-tsc-watch",
"timeout": 10000,
"program": "${workspaceFolder}/backend/src/app.ts",
"restart": true,
"cwd": "${workspaceRoot}",
"outFiles": [
"${workspaceFolder}/backend//build/**/*.js"
],
"sourceMaps": true
}
使用したいpreLaunchTaskを使用することも、スキップすることもできます。スキップした場合、TSをJSに手動で変換する必要があります。
これがタスクで行うことですnb-tsc-watch
{
"label": "nb-tsc-watch",
"type": "TypeScript",
"tsconfig": "backend/src/tsconfig.json",
"option": "watch",
"problemMatcher": [
"$tsc-watch"
]
}
以下のセットアップでは、ブレークポイントを使用してmocha chaiをテストします。これは、srcをlibディレクトリにトランスパイルし、sourceMappingを使用してlibでテストを実行してsrcに戻します。
。vscode/launch.json
{
"type": "node",
"request": "launch",
"preLaunchTask": "tsc",
"name": "Run Mocha",
"program": "${workspaceRoot}/node_modules/mocha/bin/_mocha",
"args": ["lib/**/*.js"],
"cwd": "${workspaceRoot}",
"sourceMaps": true,
"outFiles": ["${workspaceRoot}/lib/**/*.js"]
}
tsconfig.json
{
"compilerOptions": {
"module": "commonjs",
"sourceMap": true,
"outDir": "lib",
"target": "es6"
},
"include": [
"src/**/*.ts"
],
"exclude": [
"node_modules"
]
}
。vscode/tasks.json
{
// See https://go.Microsoft.com/fwlink/?LinkId=733558
// for the documentation about the tasks.json format
"version": "0.1.0",
"command": "tsc",
"isShellCommand": true,
"args": ["-p", "."],
"showOutput": "silent",
"problemMatcher": "$tsc"
}
package.jsonインストール済みモジュールを表示します。スクリプトはデバッグとは無関係です。
"scripts": {
"test": "mocha --compilers ts:ts-node/register src/**/*.spec.ts",
"test:coverage": "nyc -e '.ts' npm test"
},
"dependencies": {
"@types/chai": "^3.4.35",
"@types/mocha": "^2.2.39",
"@types/node": "^7.0.5",
"@types/sinon": "^1.16.35",
"chai": "^3.5.0",
"mocha": "^3.2.0",
"nyc": "^10.1.2",
"sinon": "^1.17.7",
"ts-node": "^2.1.0",
"TypeScript": "^2.2.1"
}
2017年2月現在のVSCodeのより新しいバージョンでは、これが私にとってうまくいったものです(@manuと@tommy Falgoutの両方が提供しているものの組み合わせです):
Json outファイルはdestフォルダーにあり、ソースはsrcフォルダーにあると想定しています
/。vscode/launch.json
{
"version": "0.2.0",
"configurations": [{
"type": "node",
"request": "launch",
"name": "Launch",
"sourceMaps": true,
"stopOnEntry": true,
"console": "internalConsole",
"cwd": "${workspaceRoot}",
"program": "${workspaceRoot}/src/main.ts",
"outFiles": ["${workspaceRoot}/dest/*.js"]
},
{
"type": "node",
"request": "attach",
"name": "Attach to Process",
"port": 5858,
"outFiles": []
}
]
}
tsconfig.json
{
"compilerOptions": {
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"sourceMap": true,
"module": "commonjs",
"outDir": "dest",
"rootDir": "src"
},
"exclude": [
"node_modules"
]
}
@manuの答えは、正しい方向を示してくれました。ただし、VSCodeの最新バージョンでは、まだ同じ問題がありました。これは私のために働いた修正です:
https://github.com/Microsoft/vscode/issues/13499
"outFiles": [ "${workspaceRoot}/js/*.js" ]
2017/12/17
。vscode/launch.json `` `json
{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.Microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"program": "${workspaceRoot}/src/index.ts",
"outFiles": [
"${workspaceRoot}/dist/index.js"
],
"sourceMaps": true,
"stopOnEntry": false,
"args": [],
"cwd": "${workspaceRoot}",
"env": {
"NODE_ENV": "development"
},
"console": "internalConsole",
"preLaunchTask": "compile",
"name": "DEBUG"
},
{
"type": "node",
"request": "attach",
"name": "Attach to Process",
"port": 5858
}
]
}
。vscode/tasks.json
{
// See https://go.Microsoft.com/fwlink/?LinkId=733558
// for the documentation about the tasks.json format
"version": "2.0.0",
"tasks": [
{
"label": "compile",
"type": "TypeScript",
"tsconfig": "tsconfig.json",
"problemMatcher": [
"$tsc"
],
"group": {
"kind": "build",
"isDefault": true
}
}
]
}
tsconfig.json
{
"compilerOptions": {
"declaration": false,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"moduleResolution": "node",
"target": "es5",
"module": "commonjs",
"sourceMap": true,
"outDir": "dist",
"rootDir": "src"
},
"include": [
"**/*.ts"
],
"exclude": [
"node_modules"
]
}
PreLaunchTaskとして独自のPowerShell関数を作成しました。これは以前のソリューションよりも悪いソリューションになる可能性がありますが、preLaunchTaskフィールドでより多くのタスクを注入する柔軟性を追加できます。現在、配列をサポートしていないため、起動アクションの前に実行できるタスクは1つだけです。
launch.json
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Node.js",
"program": "${file}",
"preLaunchTask": "RebuildTypeScript",
"outFiles": [
"${workspaceRoot}/js/**/*.js"
]
}
]
}
tasks.json
{
"version": "2.0.0",
"tasks": [
{
"type": "TypeScript",
"tsconfig": "tsconfig.json",
"group": {
"kind": "build",
"isDefault": true
}
},
{
"taskName": "RebuildTypeScript",
"type": "Shell",
"command": "Powershell ./RebuildTypeScript.ps1",
"group": "none",
"presentation": {
"reveal": "never"
}
}
]
}
RebuildTypeScript.ps1
$currentDir = Split-Path -Path $MyInvocation.MyCommand.Definition -Parent
function CompileTypeScriptFiles($folder) {
$tsFiles = Get-ChildItem $folder -Filter "*.ts" -Recurse
$tsFiles | ForEach-Object {
$tsFile = $_.FullName;
$options = $tsFile + " --outDir js --sourceMap"
Start-Process "tsc" $options
}
}
CompileTypeScriptFiles $currentDir