Только что запустил новый проект 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"]
}





После нескольких дней возни с этим я обнаружил, что неприятная деталь находится в конфигурации Prettier:
"importOrderParserPlugins": ["typescript"],
Удаление этого решает проблему.