typescript - ส่วนขยาย Prettier ของ VS Code ไม่รู้จักตัวดำเนินการ satisfies
ฉันต้องการใช้ตัวดำเนินการ satisfies ใหม่ของ TypeScript แต่ส่วนขยาย Prettier ของ VS Code ดูเหมือนไม่สามารถจดจำมันได้และหยุดทำงาน
ฉันได้อัปเดต Typescript, Eslint, Prettier, และส่วนขยาย Prettier ของ VS Code เป็นเวอร์ชันล่าสุดแล้ว แต่ยังคงได้รับข้อผิดพลาดอยู่
มีวิธีแก้ไขหรือไม่สนใจมันหรือไม่?
ไฟล์ package.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"
}
}
.prettierrc.cjs
module.exports = {
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: [
require.resolve('@trivago/prettier-plugin-sort-imports'),
require('prettier-plugin-tailwindcss'),
],
};
type DemoComponentProps = {
p1: string;
p2: number;
};
const DemoComponent: React.FC<DemoComponentProps> = ({ p1, p2 }) => {
return (
<div>
{p1} {p2}
</div>
);
};
function App() {
const props = {
p1: 'demo',
p2: 42,
} satisfies DemoComponentProps;
return <DemoComponent {...props} />;
}
export default App;
อินเทอร์เฟซบรรทัดคำสั่งของ Prettier
> 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 pertteir (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/@[email _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/@[email /node_modules/@babel/parser/src/parse-error/credentials.js:61:22)
at toParseError (/home/tanmay/Projects/Personal/react-playground/node_modules/.pnpm/@[email /node_modules/@babel/parser/src/parse-error.js:58:12)
at Parser.raise (/home/tanmay/Projects/Personal/react-playground/node_modules/.pnpm/@[email /node_modules/@babel/parser/src/tokenizer/index.js:1736:19)
at Parser.semicolon (/home/tanmay/Projects/Personal/react-playground/node_modules/.pnpm/@[email /node_modules/@babel/parser/src/parser/util.js:146:10)
at Parser.parseVarStatement (/home/tanmay/Projects/Personal/react-playground/node_modules/.pnpm/@[email /node_modules/@babel/parser/src/parser/statement.js:904:10)
at Parser.parseVarStatement (/home/tanmay/Projects/Personal/react-playground/node_modules/.pnpm/@[email /node_modules/@babel/parser/src/plugins/typescript/index.js:2702:33)
at Parser.parseStatementContent (/home/tanmay/Projects/Personal/react-playground/node_modules/.pnpm/@[email /node_modules/@babel/parser/src/parser/statement.js:391:21)
at Parser.parseStatementContent (/home/tanmay/Projects/Personal/react-playground/node_modules/.pnpm/@[email /node_modules/@babel/parser/src/plugins/typescript/index.js:2760:20)
at Parser.parseStatement (/home/tanmay/Projects/Personal/react-playground/node_modules/.pnpm/@[email /node_modules/@babel/parser/src/parser/statement.js:329:17)
at Parser.parseBlockOrModuleBlockBody (/home/tanmay/Projects/Personal/react-playground/node_modules/.pnpm/@[email /node_modules/@babel/parser/src/parser/statement.js:1082:25)
at Parser.parseBlockBody (/home/tanmay/Projects/Personal/react-playground/node_modules/.pnpm/@[email /node_modules/@babel/parser/src/parser/statement.js:1058:10)
at Parser.parseBlock (/home/tanmay/Projects/Personal/react-playground/node_modules/.pnpm/@[email /node_modules/@babel/parser/src/parser/statement.js:1028:10)
at Parser.parseFunctionBody (/home/tanmay/Projects/Personal/react-playground/node_modules/.pnpm/@[email /node_modules/@babel/parser/src/parser/expression.js:2467:24)
at Parser.parseFunctionBodyAndFinish (/home/tanmay/Projects/Personal/react-playground/node_modules/.pnpm/@[email /node_modules/@babel/parser/src/parser/expression.js:2440:10)
at Parser.parseFunctionBodyAndFinish (/home/tanmay/Projects/Personal/react-playground/node_modules/.pnpm/@[email /node_modules/@babel/parser/src/plugins/typescript/index.js:2329:13)
at callback (/home/tanmay/Projects/Personal/react-playground/node_modules/.pnpm/@[email /node_modules/@babel/parser/src/parser/statement.js:1301:12)
at Parser.withSmartMixTopicForbiddingContext (/home/tanmay/Projects/Personal/react-playground/node_modules/.pnpm/@[email /node_modules/@babel/parser/src/parser/expression.js:2947:14)
at Parser.parseFunction (/home/tanmay/Projects/Personal/react-playground/node_modules/.pnpm/@[email /node_modules/@babel/parser/src/parser/statement.js:1299:10)
at Parser.parseFunctionStatement (/home/tanmay/Projects/Personal/react-playground/node_modules/.pnpm/@[email /node_modules/@babel/parser/src/parser/statement.js:750:17)
at Parser.parseStatementContent (/home/tanmay/Projects/Personal/react-playground/node_modules/.pnpm/@[email /node_modules/@babel/parser/src/parser/statement.js:366:21)
at Parser.parseStatementContent (/home/tanmay/Projects/Personal/react-playground/node_modules/.pnpm/@[email /node_modules/@babel/parser/src/plugins/typescript/index.js:2760:20)
at Parser.parseStatement (/home/tanmay/Projects/Personal/react-playground/node_modules/.pnpm/@[email /node_modules/@babel/parser/src/parser/statement.js:329:17)
at Parser.parseBlockOrModuleBlockBody (/home/tanmay/Projects/Personal/react-playground/node_modules/.pnpm/@[email /node_modules/@babel/parser/src/parser/statement.js:1082:25)
at Parser.parseBlockBody (/home/tanmay/Projects/Personal/react-playground/node_modules/.pnpm/@[email /node_modules/@babel/parser/src/parser/statement.js:1058:10)
at Parser.parseProgram (/home/tanmay/Projects/Personal/react-playground/node_modules/.pnpm/@[email /node_modules/@babel/parser/src/parser/statement.js:214:10)
at Parser.parseTopLevel (/home/tanmay/Projects/Personal/react-playground/node_modules/.pnpm/@[email /node_modules/@babel/parser/src/parser/statement.js:197:25)
at Parser.parse (/home/tanmay/Projects/Personal/react-playground/node_modules/.pnpm/@[email /node_modules/@babel/parser/src/parser/index.js:41:10)
at Parser.parse (/home/tanmay/Projects/Personal/react-playground/node_modules/.pnpm/@[email /node_modules/@babel/parser/src/plugins/typescript/index.js:3749:20)
at Object.parse (/home/tanmay/Projects/Personal/react-playground/node_modules/.pnpm/@[email /node_modules/@babel/parser/src/index.js:58:38)
at Object.preprocessor (/home/tanmay/Projects/Personal/react-playground/node_modules/.pnpm/@[email _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/@[email _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/[email _ijmykednqrx66bjm6h37cegrgq/node_modules/prettier-plugin-tailwindcss/dist/index.js:134:3972)
at Object.parse (/home/tanmay/Projects/Personal/react-playground/node_modules/.pnpm/[email /node_modules/prettier/index.js:7511:25)
at coreFormat (/home/tanmay/Projects/Personal/react-playground/node_modules/.pnpm/[email /node_modules/prettier/index.js:8829:18)
at formatWithCursor2 (/home/tanmay/Projects/Personal/react-playground/node_modules/.pnpm/[email /node_modules/prettier/index.js:9021:18)
at /home/tanmay/Projects/Personal/react-playground/node_modules/.pnpm/[email /node_modules/prettier/index.js:38168:12
at Object.format (/home/tanmay/Projects/Personal/react-playground/node_modules/.pnpm/[email /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
ตรวจสอบว่าคุณมีเวอร์ชัน prettier ที่ติดตั้งทั่วโลกเก่าหรือไม่:
npm ls -g
ถ้าเป็นเช่นนั้น คุณควรถอนการติดตั้งมัน:
npm rm -g prettier
หรืออัปเดตมัน:
npm update -g
คำตอบ #2
ตรวจสอบว่าเวอร์ชันที่ติดตั้งในเครื่องของ prettier เป็นเวอร์ชันล่าสุดหรือไม่ ฉันตรวจสอบ yarn.lock ของฉัน (คุณอาจต้องตรวจสอบ package-lock.json) และพบว่า prettier เป็นการพึ่งพาของแพ็กเกจอื่นในโครงการของฉัน