javascript - 如何在 VSCode 中调试 ES6 + JSX Javascript 文件？

Question

我正在尝试调试包含 ES6 和 React 语法的代码，但我只能使用以下配置调试 ES6：

依赖：babel-cli,babel-preset-es2015

launch.json：

{
  "version": "0.2.0",
  "configurations": [

    {
      "type": "node",
      "request": "launch",
      "name": "Smooth Debbug",
      "program": "${workspaceFolder}/<FilePath>",
      "runtimeExecutable": "${workspaceRoot}/core-frontend/node_modules/.bin/babel-node",
      "sourceMaps": true,
      "cwd": "${workspaceRoot}",
    }
  ],
}

但是我要调试的文件包含 JSX 语法。这是代码的一部分：

import React from 'react';
import { Trans } from '@lingui/macro';
import moment from 'moment';

// ...

export const weekdays = [
  {
    index: 0,
    weekday: (<Trans>Domingo</Trans>),
  },
  {
    index: 1,
    weekday: (<Trans>Segunda-Feira</Trans>),
  },
  {
    index: 2,
    weekday: (<Trans>Terça-Feira</Trans>),
  },
  {
    index: 3,
    weekday: (<Trans>Quarta-Feira</Trans>),
  },
  {
    index: 4,
    weekday: (<Trans>Quinta-Feira</Trans>),
  },
  {
    index: 5,
    weekday: (<Trans>Sexta-Feira</Trans>),
  },
  {
    index: 6,
    weekday: (<Trans>Sábado</Trans>),
  },
];

export const findWeekdayByIndex = (index) => {
  const weekdayObject = weekdays.find(weekday => weekday.index === index);
  return weekdayObject.weekday;
};

如果我运行调试器，我会收到以下消息：

Debugger listening on ws://127.0.0.1:18663/522a5a8d-18d5-4f39-9863-dab4dbc53709
For help, see: https://nodejs.org/en/docs/inspector
Debugger attached.
<pathToProject>/core-frontend/node_modules/babel-register/node_modules/babel-core/lib/transformation/file/index.js:558
      throw err;
      ^
SyntaxError: <pathToProject>/core-frontend/src/utils/dateTimeHandlers.js: Unexpected token (16:14)
  14 |   {
  15 |     index: 0,
> 16 |     weekday: (<Trans>Domingo</Trans>),
     |               ^
  17 |   },
  18 |   {
  19 |     index: 1,
    at Parser.pp$5.raise (<pathToProject>/core-frontend/node_modules/babylon/lib/index.js:4454:13)
    at Parser.pp.unexpected (<pathToProject>/core-frontend/node_modules/babylon/lib/index.js:1761:8)
    at Parser.pp$3.parseExprAtom (<pathToProject>/core-frontend/node_modules/babylon/lib/index.js:3750:12)
    at Parser.pp$3.parseExprSubscripts (<pathToProject>/core-frontend/node_modules/babylon/lib/index.js:3494:19)
    at Parser.pp$3.parseMaybeUnary (<pathToProject>/core-frontend/node_modules/babylon/lib/index.js:3474:19)
    at Parser.pp$3.parseExprOps (<pathToProject>/core-frontend/node_modules/babylon/lib/index.js:3404:19)
    at Parser.pp$3.parseMaybeConditional (<pathToProject>/core-frontend/node_modules/babylon/lib/index.js:3381:19)
    at Parser.pp$3.parseMaybeAssign (<pathToProject>/core-frontend/node_modules/babylon/lib/index.js:3344:19)
    at Parser.pp$3.parseParenAndDistinguishExpression (<pathToProject>/core-frontend/node_modules/babylon/lib/index.js:3828:26)
    at Parser.pp$3.parseExprAtom (<pathToProject>/core-frontend/node_modules/babylon/lib/index.js:3709:19)
Waiting for the debugger to disconnect...
SyntaxError: <pathToProject>/core-frontend/src/utils/dateTimeHandlers.js: Unexpected token (16:14)
index.js:4454
    at Parser.pp$5.raise (<pathToProject>/core-frontend/node_modules/babylon/lib/index.js:4454:13)
    at Parser.pp.unexpected (<pathToProject>/core-frontend/node_modules/babylon/lib/index.js:1761:8)
    at Parser.pp$3.parseExprAtom (<pathToProject>/core-frontend/node_modules/babylon/lib/index.js:3750:12)
    at Parser.pp$3.parseExprSubscripts (<pathToProject>/core-frontend/node_modules/babylon/lib/index.js:3494:19)
    at Parser.pp$3.parseMaybeUnary (<pathToProject>/core-frontend/node_modules/babylon/lib/index.js:3474:19)
    at Parser.pp$3.parseExprOps (<pathToProject>/core-frontend/node_modules/babylon/lib/index.js:3404:19)
    at Parser.pp$3.parseMaybeConditional (<pathToProject>/core-frontend/node_modules/babylon/lib/index.js:3381:19)
    at Parser.pp$3.parseMaybeAssign (<pathToProject>/core-frontend/node_modules/babylon/lib/index.js:3344:19)
    at Parser.pp$3.parseParenAndDistinguishExpression (<pathToProject>/core-frontend/node_modules/babylon/lib/index.js:3828:26)
    at Parser.pp$3.parseExprAtom (<pathToProject>/core-frontend/node_modules/babylon/lib/index.js:3709:19)

如何在我的代码中调试 JSX 语法？

如果您需要更多详细信息，请随时问我！

标签： javascriptreactjsdebuggingecmascript-6visual-studio-code