Prettier，React Router 6，useParams钩子，意外令牌

Question

整个上午我都在为这个问题埋头苦干。

我最近用React 18、React Router 6、TypeScript、Webpack 5、esint和更漂亮的软件组装了一个新项目。

事情一直很好，直到我尝试了useParams钩子，现在我的linter一直打印出以下错误：

/.../index.tsx
9:41  error  Parsing error: Unexpected token  prettier/prettier
✖ 1 problem (1 error, 0 warnings)

我一直在谷歌上搜索，但没有发现任何直接谈论这个问题的内容。我不知道在这一点上该做什么，除了从项目中删除更漂亮的。

这是我的eslintrc:

{
"root": true,
"parser": "@typescript-eslint/parser",
"plugins": [
"react",
"@typescript-eslint",
"prettier"
],
"extends": [
"eslint:recommended",
"plugin:react/recommended",
"plugin:@typescript-eslint/recommended",
"plugin:prettier/recommended"
],
"settings": {
"import/resolver": {
"alias": [
["components", "./src/components"],
["routes", "./src/routes"],
["views", "./src/views"]
]
},
"react": {
"version": "detect"
}
},
"env": {
"browser": true,
"es2021": true,
"node": true
}
}

预层配置：

{
"arrowParens": "avoid",
"bracketSpacing": true,
"htmlWhitespaceSensitivity": "css",
"insertPragma": false,
"bracketSameLine": false,
"jsxSingleQuote": true,
"parser": "babel",
"printWidth": 80,
"proseWrap": "preserve",
"requirePragma": false,
"semi": true,
"singleQuote": true,
"tabWidth": 2,
"trailingComma": "none",
"endOfLine": "auto",
"useTabs": false
}

以及违规页面：

import React from 'react';
import { useParams } from 'react-router-dom';
type ParamTypes = {
id: string
};
const Customer: React.FC = () => {
const { id } = useParams<ParamTypes>();
return <div>{id}</div>;
};
export default Customer;

根据Prettier的说法，冒犯的字符是最后一个括号：

const { id } = useParams<ParamTypes>();
^

Answer 1

我想明白了。

这个问题出现在我更漂亮的配置中："parser": "babel"。根据文档，这不需要设置，因为Prettier可以根据文件推断出需要使用哪个解析器。

删除此设置使我暂时恢复了理智。好极了

谜团解开了。