English 中文(简体)
VS 代码 Prettier的延伸并不承认农业企业经营者。
原标题:VS code Prettier extension does not recognize the satisfies operator

我想使用新载体操作器的打字,但VS代码Pttier的延伸似乎并不承认,停止工作。

I have updated Typescript, Eslint, Prettier, and VS code Prettier extension to the latest versions but still getting the error.

是否有办法加以纠正或忽视?

页: 1

{
    "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 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 pertteir (v9.10.4) error

["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.
问题回答

如果您在全球范围安装了较老的<代码>prettier:

npm ls -g

If that s the case, you should either uninstall it:

npm rm -g prettier

或更新:

npm update -g

Check that a locally installed version of prettier is up-to-date. I checked my yarn.lock (you may need to check package-lock.json) and found that prettier was a dependency of another package in my project.





相关问题
store data in memory with nestjs

I am trying to persist some data in my nestjs server so I can then use that data in my client app through http requests. I have created a products.service.ts file with the function getAllData() that ...

React Hook Form Error on custom Input component

I am having a problem when I use react hook form + zod in my application, in short the inputs never change value and I get the following error in the console: Warning: Function components cannot be ...

Updatable promises using proxy in JavaScript

EDIT: I ve updated this question, and the old question is moved here. A POC can be found on this jsfiddle or the snippet below GOAL: The goal here is to make or rather simulate a promise that can be ...

热门标签