Как отладить файл Javascript ES6 + JSX в VSCode?

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 в моем коде?

Если вам нужны подробности, не стесняйтесь спрашивать меня!