Улучшено сообщение об ошибках SyntaxError в JSX

Только что запустил новый проект React и решил использовать в нем Prettier. Однако во всех моих .tsx файлах Prettier сообщает о синтаксических ошибках в первой строке JSX. Например:

источник/компоненты/макет/Layout.tsx

function Layout(): React.ReactElement {
  return (
    <div className = "layout-component">
      <header>
        <span>Installations</span>
        <span>Projects</span>
      </header>
    </div>
  );
}

export default Layout;

Результаты:

$ npx prettier src/components/layout/Layout.tsx 
src/components/layout/Layout.tsx
[error] src/components/layout/Layout.tsx: SyntaxError: Unexpected token, expected "," (3:9)

Соответствующие версии из package.json:

    "react": "^18.2.0",
    "react-dom": "^18.2.0"

    "@trivago/prettier-plugin-sort-imports": "^4.3.0",
    "prettier": "^3.2.5",
    "typescript": "^5.0.2",

И .prettierrc:

{
  "tabWidth": 2,
  "printWidth": 100,

  "plugins": ["@trivago/prettier-plugin-sort-imports"],
  "importOrder": ["^[./]"],
  "importOrderParserPlugins": ["typescript"],
  "importOrderSeparation": true,
  "importOrderSortSpecifiers": true
}

И tsconfig.json:

{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,

    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",

    /* Linting */
    "allowUmdGlobalAccess": false,
    "allowUnreachableCode": false,
    "allowUnusedLabels": false,
    "forceConsistentCasingInFileNames": true,
    "noImplicitOverride": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "noPropertyAccessFromIndexSignature": true,
    "noUncheckedIndexedAccess": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "strict": true,
    "verbatimModuleSyntax": true
  },
  "include": ["src"]
}
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
1
0
51
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

После нескольких дней возни с этим я обнаружил, что неприятная деталь находится в конфигурации Prettier:

  "importOrderParserPlugins": ["typescript"],

Удаление этого решает проблему.

Другие вопросы по теме