Prettier 2.8 fails on "satisfies" keyword with 'SyntaxError: Missing semicolon'

[rikbrown]

Environments:

• Prettier Version: 2.8.0
• Running Prettier via: npx prettier --write test.ts
• Runtime: Vite / Typescript 4.9.3
• Operating System: Windows (WSL2 Ubuntu)
• Prettier plugins (if any):

    "@trivago/prettier-plugin-sort-imports": "^3.4.0",
    "prettier-plugin-organize-imports": "^3.2.0",

package.json:

"devDependencies": {
    "@tailwindcss/forms": "^0.5.3",
    "@trivago/prettier-plugin-sort-imports": "^3.4.0",
    "@types/random-seed": "^0.3.3",
    "@types/react": "^18.0.25",
    "@types/react-dom": "^18.0.9",
    "@types/react-router": "^5.1.19",
    "@types/react-router-dom": "^5.3.3",
    "@typescript-eslint/eslint-plugin": "^5.45.0",
    "@typescript-eslint/parser": "^5.45.0",
    "@vitejs/plugin-react": "^2.2.0",
    "assert": "^2.0.0",
    "autoprefixer": "^10.4.13",
    "cssnano": "^5.1.14",
    "eslint": "^8.29.0",
    "eslint-config-prettier": "^8.5.0",
    "eslint-plugin-array-func": "^3.1.7",
    "eslint-plugin-lodash": "^7.4.0",
    "eslint-plugin-radar": "^0.2.1",
    "eslint-plugin-react": "^7.31.11",
    "eslint-plugin-react-hooks": "^4.6.0",
    "grpc-tools": "^1.11.3",
    "husky": "^8.0.2",
    "lint-staged": "^13.0.3",
    "postcss": "^8.4.19",
    "prettier": "^2.8.0",
    "prettier-plugin-organize-imports": "^3.2.0",
    "tailwindcss": "^3.2.4",
    "ts-proto": "^1.132.1",
    "typescript": "^4.9.3",
    "vite": "^3.2.4"
  },

.prettierrc.cjs:

module.exports = {
  semi: false,
  printWidth: 120,

  // Organize generated code and assets before the rest of our code.
  importOrder: ["/generated/", "/assets/", "^[./]"],
  importOrderSeparation: true,
  importOrderSortSpecifiers: true,

  trailingComma: "es5",
}

Steps to reproduce:

Create this Typescript file file.ts:

type MyType = { answer: number }

const question = { answer: 42 } satisfies MyType

Run npx prettier --write file.ts

Expected behavior:

Prettier does its magic.

Actual behavior:

$ npx prettier -v
2.8.0
$ npx prettier --write test.ts 
test.ts
[error] test.ts: SyntaxError: Missing semicolon. (3:31)
[error]   1 | type MyType = { answer: number }
[error]   2 |
[error]   3 | const question = { answer: 42 } satisfies MyType
[error]   4 |

[rikbrown]

Note that I expect this to work per #13516

[kachkaev]

Hi @rikbrown! Can you please share a reproducible example? I suspect that this error may be to do with one of your plugins which uses a wrong (or an outdated) parser. Playground results (without plugins):

• ❌ babel
• ✅ babel-ts
• ✅ typescript

If you want to sort imports, I suggest using ESLint instead. Common options include import/order and eslint-plugin-simple-import-sort. The rationale behind this is explained in docs under What Prettier is not concerned about.

[rikbrown]

You're right. I removed my plugins and it's working. I am very sorry for wasting your time there, I'll make sure to disable them next time before submitting an issue!

Thanks for the advice on import ordering - i will switch over to using eslint plugins for that instead.

Closing this. Appreciate your quick feedback!!