11

I want to use typescript's new satisfies operator but VS code Prettier extension does not seem to recognize it and stops working.

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

Is there a way to fix or ignore it?

package.json file

{
    "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/@[email protected]_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 protected]/node_modules/@babel/parser/src/parse-error/credentials.js:61:22)
    at toParseError (/home/tanmay/Projects/Personal/react-playground/node_modules/.pnpm/@[email protected]/node_modules/@babel/parser/src/parse-error.js:58:12)
    at Parser.raise (/home/tanmay/Projects/Personal/react-playground/node_modules/.pnpm/@[email protected]/node_modules/@babel/parser/src/tokenizer/index.js:1736:19)
    at Parser.semicolon (/home/tanmay/Projects/Personal/react-playground/node_modules/.pnpm/@[email protected]/node_modules/@babel/parser/src/parser/util.js:146:10)
    at Parser.parseVarStatement (/home/tanmay/Projects/Personal/react-playground/node_modules/.pnpm/@[email protected]/node_modules/@babel/parser/src/parser/statement.js:904:10)
    at Parser.parseVarStatement (/home/tanmay/Projects/Personal/react-playground/node_modules/.pnpm/@[email protected]/node_modules/@babel/parser/src/plugins/typescript/index.js:2702:33)
    at Parser.parseStatementContent (/home/tanmay/Projects/Personal/react-playground/node_modules/.pnpm/@[email protected]/node_modules/@babel/parser/src/parser/statement.js:391:21)
    at Parser.parseStatementContent (/home/tanmay/Projects/Personal/react-playground/node_modules/.pnpm/@[email protected]/node_modules/@babel/parser/src/plugins/typescript/index.js:2760:20)
    at Parser.parseStatement (/home/tanmay/Projects/Personal/react-playground/node_modules/.pnpm/@[email protected]/node_modules/@babel/parser/src/parser/statement.js:329:17)
    at Parser.parseBlockOrModuleBlockBody (/home/tanmay/Projects/Personal/react-playground/node_modules/.pnpm/@[email protected]/node_modules/@babel/parser/src/parser/statement.js:1082:25)
    at Parser.parseBlockBody (/home/tanmay/Projects/Personal/react-playground/node_modules/.pnpm/@[email protected]/node_modules/@babel/parser/src/parser/statement.js:1058:10)
    at Parser.parseBlock (/home/tanmay/Projects/Personal/react-playground/node_modules/.pnpm/@[email protected]/node_modules/@babel/parser/src/parser/statement.js:1028:10)
    at Parser.parseFunctionBody (/home/tanmay/Projects/Personal/react-playground/node_modules/.pnpm/@[email protected]/node_modules/@babel/parser/src/parser/expression.js:2467:24)
    at Parser.parseFunctionBodyAndFinish (/home/tanmay/Projects/Personal/react-playground/node_modules/.pnpm/@[email protected]/node_modules/@babel/parser/src/parser/expression.js:2440:10)
    at Parser.parseFunctionBodyAndFinish (/home/tanmay/Projects/Personal/react-playground/node_modules/.pnpm/@[email protected]/node_modules/@babel/parser/src/plugins/typescript/index.js:2329:13)
    at callback (/home/tanmay/Projects/Personal/react-playground/node_modules/.pnpm/@[email protected]/node_modules/@babel/parser/src/parser/statement.js:1301:12)
    at Parser.withSmartMixTopicForbiddingContext (/home/tanmay/Projects/Personal/react-playground/node_modules/.pnpm/@[email protected]/node_modules/@babel/parser/src/parser/expression.js:2947:14)
    at Parser.parseFunction (/home/tanmay/Projects/Personal/react-playground/node_modules/.pnpm/@[email protected]/node_modules/@babel/parser/src/parser/statement.js:1299:10)
    at Parser.parseFunctionStatement (/home/tanmay/Projects/Personal/react-playground/node_modules/.pnpm/@[email protected]/node_modules/@babel/parser/src/parser/statement.js:750:17)
    at Parser.parseStatementContent (/home/tanmay/Projects/Personal/react-playground/node_modules/.pnpm/@[email protected]/node_modules/@babel/parser/src/parser/statement.js:366:21)
    at Parser.parseStatementContent (/home/tanmay/Projects/Personal/react-playground/node_modules/.pnpm/@[email protected]/node_modules/@babel/parser/src/plugins/typescript/index.js:2760:20)
    at Parser.parseStatement (/home/tanmay/Projects/Personal/react-playground/node_modules/.pnpm/@[email protected]/node_modules/@babel/parser/src/parser/statement.js:329:17)
    at Parser.parseBlockOrModuleBlockBody (/home/tanmay/Projects/Personal/react-playground/node_modules/.pnpm/@[email protected]/node_modules/@babel/parser/src/parser/statement.js:1082:25)
    at Parser.parseBlockBody (/home/tanmay/Projects/Personal/react-playground/node_modules/.pnpm/@[email protected]/node_modules/@babel/parser/src/parser/statement.js:1058:10)
    at Parser.parseProgram (/home/tanmay/Projects/Personal/react-playground/node_modules/.pnpm/@[email protected]/node_modules/@babel/parser/src/parser/statement.js:214:10)
    at Parser.parseTopLevel (/home/tanmay/Projects/Personal/react-playground/node_modules/.pnpm/@[email protected]/node_modules/@babel/parser/src/parser/statement.js:197:25)
    at Parser.parse (/home/tanmay/Projects/Personal/react-playground/node_modules/.pnpm/@[email protected]/node_modules/@babel/parser/src/parser/index.js:41:10)
    at Parser.parse (/home/tanmay/Projects/Personal/react-playground/node_modules/.pnpm/@[email protected]/node_modules/@babel/parser/src/plugins/typescript/index.js:3749:20)
    at Object.parse (/home/tanmay/Projects/Personal/react-playground/node_modules/.pnpm/@[email protected]/node_modules/@babel/parser/src/index.js:58:38)
    at Object.preprocessor (/home/tanmay/Projects/Personal/react-playground/node_modules/.pnpm/@[email protected]_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 protected]_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 protected]_ijmykednqrx66bjm6h37cegrgq/node_modules/prettier-plugin-tailwindcss/dist/index.js:134:3972)
    at Object.parse (/home/tanmay/Projects/Personal/react-playground/node_modules/.pnpm/[email protected]/node_modules/prettier/index.js:7511:25)
    at coreFormat (/home/tanmay/Projects/Personal/react-playground/node_modules/.pnpm/[email protected]/node_modules/prettier/index.js:8829:18)
    at formatWithCursor2 (/home/tanmay/Projects/Personal/react-playground/node_modules/.pnpm/[email protected]/node_modules/prettier/index.js:9021:18)
    at /home/tanmay/Projects/Personal/react-playground/node_modules/.pnpm/[email protected]/node_modules/prettier/index.js:38168:12
    at Object.format (/home/tanmay/Projects/Personal/react-playground/node_modules/.pnpm/[email protected]/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.
3

2 Answers 2

4

Check if you have an older globally installed version of prettier:

npm ls -g

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

npm rm -g prettier

or update it:

npm update -g
3
  • No, the global and local versions of Prettier are up to date. Thanks anyway. Commented Feb 6, 2023 at 11:30
  • I'll leave my answer up in case someone runs into this specific issue.
    – Valentin
    Commented Feb 6, 2023 at 12:00
  • Doing a yarn resolution for Prettier actually resolved this for me Commented Jun 25, 2023 at 23:48
0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.