我想使用typescript的新的满足运算符,但VS代码Prettier扩展似乎无法识别它并停止工作。
我已经将Typescript、Eslint、Prettier和VS代码Prettier扩展更新到最新版本,但仍然出现错误。
有办法解决或忽略它吗?
软件包. json文件
{
"name": "react-playground",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"build": "tsc && vite build",
"dev": "vite",
"format": "prettier --write ./**/*.{cjs,ts,tsx,json,md,css,html}",
"lint": "eslint --ext .js,.jsx,.ts,.tsx src --fix",
"preview": "vite preview"
},
"dependencies": {
"@headlessui/react": "^1.7.9",
"@hookform/error-message": "^2.0.1",
"@hookform/resolvers": "^2.9.10",
"@tanstack/react-table": "^8.7.9",
"clsx": "^1.2.1",
"d3": "^7.8.2",
"date-fns": "^2.29.3",
"downshift": "^7.2.0",
"lodash": "^4.17.21",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-hook-form": "^7.43.0",
"recharts": "^2.3.2",
"styled-components": "^5.3.6",
"styled-system": "^5.1.5",
"zod": "^3.20.2"
},
"devDependencies": {
"@hookform/devtools": "^4.3.0",
"@styled/typescript-styled-plugin": "^0.20.0",
"@trivago/prettier-plugin-sort-imports": "^4.0.0",
"@types/d3": "^7.4.0",
"@types/eslint": "^8.21.0",
"@types/lodash": "^4.14.191",
"@types/node": "^18.11.18",
"@types/prettier": "^2.7.2",
"@types/react": "^18.0.27",
"@types/react-dom": "^18.0.10",
"@types/styled-components": "^5.1.26",
"@types/styled-system": "^5.1.16",
"@typescript-eslint/eslint-plugin": "^5.50.0",
"@typescript-eslint/parser": "^5.50.0",
"@vitejs/plugin-react": "^3.1.0",
"autoprefixer": "^10.4.13",
"babel-plugin-styled-components": "^2.0.7",
"eslint": "^8.33.0",
"eslint-config-prettier": "^8.6.0",
"eslint-import-resolver-typescript": "^3.5.3",
"eslint-plugin-import": "^2.27.5",
"eslint-plugin-prettier": "^4.2.1",
"eslint-plugin-react": "^7.32.2",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-tailwindcss": "^3.8.3",
"eslint-plugin-unused-imports": "^2.0.0",
"postcss": "^8.4.21",
"prettier": "^2.8.3",
"prettier-eslint": "^15.0.1",
"prettier-plugin-tailwindcss": "^0.2.2",
"tailwindcss": "^3.2.4",
"typescript": "^4.9.5",
"vite": "^4.1.1",
"vite-aliases": "^0.10.0",
"vite-plugin-babel-macros": "^1.0.6",
"vite-plugin-checker": "^0.5.5"
}
}
漂亮的cjs
x一个一个一个一个x一个一个二个x
更漂亮的CLI
> prettier --debug-check ./**/*.{cjs,ts,tsx,json,md,css,html}
.eslintrc.cjs
.prettierrc.cjs
postcss.config.cjs
tailwind.config.cjs
src/theme.ts
src/vite-env.d.ts
src/App.tsx[error] src/App.tsx: SyntaxError: Missing semicolon. (17:11)
[error] 1 | type DemoComponentProps = {
[error] 2 | p1: string;
[error] 3 | p2: number;
[error] 4 | };
[error] 5 |
[error] 6 | const DemoComponent: React.FC<DemoComponentProps> = ({ p1, p2 }) => {
[error] 7 | return (
[error] 8 | <div>
[error] 9 | {p1} {p2}
[error] 10 | </div>
[error] 11 | );
[error] 12 | };
[error] 13 |
[error] 14 | function App() {
[error] 15 | const props = {
[error] 16 | p1: 'demo',
[error] 17 | p2: 42, } satisfies DemoComponentProps;
[error] 18 |
[error] 19 | return <DemoComponent {...props} />;
[error] 20 | }
[error] 21 |
[error] 22 | export default App;
[error] 23 |
src/main.tsx
.vscode/settings.json
package.json
tsconfig.json
tsconfig.node.json
README.md
src/index.css
index.html
ELIFECYCLE Command failed with exit code 2.
VSCode属性(v9.10.4)错误
["INFO" - 3:05:44 PM] Formatting file:///home/tanmay/Projects/Personal/react-playground/src/App.tsx
["INFO" - 3:05:44 PM] Using config file at '/home/tanmay/Projects/Personal/react-playground/.prettierrc.cjs'
["DEBUG" - 3:05:44 PM] Local prettier module path: '/home/tanmay/Projects/Personal/react-playground/node_modules/prettier/index.js'
["INFO" - 3:05:44 PM] Using ignore file (if present) at /home/tanmay/Projects/Personal/react-playground/.prettierignore
["INFO" - 3:05:44 PM] File Info:
{
"ignored": false,
"inferredParser": "typescript"
}
["INFO" - 3:05:44 PM] Detected local configuration (i.e. .prettierrc or .editorconfig), VS Code configuration will not be used
["INFO" - 3:05:44 PM] Prettier Options:
{
"filepath": "/home/tanmay/Projects/Personal/react-playground/src/App.tsx",
"parser": "typescript",
"semi": true,
"printWidth": 80,
"tabWidth": 4,
"singleQuote": true,
"bracketSpacing": true,
"bracketSameLine": false,
"useTabs": true,
"arrowParens": "avoid",
"jsxSingleQuote": true,
"trailingComma": "all",
"importOrderParserPlugins": [
"classProperties",
"typescript",
"jsx"
],
"importOrder": [
"^@/api/(.*)$",
"^@/assets/(.*)$",
"^@/components/(.*)$",
"^@/features/(.*)$",
"^@/pages/(.*)$",
"^@/redux/(.*)$",
"^@/styles/(.*)$",
"^@/utils/(.*)$",
"^[../]",
"^[./]"
],
"importOrderSeparation": true,
"importOrderSortSpecifiers": true,
"importOrderCaseInsensitive": true,
"plugins": [
"/home/tanmay/Projects/Personal/react-playground/node_modules/.pnpm/@trivago+prettier-plugin-sort-imports@4.0.0_m4v26zq7vuhpofnm2r24kocxbu/node_modules/@trivago/prettier-plugin-sort-imports/lib/src/index.js",
{
"options": {
"tailwindConfig": {
"type": "string",
"category": "Tailwind CSS",
"description": "TODO"
}
},
"parsers": {
"html": {
"astFormat": "html"
},
"glimmer": {
"astFormat": "glimmer"
},
"lwc": {
"astFormat": "html"
},
"angular": {
"astFormat": "html"
},
"vue": {
"astFormat": "html"
},
"css": {
"astFormat": "postcss"
},
"scss": {
"astFormat": "postcss"
},
"less": {
"astFormat": "postcss"
},
"babel": {
"astFormat": "estree"
},
"babel-flow": {
"astFormat": "estree"
},
"flow": {
"astFormat": "estree"
},
"typescript": {
"astFormat": "estree"
},
"babel-ts": {
"astFormat": "estree"
},
"espree": {
"astFormat": "estree"
},
"meriyah": {
"astFormat": "estree"
},
"__js_expression": {
"astFormat": "estree"
}
},
"printers": {}
}
]
}
["ERROR" - 3:05:44 PM] Error formatting document.
["ERROR" - 3:05:44 PM] Missing semicolon. (18:2)
1 | type DemoComponentProps = {
2 | p1: string;
3 | p2: number;
4 | };
5 |
6 | const DemoComponent: React.FC<DemoComponentProps> = ({ p1, p2 }) => {
7 | return (
8 | <div>
9 | {p1} {p2}
10 | </div>
11 | );
12 | };
13 |
14 | function App() {
15 | const props = {
16 | p1: 'demo',
17 | p2: 42,
18 | } satisfies DemoComponentProps;
19 |
20 | return <DemoComponent {...props} />;
21 | }
22 |
23 | export default App;
24 |
SyntaxError: Missing semicolon. (18:2)
1 | type DemoComponentProps = {
2 | p1: string;
3 | p2: number;
4 | };
5 |
6 | const DemoComponent: React.FC<DemoComponentProps> = ({ p1, p2 }) => {
7 | return (
8 | <div>
9 | {p1} {p2}
10 | </div>
11 | );
12 | };
13 |
14 | function App() {
15 | const props = {
16 | p1: 'demo',
17 | p2: 42,
18 | } satisfies DemoComponentProps;
19 |
20 | return <DemoComponent {...props} />;
21 | }
22 |
23 | export default App;
24 |
at instantiate (/home/tanmay/Projects/Personal/react-playground/node_modules/.pnpm/@babel+parser@7.18.9/node_modules/@babel/parser/src/parse-error/credentials.js:61:22)
at toParseError (/home/tanmay/Projects/Personal/react-playground/node_modules/.pnpm/@babel+parser@7.18.9/node_modules/@babel/parser/src/parse-error.js:58:12)
at Parser.raise (/home/tanmay/Projects/Personal/react-playground/node_modules/.pnpm/@babel+parser@7.18.9/node_modules/@babel/parser/src/tokenizer/index.js:1736:19)
at Parser.semicolon (/home/tanmay/Projects/Personal/react-playground/node_modules/.pnpm/@babel+parser@7.18.9/node_modules/@babel/parser/src/parser/util.js:146:10)
at Parser.parseVarStatement (/home/tanmay/Projects/Personal/react-playground/node_modules/.pnpm/@babel+parser@7.18.9/node_modules/@babel/parser/src/parser/statement.js:904:10)
at Parser.parseVarStatement (/home/tanmay/Projects/Personal/react-playground/node_modules/.pnpm/@babel+parser@7.18.9/node_modules/@babel/parser/src/plugins/typescript/index.js:2702:33)
at Parser.parseStatementContent (/home/tanmay/Projects/Personal/react-playground/node_modules/.pnpm/@babel+parser@7.18.9/node_modules/@babel/parser/src/parser/statement.js:391:21)
at Parser.parseStatementContent (/home/tanmay/Projects/Personal/react-playground/node_modules/.pnpm/@babel+parser@7.18.9/node_modules/@babel/parser/src/plugins/typescript/index.js:2760:20)
at Parser.parseStatement (/home/tanmay/Projects/Personal/react-playground/node_modules/.pnpm/@babel+parser@7.18.9/node_modules/@babel/parser/src/parser/statement.js:329:17)
at Parser.parseBlockOrModuleBlockBody (/home/tanmay/Projects/Personal/react-playground/node_modules/.pnpm/@babel+parser@7.18.9/node_modules/@babel/parser/src/parser/statement.js:1082:25)
at Parser.parseBlockBody (/home/tanmay/Projects/Personal/react-playground/node_modules/.pnpm/@babel+parser@7.18.9/node_modules/@babel/parser/src/parser/statement.js:1058:10)
at Parser.parseBlock (/home/tanmay/Projects/Personal/react-playground/node_modules/.pnpm/@babel+parser@7.18.9/node_modules/@babel/parser/src/parser/statement.js:1028:10)
at Parser.parseFunctionBody (/home/tanmay/Projects/Personal/react-playground/node_modules/.pnpm/@babel+parser@7.18.9/node_modules/@babel/parser/src/parser/expression.js:2467:24)
at Parser.parseFunctionBodyAndFinish (/home/tanmay/Projects/Personal/react-playground/node_modules/.pnpm/@babel+parser@7.18.9/node_modules/@babel/parser/src/parser/expression.js:2440:10)
at Parser.parseFunctionBodyAndFinish (/home/tanmay/Projects/Personal/react-playground/node_modules/.pnpm/@babel+parser@7.18.9/node_modules/@babel/parser/src/plugins/typescript/index.js:2329:13)
at callback (/home/tanmay/Projects/Personal/react-playground/node_modules/.pnpm/@babel+parser@7.18.9/node_modules/@babel/parser/src/parser/statement.js:1301:12)
at Parser.withSmartMixTopicForbiddingContext (/home/tanmay/Projects/Personal/react-playground/node_modules/.pnpm/@babel+parser@7.18.9/node_modules/@babel/parser/src/parser/expression.js:2947:14)
at Parser.parseFunction (/home/tanmay/Projects/Personal/react-playground/node_modules/.pnpm/@babel+parser@7.18.9/node_modules/@babel/parser/src/parser/statement.js:1299:10)
at Parser.parseFunctionStatement (/home/tanmay/Projects/Personal/react-playground/node_modules/.pnpm/@babel+parser@7.18.9/node_modules/@babel/parser/src/parser/statement.js:750:17)
at Parser.parseStatementContent (/home/tanmay/Projects/Personal/react-playground/node_modules/.pnpm/@babel+parser@7.18.9/node_modules/@babel/parser/src/parser/statement.js:366:21)
at Parser.parseStatementContent (/home/tanmay/Projects/Personal/react-playground/node_modules/.pnpm/@babel+parser@7.18.9/node_modules/@babel/parser/src/plugins/typescript/index.js:2760:20)
at Parser.parseStatement (/home/tanmay/Projects/Personal/react-playground/node_modules/.pnpm/@babel+parser@7.18.9/node_modules/@babel/parser/src/parser/statement.js:329:17)
at Parser.parseBlockOrModuleBlockBody (/home/tanmay/Projects/Personal/react-playground/node_modules/.pnpm/@babel+parser@7.18.9/node_modules/@babel/parser/src/parser/statement.js:1082:25)
at Parser.parseBlockBody (/home/tanmay/Projects/Personal/react-playground/node_modules/.pnpm/@babel+parser@7.18.9/node_modules/@babel/parser/src/parser/statement.js:1058:10)
at Parser.parseProgram (/home/tanmay/Projects/Personal/react-playground/node_modules/.pnpm/@babel+parser@7.18.9/node_modules/@babel/parser/src/parser/statement.js:214:10)
at Parser.parseTopLevel (/home/tanmay/Projects/Personal/react-playground/node_modules/.pnpm/@babel+parser@7.18.9/node_modules/@babel/parser/src/parser/statement.js:197:25)
at Parser.parse (/home/tanmay/Projects/Personal/react-playground/node_modules/.pnpm/@babel+parser@7.18.9/node_modules/@babel/parser/src/parser/index.js:41:10)
at Parser.parse (/home/tanmay/Projects/Personal/react-playground/node_modules/.pnpm/@babel+parser@7.18.9/node_modules/@babel/parser/src/plugins/typescript/index.js:3749:20)
at Object.parse (/home/tanmay/Projects/Personal/react-playground/node_modules/.pnpm/@babel+parser@7.18.9/node_modules/@babel/parser/src/index.js:58:38)
at Object.preprocessor (/home/tanmay/Projects/Personal/react-playground/node_modules/.pnpm/@trivago+prettier-plugin-sort-imports@4.0.0_m4v26zq7vuhpofnm2r24kocxbu/node_modules/@trivago/prettier-plugin-sort-imports/lib/src/preprocessors/preprocessor.js:15:24)
at Object.defaultPreprocessor [as preprocess] (/home/tanmay/Projects/Personal/react-playground/node_modules/.pnpm/@trivago+prettier-plugin-sort-imports@4.0.0_m4v26zq7vuhpofnm2r24kocxbu/node_modules/@trivago/prettier-plugin-sort-imports/lib/src/preprocessors/default-processor.js:9:27)
at Object.preprocess (/home/tanmay/Projects/Personal/react-playground/node_modules/.pnpm/prettier-plugin-tailwindcss@0.2.2_ijmykednqrx66bjm6h37cegrgq/node_modules/prettier-plugin-tailwindcss/dist/index.js:134:3972)
at Object.parse (/home/tanmay/Projects/Personal/react-playground/node_modules/.pnpm/prettier@2.8.3/node_modules/prettier/index.js:7511:25)
at coreFormat (/home/tanmay/Projects/Personal/react-playground/node_modules/.pnpm/prettier@2.8.3/node_modules/prettier/index.js:8829:18)
at formatWithCursor2 (/home/tanmay/Projects/Personal/react-playground/node_modules/.pnpm/prettier@2.8.3/node_modules/prettier/index.js:9021:18)
at /home/tanmay/Projects/Personal/react-playground/node_modules/.pnpm/prettier@2.8.3/node_modules/prettier/index.js:38168:12
at Object.format (/home/tanmay/Projects/Personal/react-playground/node_modules/.pnpm/prettier@2.8.3/node_modules/prettier/index.js:38182:12)
at t.default.format (/home/tanmay/.vscode/extensions/esbenp.prettier-vscode-9.10.4/dist/extension.js:1:14731)
at t.PrettierEditProvider.provideEdits (/home/tanmay/.vscode/extensions/esbenp.prettier-vscode-9.10.4/dist/extension.js:1:11417)
at $.provideDocumentFormattingEdits (/usr/share/code/resources/app/out/vs/workbench/api/node/extensionHostProcess.js:98:39748)
["INFO" - 3:05:44 PM] Formatting completed in 19ms.
1条答案
按热度按时间zkure5ic1#
检查是否全局安装了较旧版本的
prettier
:如果是这种情况,您应该卸载它:
或更新它: