我有VSCode 0.5.0。我将compilerOptions标志设置为＆＃34; ES6＆＃34;编辑器开始认识到我的ES6代码是正确的。 我安装了babel。 我的Mocha测试使用babel编译器，我的测试通过。 当我使用babel-node启动它时，我的应用程序从命令行运行没有问题。 当我从VSCode中调试应用程序时，它启动时没有ES6支持，并且应用程序因ES6语法问题而失败。 是否有我错过的调试设置？
答案 0 :(得分：19)
以下是如何让VSCode调试器与Babel 6 +一起使用：
首先在本地安装依赖项：
$ npm install babel-cli --save
$ npm install babel-preset-es2015 --save
然后运行babel-node：
$ node_modules/babel-cli/bin/babel-node.js --inspect --presets es2015 -- server.js --inspect
默认情况下，调试器将侦听端口5858，因此请确保端口在launch.json中匹配Attach配置：
{
"name": "Attach",
"type": "node",
"request": "attach",
"port": 5858
}
现在将调试器附加到VSCode中：
Attach而不是Launch <强> Nodemon
虽然不是必需的，但如果您还想在不重新启动服务器的情况下使用nodemon来获取代码更改，则可以执行以下操作：
确保已安装nodemon：
$ npm install nodemon --save-dev
运行服务器
$ node_modules/.bin/nodemon node_modules/babel-cli/bin/babel-node.js --inspect --presets es2015 -- server.js --inspect
最后，如上图所示附加调试器。
答案 1 :(得分：8)
假设您在项目中安装了babel-cli作为本地模块，则以下内容应该有效。
<强> launch.json
{
"version": "0.2.0",
"configurations": [
{
"name": "Launch",
"type": "node",
"request": "launch",
"program": "${workspaceRoot}/node_modules/babel-cli/bin/babel-node.js",
"stopOnEntry": false,
"args": [
"${workspaceRoot}/server.js"
],
...
答案 2 :(得分：8)
您可以尝试babel-register（您还需要其他伴侣babel模块）：
npm install --save-dev babel-register
在这些行中使用launch.json配置：
{
"version": "0.2.0",
"configurations": [
{
"name": "Launch",
"type": "node",
"request": "launch",
"program": "${workspaceRoot}/src/index.js",
"stopOnEntry": false,
"args": [],
"cwd": "${workspaceRoot}",
"preLaunchTask": null,
"runtimeExecutable": null,
"runtimeArgs": [
"--nolazy",
"--require",
"babel-register"
],
"env": {
"NODE_ENV": "development"
},
"console": "internalConsole",
"sourceMaps": true,
"outFiles": [
]
},
{
"name": "Attach",
"type": "node",
"request": "attach",
"port": 5858,
"address": "localhost",
"restart": false,
"sourceMaps": false,
"outFiles": [],
"localRoot": "${workspaceRoot}",
"remoteRoot": null
},
{
"name": "Attach to Process",
"type": "node",
"request": "attach",
"processId": "${command.PickProcess}",
"port": 5858,
"sourceMaps": false,
"outFiles": []
}
]
}
这基于vscode-debug-nodejs-es6松散地添加了babel-register运行时参数。
答案 3 :(得分：6)
默认情况下，VSCode只使用--debug-brk选项启动节点。这还不足以启用ES6支持。如果您可以找到'babel-node'传递给节点的选项，您可以在VSCode启动配置中指定相同的选项（通过runtimeArgs属性）。但这并没有解决babel-node在运行之前转换ES6代码的问题。
或者，您可以尝试将启动配置中的'runtimeExecutable'设置为'babel-node'。这种方法适用于其他节点包装器，但我还没有验证它是否适用于babel-node。
第三个选项（应该可以使用）是使用VSCode的附加模式：对于这个启动babel-node来自命令行的'--debug'选项。它应该打印一个端口号。然后在VSCode中使用该端口创建“附加”启动配置。
答案 4 :(得分：6)
在VS Code Terminal中，使用--inspect参数启动服务器：
nodemon --inspect --watch src --exec node_modules/.bin/babel-node --presets react,es2015 src/server.js
在其他行中，将显示调试器正在侦听的端口：
...
Debugger listening on port 9229
...
创建以下调试配置：
{
"type": "node",
"request": "attach",
"name": "Attach to Port",
"address": "localhost",
"port": 9229
}
启动调试器，如果一切正常，您将在输出终端中看到：
Debugger attached.
从现在开始，您可以调试您的应用程序。
答案 5 :(得分：1)
有两种方法：
使用npm命令提示符的第一个选项
在package.json文件中创建将执行babel的构建命令
{
"scripts": {
"build": "babel src --out-dir dist --watch --source-maps"
},
"devDependencies": {
"babel-cli": "^6.23.0",
"babel-preset-es2015-node6": "^0.4.0",
"eslint": "^3.16.0"
}
}
在launch.json中输入以下代码：
{
"configurations": [
{
"name": "Launch",
"type": "node",
"request": "launch",
"program": "${workspaceRoot}/src/index.js",
"stopOnEntry": false,
"args": [],
"cwd": "${workspaceRoot}",
"runtimeArgs": [
"--nolazy"
],
"sourceMaps": true,
"outFiles": [
"${workspaceRoot}/dist/**/*.js"
]
}
]
}
打开cmd窗口，导航到package.json文件并执行：
npm run build
打开您的VS代码并运行您的代码。它将运行，它将在所有断点处停止。它起作用的原因是因为生成了源映射，并且VS知道如何将它们映射到您的代码。
使用VS Code任务的第二个选项：
在VS Code中添加以下任务（Ctrl + Shift + P）并输入'Tasks：Configure Task Runner'：
将以下代码添加到tasks.json文件
{
"version": "0.1.0",
"command": "${workspaceRoot}/node_modules/.bin/babel",
"isShellCommand": true,
"tasks": [
{
"taskName": "watch",
"args": [
"src",
"--out-dir",
"dist",
"--watch",
"--source-maps"
],
"suppressTaskName": true,
"isBuildCommand": true
}
]
}
现在执行任务，但按Ctrl + Shift + B（构建命令），现在您可以运行和调试代码。 VS Code和npm在第一步中所做的一样。
您还需要在.babelrc（位于项目的根目录）文件中配置babel，如下所示：
{
"presets": [
"es2015-node6"
]
}
和jsconfig.json（位于项目的根目录中）
{
"compilerOptions": {
"target": "ES6"
},
"include": [
"src/**/*"
]
}
答案 6 :(得分：0)
babel-node＆amp;与代码附加
在package.json中配置npm脚本：
"scripts": {
"debug": "babel-node --debug-brk demo.js --presets es2015,stage-2"
}
添加vs代码调试配置：
{
"name": "Attach",
"type": "node",
"protocol": "legacy",
"request": "attach",
"port": 5858
}
答案 7 :(得分：0)
使用bael-node进行转换时，应在脚本中添加“--inspect-brk”，以便在遇到断点时脚本可能会中断。
例如：
"start": "babel-node --inspect-brk app.js --presets es2015,stage-2"
现在，当您使用npm run start运行时，将启动调试程序，您可以在控制台中看到以下内容：
Debugger listening on ws://127.0.0.1:9229/cf72a33c-ab38-4798-be5e-8b8df072f724
For help see https://nodejs.org/en/docs/inspector
这表明调试过程已经开始，我们可以在端口＃9229上附加它。
现在，您需要为vs-code添加以下调试器配置以附加到此进程:(在launch.json中）
{
"version": "0.2.0",
"configurations": [
{
"name": "Attach to Process",
"type": "node",
"request": "attach",
"port": 9229
}
]
}
保存后，单击“开始调试”按钮，以附加到之前由节点启动的进程。您可以阅读有关此here
的更多信息答案 8 :(得分：0)
这是我的配置，效果很好！我正在使用VSCode调试，mocha 6.1.4，节点：v8.16.0和Babel版本6。
请确保在babel-register中加载babel-polyfill和runtimeArgs，否则您将获得regeneratorRuntime is not defined！
{
"type": "node",
"request": "launch",
"name": "Mocha test debug",
"runtimeExecutable": "${workspaceRoot}/node_modules/.bin/mocha",
"console": "integratedTerminal",
"internalConsoleOptions": "neverOpen",
"protocol": "inspector",
"stopOnEntry": false,
"runtimeArgs": [
"--nolazy",
"--require",
"babel-register",
"--require",
"babel-polyfill",
"tests/*.js"
],
"sourceMaps": true
}