VS代码Prettier扩展无法识别满足运算符

Question

我想使用 typescript 的新 satisfies 运算符，但 VS code Prettier 扩展似乎无法识别它并停止工作。

\n

我已将 Typescript、Eslint、Prettier 和 VS code Prettier 扩展更新到最新版本，但仍然收到错误。

\n

有没有办法修复或忽略它？

\n

package.json 文件

\n

{\n    "name": "react-playground",\n    "private": true,\n    "version": "0.0.0",\n    "type": "module",\n    "scripts": {\n        "build": "tsc && vite build",\n        "dev": "vite",\n        "format": "prettier --write ./**/*.{cjs,ts,tsx,json,md,css,html}",\n        "lint": "eslint --ext .js,.jsx,.ts,.tsx src --fix",\n        "preview": "vite preview"\n    },\n    "dependencies": {\n        "@headlessui/react": "^1.7.9",\n        "@hookform/error-message": "^2.0.1",\n        "@hookform/resolvers": "^2.9.10",\n        "@tanstack/react-table": "^8.7.9",\n        "clsx": "^1.2.1",\n        "d3": "^7.8.2",\n        "date-fns": "^2.29.3",\n        "downshift": "^7.2.0",\n        "lodash": "^4.17.21",\n        "react": "^18.2.0",\n        "react-dom": "^18.2.0",\n        "react-hook-form": "^7.43.0",\n        "recharts": "^2.3.2",\n        "styled-components": "^5.3.6",\n        "styled-system": "^5.1.5",\n        "zod": "^3.20.2"\n    },\n    "devDependencies": {\n        "@hookform/devtools": "^4.3.0",\n        "@styled/typescript-styled-plugin": "^0.20.0",\n        "@trivago/prettier-plugin-sort-imports": "^4.0.0",\n        "@types/d3": "^7.4.0",\n        "@types/eslint": "^8.21.0",\n        "@types/lodash": "^4.14.191",\n        "@types/node": "^18.11.18",\n        "@types/prettier": "^2.7.2",\n        "@types/react": "^18.0.27",\n        "@types/react-dom": "^18.0.10",\n        "@types/styled-components": "^5.1.26",\n        "@types/styled-system": "^5.1.16",\n        "@typescript-eslint/eslint-plugin": "^5.50.0",\n        "@typescript-eslint/parser": "^5.50.0",\n        "@vitejs/plugin-react": "^3.1.0",\n        "autoprefixer": "^10.4.13",\n        "babel-plugin-styled-components": "^2.0.7",\n        "eslint": "^8.33.0",\n        "eslint-config-prettier": "^8.6.0",\n        "eslint-import-resolver-typescript": "^3.5.3",\n        "eslint-plugin-import": "^2.27.5",\n        "eslint-plugin-prettier": "^4.2.1",\n        "eslint-plugin-react": "^7.32.2",\n        "eslint-plugin-react-hooks": "^4.6.0",\n        "eslint-plugin-tailwindcss": "^3.8.3",\n        "eslint-plugin-unused-imports": "^2.0.0",\n        "postcss": "^8.4.21",\n        "prettier": "^2.8.3",\n        "prettier-eslint": "^15.0.1",\n        "prettier-plugin-tailwindcss": "^0.2.2",\n        "tailwindcss": "^3.2.4",\n        "typescript": "^4.9.5",\n        "vite": "^4.1.1",\n        "vite-aliases": "^0.10.0",\n        "vite-plugin-babel-macros": "^1.0.6",\n        "vite-plugin-checker": "^0.5.5"\n    }\n}\n

\n

.prettierrc.cjs

\n

module.exports = {\n    semi: true,\n    printWidth: 80,\n    tabWidth: 4,\n    singleQuote: true,\n    bracketSpacing: true,\n    bracketSameLine: false,\n    useTabs: true,\n    arrowParens: \'avoid\',\n    jsxSingleQuote: true,\n    trailingComma: \'all\',\n\n    importOrderParserPlugins: [\'classProperties\', \'typescript\', \'jsx\'],\n    importOrder: [\n        \'^@/api/(.*)$\',\n        \'^@/assets/(.*)$\',\n        \'^@/components/(.*)$\',\n        \'^@/features/(.*)$\',\n        \'^@/pages/(.*)$\',\n        \'^@/redux/(.*)$\',\n        \'^@/styles/(.*)$\',\n        \'^@/utils/(.*)$\',\n        \'^[../]\',\n        \'^[./]\',\n    ],\n    importOrderSeparation: true,\n    importOrderSortSpecifiers: true,\n    importOrderCaseInsensitive: true,\n    plugins: [\n        require.resolve(\'@trivago/prettier-plugin-sort-imports\'),\n        require(\'prettier-plugin-tailwindcss\'),\n    ],\n};\n

\n

{\n    "name": "react-playground",\n    "private": true,\n    "version": "0.0.0",\n    "type": "module",\n    "scripts": {\n        "build": "tsc && vite build",\n        "dev": "vite",\n        "format": "prettier --write ./**/*.{cjs,ts,tsx,json,md,css,html}",\n        "lint": "eslint --ext .js,.jsx,.ts,.tsx src --fix",\n        "preview": "vite preview"\n    },\n    "dependencies": {\n        "@headlessui/react": "^1.7.9",\n        "@hookform/error-message": "^2.0.1",\n        "@hookform/resolvers": "^2.9.10",\n        "@tanstack/react-table": "^8.7.9",\n        "clsx": "^1.2.1",\n        "d3": "^7.8.2",\n        "date-fns": "^2.29.3",\n        "downshift": "^7.2.0",\n        "lodash": "^4.17.21",\n        "react": "^18.2.0",\n        "react-dom": "^18.2.0",\n        "react-hook-form": "^7.43.0",\n        "recharts": "^2.3.2",\n        "styled-components": "^5.3.6",\n        "styled-system": "^5.1.5",\n        "zod": "^3.20.2"\n    },\n    "devDependencies": {\n        "@hookform/devtools": "^4.3.0",\n        "@styled/typescript-styled-plugin": "^0.20.0",\n        "@trivago/prettier-plugin-sort-imports": "^4.0.0",\n        "@types/d3": "^7.4.0",\n        "@types/eslint": "^8.21.0",\n        "@types/lodash": "^4.14.191",\n        "@types/node": "^18.11.18",\n        "@types/prettier": "^2.7.2",\n        "@types/react": "^18.0.27",\n        "@types/react-dom": "^18.0.10",\n        "@types/styled-components": "^5.1.26",\n        "@types/styled-system": "^5.1.16",\n        "@typescript-eslint/eslint-plugin": "^5.50.0",\n        "@typescript-eslint/parser": "^5.50.0",\n        "@vitejs/plugin-react": "^3.1.0",\n        "autoprefixer": "^10.4.13",\n        "babel-plugin-styled-components": "^2.0.7",\n        "eslint": "^8.33.0",\n        "eslint-config-prettier": "^8.6.0",\n        "eslint-import-resolver-typescript": "^3.5.3",\n        "eslint-plugin-import": "^2.27.5",\n        "eslint-plugin-prettier": "^4.2.1",\n        "eslint-plugin-react": "^7.32.2",\n        "eslint-plugin-react-hooks": "^4.6.0",\n        "eslint-plugin-tailwindcss": "^3.8.3",\n        "eslint-plugin-unused-imports": "^2.0.0",\n        "postcss": "^8.4.21",\n        "prettier": "^2.8.3",\n        "prettier-eslint": "^15.0.1",\n        "prettier-plugin-tailwindcss": "^0.2.2",\n        "tailwindcss": "^3.2.4",\n        "typescript": "^4.9.5",\n        "vite": "^4.1.1",\n        "vite-aliases": "^0.10.0",\n        "vite-plugin-babel-macros": "^1.0.6",\n        "vite-plugin-checker": "^0.5.5"\n    }\n}\n

\n

更漂亮的 CLI

\n

> prettier --debug-check ./**/*.{cjs,ts,tsx,json,md,css,html}\n\n.eslintrc.cjs\n.prettierrc.cjs\npostcss.config.cjs\ntailwind.config.cjs\nsrc/theme.ts\nsrc/vite-env.d.ts\nsrc/App.tsx[error] src/App.tsx: SyntaxError: Missing semicolon. (17:11)\n[error]    1 | type DemoComponentProps = {\n[error]    2 |  p1: string;\n[error]    3 |  p2: number;\n[error]    4 | };\n[error]    5 |\n[error]    6 | const DemoComponent: React.FC<DemoComponentProps> = ({ p1, p2 }) => {\n[error]    7 |  return (\n[error]    8 |          <div>\n[error]    9 |                  {p1} {p2}\n[error]   10 |          </div>\n[error]   11 |  );\n[error]   12 | };\n[error]   13 |\n[error]   14 | function App() {\n[error]   15 |  const props = {\n[error]   16 |          p1: \'demo\',\n[error]   17 |          p2: 42, } satisfies DemoComponentProps;\n[error]   18 |\n[error]   19 |  return <DemoComponent {...props} />;\n[error]   20 | }\n[error]   21 |\n[error]   22 | export default App;\n[error]   23 |\nsrc/main.tsx\n.vscode/settings.json\npackage.json\ntsconfig.json\ntsconfig.node.json\nREADME.md\nsrc/index.css\nindex.html\n\xe2\x80\x89ELIFECYCLE\xe2\x80\x89 Command failed with exit code 2.\n

\n

VSCode 属性 (v9.10.4) 错误

\n

["INFO" - 3:05:44 PM] Formatting file:///home/tanmay/Projects/Personal/react-playground/src/App.tsx\n["INFO" - 3:05:44 PM] Using config file at \'/home/tanmay/Projects/Personal/react-playground/.prettierrc.cjs\'\n["DEBUG" - 3:05:44 PM] Local prettier module path: \'/home/tanmay/Projects/Personal/react-playground/node_modules/prettier/index.js\'\n["INFO" - 3:05:44 PM] Using ignore file (if present) at /home/tanmay/Projects/Personal/react-playground/.prettierignore\n["INFO" - 3:05:44 PM] File Info:\n{\n  "ignored": false,\n  "inferredParser": "typescript"\n}\n["INFO" - 3:05:44 PM] Detected local configuration (i.e. .prettierrc or .editorconfig), VS Code configuration will not be used\n["INFO" - 3:05:44 PM] Prettier Options:\n{\n  "filepath": "/home/tanmay/Projects/Personal/react-playground/src/App.tsx",\n  "parser": "typescript",\n  "semi": true,\n  "printWidth": 80,\n  "tabWidth": 4,\n  "singleQuote": true,\n  "bracketSpacing": true,\n  "bracketSameLine": false,\n  "useTabs": true,\n  "arrowParens": "avoid",\n  "jsxSingleQuote": true,\n  "trailingComma": "all",\n  "importOrderParserPlugins": [\n    "classProperties",\n    "typescript",\n    "jsx"\n  ],\n  "importOrder": [\n    "^@/api/(.*)$",\n    "^@/assets/(.*)$",\n    "^@/components/(.*)$",\n    "^@/features/(.*)$",\n    "^@/pages/(.*)$",\n    "^@/redux/(.*)$",\n    "^@/styles/(.*)$",\n    "^@/utils/(.*)$",\n    "^[../]",\n    "^[./]"\n  ],\n  "importOrderSeparation": true,\n  "importOrderSortSpecifiers": true,\n  "importOrderCaseInsensitive": true,\n  "plugins": [\n    "/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",\n    {\n      "options": {\n        "tailwindConfig": {\n          "type": "string",\n          "category": "Tailwind CSS",\n          "description": "TODO"\n        }\n      },\n      "parsers": {\n        "html": {\n          "astFormat": "html"\n        },\n        "glimmer": {\n          "astFormat": "glimmer"\n        },\n        "lwc": {\n          "astFormat": "html"\n        },\n        "angular": {\n          "astFormat": "html"\n        },\n        "vue": {\n          "astFormat": "html"\n        },\n        "css": {\n          "astFormat": "postcss"\n        },\n        "scss": {\n          "astFormat": "postcss"\n        },\n        "less": {\n          "astFormat": "postcss"\n        },\n        "babel": {\n          "astFormat": "estree"\n        },\n        "babel-flow": {\n          "astFormat": "estree"\n        },\n        "flow": {\n          "astFormat": "estree"\n        },\n        "typescript": {\n          "astFormat": "estree"\n        },\n        "babel-ts": {\n          "astFormat": "estree"\n        },\n        "espree": {\n          "astFormat": "estree"\n        },\n        "meriyah": {\n          "astFormat": "estree"\n        },\n        "__js_expression": {\n          "astFormat": "estree"\n        }\n      },\n      "printers": {}\n    }\n  ]\n}\n["ERROR" - 3:05:44 PM] Error formatting document.\n["ERROR" - 3:05:44 PM] Missing semicolon. (18:2)\n   1 | type DemoComponentProps = {\n   2 |  p1: string;\n   3 |  p2: number;\n   4 | };\n   5 |\n   6 | const DemoComponent: React.FC<DemoComponentProps> = ({ p1, p2 }) => {\n   7 |  return (\n   8 |      <div>\n   9 |          {p1} {p2}\n  10 |      </div>\n  11 |  );\n  12 | };\n  13 |\n  14 | function App() {\n  15 |  const props = {\n  16 |      p1: \'demo\',\n  17 |      p2: 42,\n  18 |  } satisfies DemoComponentProps;\n  19 |\n  20 |  return <DemoComponent {...props} />;\n  21 | }\n  22 |\n  23 | export default App;\n  24 |\nSyntaxError: Missing semicolon. (18:2)\n   1 | type DemoComponentProps = {\n   2 |  p1: string;\n   3 |  p2: number;\n   4 | };\n   5 |\n   6 | const DemoComponent: React.FC<DemoComponentProps> = ({ p1, p2 }) => {\n   7 |  return (\n   8 |      <div>\n   9 |          {p1} {p2}\n  10 |      </div>\n  11 |  );\n  12 | };\n  13 |\n  14 | function App() {\n  15 |  const props = {\n  16 |      p1: \'demo\',\n  17 |      p2: 42,\n  18 |  } satisfies DemoComponentProps;\n  19 |\n  20 |  return <DemoComponent {...props} />;\n  21 | }\n  22 |\n  23 | export default App;\n  24 |\n    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)\n    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)\n    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)\n    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)\n    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)\n    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)\n    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)\n    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)\n    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)\n    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)\n    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)\n    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)\n    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)\n    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)\n    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)\n    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)\n    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)\n    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)\n    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)\n    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)\n    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)\n    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)\n    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)\n    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)\n    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)\n    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)\n    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)\n    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)\n    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)\n    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)\n    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)\n    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)\n    at Object.parse (/home/tanmay/Projects/Personal/react-playground/node_modules/.pnpm/prettier@2.8.3/node_modules/prettier/index.js:7511:25)\n    at coreFormat (/home/tanmay/Projects/Personal/react-playground/node_modules/.pnpm/prettier@2.8.3/node_modules/prettier/index.js:8829:18)\n    at formatWithCursor2 (/home/tanmay/Projects/Personal/react-playground/node_modules/.pnpm/prettier@2.8.3/node_modules/prettier/index.js:9021:18)\n    at /home/tanmay/Projects/Personal/react-playground/node_modules/.pnpm/prettier@2.8.3/node_modules/prettier/index.js:38168:12\n    at Object.format (/home/tanmay/Projects/Personal/react-playground/node_modules/.pnpm/prettier@2.8.3/node_modules/prettier/index.js:38182:12)\n    at t.default.format (/home/tanmay/.vscode/extensions/esbenp.prettier-vscode-9.10.4/dist/extension.js:1:14731)\n    at t.PrettierEditProvider.provideEdits (/home/tanmay/.vscode/extensions/esbenp.prettier-vscode-9.10.4/dist/extension.js:1:11417)\n    at $.provideDocumentFormattingEdits (/usr/share/code/resources/app/out/vs/workbench/api/node/extensionHostProcess.js:98:39748)\n["INFO" - 3:05:44 PM] Formatting completed in 19ms.\n

\n

Answer 1

检查您是否有较旧的全局安装版本prettier：

npm ls -g

如果是这种情况，您应该卸载它：

npm rm -g prettier

或更新它：

npm update -g