Как отлаживать файлы typescript в коде Visual Studio
используя версию 0.3 визуального кода студии, и я не уверен, как включить sourcemaps и отладить файл ts
Я получаю следующую ошибку can't launch program '/Projects/app-server/server.ts'; enabling source maps might help
как мне включить отладку sourcemaps и typescript. Sourcemap установлен в 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
}
]
}
Ответы
Ответ 1
Эта конфигурация отлично работает для меня:
Распределение проекта
|-- .vscode
|----- launch.json
|-- bin
|----- app.js
|----- app.js.map
|-- src
|----- app.ts
|-- node_modules
|-- [..]
|-- tsconfig.json
|-- [...]
Идея заключается в компиляции typescript в папке src
и поместите ее в папку bin
.
tsconfig.json
Это важно для активного параметра sourceMap
.
{
"compilerOptions": {
"emitDecoratorMetadata": true,
"module": "commonjs",
"target": "ES5",
"outDir": "bin",
"rootDir": "src",
"sourceMap": true
}
}
launch.json
==== EDIT ====
Это конфигурация, которую я использую в 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
(наше имя конфигурации)
- Наслаждайтесь!
![debuging]()
Ответ 2
Я думаю, что это стало проще и проще по сравнению с выпусками...
Я установил ts-node
, так что мои файлы конфигурации в конечном итоге очень просто...
launch.json
{
"name": "Launch index.ts",
"type": "node",
"request": "launch",
"runtimeArgs": [
"-r",
"ts-node/register"
],
"args": [
"${workspaceFolder}/src/index.ts"
]
}
Стоит отметить две вещи:
-
runtimeArgs
- передается узлу для регистрации ts-узла для обработки файлов TypeScript. - нет свойства
program
. Имя файла TS для запуска задается в качестве первого аргумента.
Таким образом, вам не нужно компилировать TS в JS, вы даже можете иметь модули, написанные на TS, которые еще не скомпилированы в JS.
Ответ 3
Это то, что работает для меня с последними TS и VsCode по состоянию на ноябрь 2017 года.
Следующая конфигурация поможет вам запустить сервер и отладить TS внутри VS Code
Вот что выглядит мой tsconfig.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 и сборка (содержащие результирующие переданные JS и файлы карт) живут бок о бок, что действительно помогает мне поддерживать логическую структуру каталогов.
Хорошо, теперь появляется версия запуска:
{
"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"
]
}
Ответ 4
Для более поздней версии VSCode от февраля /2017, это то, что сработало для меня (это комбинация того, что предоставляют @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"
]
}
Ответ 5
Ниже приведены тесты мокка-чей с точками останова. Он работает путем пересылки src в каталог lib, а затем запускает тесты в lib с помощью sourceMapping обратно в 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"
}
- Mac OSX 10.12.3 Sierra
- Код Visual Studio 1.10.1
- NodeJS v7.7.1
Ответ 6
Ответ @manu указал мне в правильном направлении; однако с последней версией VSCode у меня все еще была та же проблема. Это исправление, которое сработало для меня:
https://github.com/Microsoft/vscode/issues/13499
"outFiles": [ "${workspaceRoot}/js/*.js" ]
Ответ 7
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"
]
}
Ответ 8
Я только что написал свою собственную функцию PowerShell как preLaunchTask. Это может быть худшее решение, чем предыдущие, но может добавить дополнительную гибкость для ввода дополнительной задачи в поле preLaunchTask. Поскольку в настоящее время он не поддерживает массив и позволяет запускать только одну задачу перед запуском.
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