Vscode отладка ES6 приложение

У меня VSCode 0.5.0. Я установил флаг compilerOptions в "ES6", и редактор начал правильно распознавать код ES6. У меня есть babel. Мои тесты Mocha используют компиляторы babel, и мои тесты проходят. Мое приложение запускается из командной строки без проблем, когда я запускаю его с помощью babel-node. Когда я отлаживаю приложение из VSCode, он запускается без поддержки ES6, а приложение терпит неудачу в вопросах синтаксиса ES6. Есть ли настройки отладки, которые я пропустил?

Ответы

Ответ 1

По умолчанию VSCode запускает node только с опцией -debug-brk. Этого недостаточно для поддержки ES6. Если вы узнаете, какие опции "babel- node" переходят на node, вы можете указать те же параметры в конфигурации запуска VSCode (через атрибут runtimeArgs). Но это не решает проблему, что babel-node переводит ваш код ES6 перед запуском.

В качестве альтернативы вы можете попытаться установить "runtimeExecutable" в своей конфигурации запуска на "babel- node". Этот подход работает с другими обертки node, но я не проверял, что работает с babel- node.

Третий вариант (который должен работать) заключается в использовании режима подключения VSCode: для этого запуска babel- node из командной строки с опцией '--debug'. Он должен напечатать номер порта. Затем создайте конфигурацию запуска "attach" в VSCode с этим портом.

Ответ 2

Вот как заставить отладчик VSCode работать с Бабелем 6+:

Сначала установите зависимости локально:

$ npm install babel-cli --save
$ npm install babel-preset-es2015 --save

Затем запустите babel-узел:

$ 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
  • беги с F5

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

Наконец, присоедините отладчик, как показано выше.

Ответ 3

Предполагая, что в вашем проекте установлен 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"
            ],
...

Ответ 4

Вы можете попробовать 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 с добавлением аргумента runtime-регистрового регистра.

Ответ 5

babel + nodemon

В терминале VS Code запустите сервер с аргументом --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.

Отныне вы можете отлаживать свое приложение.

Ответ 6

Есть два способа сделать это:

Первый вариант с помощью командной строки 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) и введите "Задачи: Настроить Run Run":

Добавьте следующий код в файл 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 на первом шаге.

Вам также необходимо настроить babel в файле .babelrc(расположенном в корне проекта) следующим образом:

{
  "presets": [
    "es2015-node6"
  ]
}

и jsconfig.json(находится в корне проекта)

{
  "compilerOptions": {
    "target": "ES6"
  },
  "include": [
    "src/**/*"
  ]
}

Ответ 7

babel- node и vs code attach

  • config npm script в package.json:

    "scripts": {
        "debug": "babel-node --debug-brk demo.js --presets es2015,stage-2"
    }
    
  • добавить конфигурацию отладки кода:

    {
        "name": "Attach",
        "type": "node",
        "protocol": "legacy",
        "request": "attach",
        "port": 5858
    }
    

Ответ 8

При перекодировании с помощью bael- node вы должны добавить "-inspect-brk" в script, чтобы script мог разорваться при ударе точки останова.

Пример:

"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-кода для присоединения к этому процессу: (в launch.json)

{ "version": "0.2.0", "configurations": [ { "name": "Attach to Process", "type": "node", "request": "attach", "port": 9229 } ] }

После сохранения нажмите кнопку "начать отладку", чтобы подключиться к процессу, инициированному node ранее. Вы можете прочитать об этом здесь

Ответ 9

Это моя конфигурация и она прекрасно работает! Я использую отладку VSCode, mocha 6.1.4, узел: v8.16.0 и версию 6 Babel.

Обязательно загрузите 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
}