Ответ 1

Мне удалось заставить его работать следующим образом:

Package.json

Убедитесь, что у вас есть сборка script с генерацией sourcemaps.

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

tasks.json

Убедитесь, что у вас есть задача, которая позволяет VS Code строить с помощью npm script.

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

launch.json

Настройте конструкцию script до перед запуском с preLaunchTask, запустите program из исходной точки входа, но с outDir, указывающим на папку dist, и с sourceMaps.

{
    "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"
}

Теперь, каждый раз, когда вы нажимаете F5, трансляция babel запускается до начала процесса Node, но со всеми синхронизациями sourcemaps. С его помощью я смог использовать точки останова и все другие вещи отладчика.

Ответ 2

Нет необходимости переносить с вавилонским узлом

Базовая настройка (исходные карты - всегда)

Обратите внимание на параметры sourceMaps и retainLines в .babelrc:

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

А потом в launch.json:

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

Предварительная настройка (исходные карты - только отладка)

Вы можете настроить вышеперечисленное так, чтобы генерировать исходные карты /retainLines только в режиме отладки:

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

А также:

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

Ответ 3

Начиная с версии 1.9, VS Code автоматически пытается использовать исходные карты по умолчанию, но вы должны указать outFiles, если переданные файлы находятся не в той же папке, что и исходные файлы.

В качестве примера приведены соответствующие файлы. В этом случае babel транслируется из папки src в папку lib.

Примечание. Записи в package.json и .vscode/tasks.json нужны только в том случае, если VS-код должен пересылать файлы перед отладкой.

.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"
            ]
        }
    ]
}

Примечание. Указывать только preLaunchTask, если вы также настраиваете задачи build в package.json и .vscode/tasks.json.

package.json

Ctrl + P, package.json

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

Примечание. Вы можете использовать другую версию babel-cli и различные пресетов 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
        }
    ]
}

Официальная документация VS-кода

Карты источников

Отладчик Node.js VS Code поддерживает исходные карты JavaScript, которые помогают отлаживать переписанные языки, например. TypeScript или миниатюрный/очищенный JavaScript. С исходными картами можно выполнить один шаг или установить контрольные точки в исходном источнике. Если для исходного источника не существует исходной карты или если исходная карта сломана и не может успешно сопоставить источник и сгенерированный JavaScript, то точки останова отображаются как непроверенные (серые полые круги).

Исходные карты могут быть сгенерированы с помощью двух видов вставки:

• Встроенные исходные карты: сгенерированный файл JavaScript содержит исходную карту в качестве URI данных в конце (вместо ссылки на исходную карту через URI файла).
• Встроенный источник: исходная карта содержит исходный источник (вместо ссылки на источник по пути).

VS Code поддерживает как встроенные карты источников, так и встроенный источник.

Функция исходной карты управляется атрибутом sourceMaps, который по умолчанию равен true, начиная с VS Code 1.9.0. Это означает, что отладка node всегда пытается использовать исходные карты (если она может найти их), и, как следствие, вы можете даже указать исходный файл (например, app.ts) с атрибутом program.

Если вам почему-то нужно отключить исходные карты, вы можете установить атрибут sourceMaps на false.

Если сгенерированные (переписанные) файлы JavaScript не живут рядом с их источником, но в отдельном каталоге, вы должны помочь отладчику VS Code найти их, установив атрибут outFiles. Этот атрибут принимает несколько шаблонов glob для включения и исключения файлов из набора сгенерированных файлов JavaScript. Всякий раз, когда вы устанавливаете точку останова в исходном источнике, VS Code пытается найти сгенерированный код JavaScript в файлах, указанных в outFiles.

Поскольку исходные карты не создаются автоматически, вы должны настроить транспилятор, который вы используете для их создания. Для TypeScript это можно сделать следующим образом:

tsc --sourceMap --outDir bin app.ts

Это соответствующая конфигурация запуска для программы TypeScript:

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

Source

Ответ 4

Вот что сработало для меня (Ни одно из других решений не работало для меня с vscode v1.33):

./project.json

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

.vscode/task.json

{
  "version": "2.0.0",
  "tasks": [{
    "label": "build-babel",
    "type": "npm",
    "script": "build",
    "group": "build"
  }]
}

.vscode/launch.json

{
  "version": "0.2.0",
  "configurations": [{
    "type": "node",
    "request": "launch",
    "preLaunchTask": "build-babel",
    "name": "Debug",
    "program": "${workspaceRoot}/src/server.js",
    "outFiles": ["${workspaceRoot}/dist/**/*.js"]
  }]
}

Ответ 5

Чего не хватало в моем случае (VSCode 1.36.0), так это переопределении путей карты источника:

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Debug",
            "program": "${workspaceRoot}/src/cli/index.js",
            "sourceMaps": true,
            "sourceMapPathOverrides": {
                "*": "${workspaceRoot}/src/*"
            },
            "outFiles": [
                "${workspaceRoot}/lib/**/*.js"
            ]
        }
    ]
}

Компиляция была вызвана через конвейер gulp, а исходные карты ссылались на cli/index.js вместо src/cli/index.js. sourceMapPathOverrides с sourceMapPathOverrides исправило это.

Ответ 6

Добавьте этот конфиг в файл launch.json,

{
"version": "0.2.0",
"configurations": [
    {   
        "cwd":"<path-to-application>",
        "type": "node",
        "request": "launch",
        "name": "babel-node debug",
        "runtimeExecutable": "<path-to-app>/node_modules/.bin/babel-node",
        "program": "<path-to-app-entry-file>/server.js",
        "runtimeArgs": ["--nolazy"]
    }
]
}

Не забудьте иметь файл .babelrc с предустановкой, определенной в корне вашего проекта. Также атрибут cwd в файле launch.json должен быть правильным, иначе компилятор babel не сможет найти .babelrc, и вы получите ошибки компиляции.

    {
        "presets": ["@babel/preset-env"]
    }

Запуск с этой конфигурацией автоматически запустит приложение на порте по умолчанию (обычно 5000) и подключится к сгенерированному порту отладки. Исходные карты будут работать без каких-либо дополнительных настроек, если вы не используете какой-то очень старый vscode