visual-studio-code - node - visual studio code prettier on save

depuración en Visual Studio Code con babel-node (3)

Estoy usando:

Código VS v1.3.1
nodo v6.3.1
babel-node v6.11.4
Windows 10

No puedo obtener una parada en un punto de interrupción con el siguiente archivo de inicio. El depurador se ejecuta y se conecta a un puerto, pero cuando ejecuto las aplicaciones con un punto de interrupción, no se detiene en el punto de interrupción y se ejecuta directamente. Cualquier persona que haya conseguido que esto funcione, por favor avise.

{ "version": "0.2.0", "configurations": [ { "name": "Launch", "type": "node", "request": "launch", "program": "${workspaceRoot}/src/app.js", "stopOnEntry": false, "args": [], "cwd": "${workspaceRoot}", "preLaunchTask": null, "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/babel-node.cmd", "runtimeArgs": [ "--nolazy" ], "env": { "NODE_ENV": "development" }, "externalConsole": false, "sourceMaps": false, "outDir": null }, { "name": "Attach", "type": "node", "request": "attach", "port": 5858, "address": "localhost", "restart": false, "sourceMaps": false, "outDir": null, "localRoot": "${workspaceRoot}", "remoteRoot": null }, { "name": "Attach to Process", "type": "node", "request": "attach", "processId": "${command.PickProcess}", "port": 5858, "sourceMaps": false, "outDir": null } ] }

No hay necesidad de transpilar con babel-node.

Configuración básica (sourcemaps - siempre)

Tenga en cuenta las opciones sourceMaps y retainLines en .babelrc :

{ "presets": [ "env" ], "sourceMaps": "inline", "retainLines": true }

Y luego en launch.json :

{ "type": "node", "request": "launch", "name": "Debug", "program": "${workspaceFolder}/index.js", "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/babel-node", "runtimeArgs": ["--nolazy"] }

Configuración avanzada (sourcemaps - solo depuración)

Puede modificar lo anterior, solo para generar mapas de origen / retener líneas en modo de depuración:

{ "presets": ["env"], "env": { "debug": { "sourceMaps": "inline", "retainLines": true } } }

A partir de la versión 1.9, VS Code intenta automáticamente usar mapas de origen de forma predeterminada, pero debe especificar outFiles si los archivos transpilados no están en la misma carpeta que los archivos de origen.

Como ejemplo, aquí están los archivos relevantes. En este caso, babel está transpilando desde la carpeta src a la carpeta lib .

Nota: Las entradas en package.json y .vscode/tasks.json solo son necesarias si desea que VS Code transpile los archivos antes de la depuración.

.vscode / launch.json

Ctrl + Shift + P , >Debug: Open launch.json

{ "version": "0.2.0", "configurations": [ { "type": "node", "request": "launch", "name": "Launch Program", "program": "${workspaceRoot}/lib/index.js", "cwd": "${workspaceRoot}", "preLaunchTask": "build", "outFiles": [ "${workspaceRoot}/lib/**.js" ] } ] }

Nota: Solo especifique preLaunchTask si también configura las tareas de build en package.json y .vscode/tasks.json .

paquete.json

Ctrl + P , package.json

{ "scripts": { "build": "babel src -d lib -s" }, "devDependencies": { "babel-cli": "^6.23.0", "babel-preset-env": "^1.1.10" } }

Nota: Puedes usar una versión diferente de babel-cli y diferentes presets de babel.

.vscode / tasks.json

Ctrl + Shift + P , >Tasks: Configure Task Runner

{ "version": "0.1.0", "command": "npm", "isShellCommand": true, "showOutput": "always", "suppressTaskName": true, "tasks": [ { "taskName": "build", "args": ["run", "build"], "isBuildCommand": true } ] }

Documentación oficial del código VS

Mapas fuente

El depurador Node.js de VS Code es compatible con los mapas fuente de JavaScript que ayudan a la depuración de lenguajes transpilados, por ejemplo, TypeScript o JavaScript minificado / uglificado. Con los mapas de origen, es posible realizar un solo paso o establecer puntos de interrupción en la fuente original. Si no existe un mapa de origen para la fuente original o si el mapa de origen está roto y no puede asignarse con éxito entre la fuente y el JavaScript generado, los puntos de interrupción aparecen como no verificados (círculos grises).

Los mapas de origen se pueden generar con dos tipos de alineación:

Mapas de origen en línea : el archivo JavaScript generado contiene el mapa de origen como un URI de datos al final (en lugar de hacer referencia al mapa de origen a través de un URI de archivo).
Fuente en línea : el mapa de origen contiene la fuente original (en lugar de hacer referencia a la fuente a través de una ruta).

VS Code admite tanto los mapas de origen en línea como la fuente en línea .

La característica del mapa de origen está controlada por el atributo sourceMaps que por defecto es true partir de VS Code 1.9.0. Esto significa que la depuración de nodos siempre intenta utilizar mapas de origen (si puede encontrar alguno) y, como consecuencia, incluso puede especificar un archivo de origen (por ejemplo, app.ts) con el atributo del program .

Si necesita deshabilitar los mapas de origen por algún motivo, puede establecer el atributo sourceMaps en false .

Si los archivos JavaScript generados (transpilados) no se encuentran junto a su fuente, sino en un directorio separado, debe ayudar al depurador de código VS a localizarlos estableciendo el atributo outFiles . Este atributo toma múltiples patrones globales para incluir y excluir archivos del conjunto de archivos JavaScript generados. Cada vez que establece un punto de interrupción en la fuente original, VS Code intenta encontrar el código JavaScript generado en los archivos especificados por outFiles .

Dado que los mapas de origen no se crean automáticamente, debe configurar el transpiler que está utilizando para crearlos. Para TypeScript esto se puede hacer de la siguiente manera:

tsc --sourceMap --outDir bin app.ts

Esta es la configuración de lanzamiento correspondiente para un programa de TypeScript:

{ "version": "0.2.0", "configurations": [ { "name": "Launch TypeScript", "type": "node", "request": "launch", "program": "app.ts", "outFiles": [ "bin/**/*.js" ] } ] }

Source

Pude hacerlo funcionar siguiendo estos pasos:

Paquete.json

Asegúrate de tener un script de compilación con la generación de sourcemaps .

"scripts": { "build": "babel src -d dist --source-maps" }

tareas.json

Asegúrese de tener la tarea que le permita a VS Code construir con el script npm .

launch.json

Configure la secuencia de comandos para compilar antes de iniciar con un preLaunchTask , inicie el program desde el punto de entrada de origen, pero con el outDir apuntando a la carpeta dist y con sourceMaps habilitado.

{ "name": "Launch", "type": "node", "request": "launch", "program": "${workspaceRoot}/src/server.js", "stopOnEntry": false, "args": [], "cwd": "${workspaceRoot}", "preLaunchTask": "build", "runtimeExecutable": null, "runtimeArgs": [ "--nolazy" ], "env": { "NODE_ENV": "development" }, "externalConsole": false, "sourceMaps": true, "outDir": "${workspaceRoot}/dist" }

Ahora, cada vez que presiona F5 , la transpilación de babel ejecuta antes de que comience el proceso del nodo, pero con todos los mapas de origen sincronizados. Con él pude usar puntos de interrupción y todas las otras cosas del depurador.