如何在TypeScript中让Prettier支持新的satisfies运算符？

前置说明 #

• 此问题与.svelte文件无关，相关问题可参考《Svelte with prettier/eslint》，本文针对SvelteKit中使用的纯TS 4.9+版本。

问题场景 #

使用Svelte API路由文档中的示例代码：

import { error } from '@sveltejs/kit';
import type { RequestHandler } from './$types';

export const GET = (({ url }) => {
  const min = Number(url.searchParams.get('min') ?? '0');
  const max = Number(url.searchParams.get('max') ?? '1');

  const d = max - min;

  if (isNaN(d) || d < 0) {
    throw error(400, 'min and max must be numbers, and min must be less than max');
  }

  const random = min + Math.random() * d;

  return new Response(String(random));
}) satisfies RequestHandler;

Prettier无法识别TypeScript 4.9新增的satisfies运算符，报错如下：

["ERROR" - 3:54:50 PM] Error formatting document.
["ERROR" - 3:54:50 PM] ',' expected. (17:4)
 15 |
 16 |   return new Response(String(random));
> 17 | }) satisfies RequestHandler;
     |    ^
 18 |
SyntaxError: ',' expected. (17:4)

已尝试的操作 #

• 升级至最新版Prettier及相关依赖：

$ npm ls | grep prettier
├── eslint-config-prettier@8.3.0
├── prettier-plugin-svelte@2.10.1
├── prettier@2.8.8

• 升级到最新版TypeScript：

$ npm ls | grep typescript
├── @typescript-eslint/eslint-plugin@5.59.11
├── @typescript-eslint/parser@5.59.11
├── typescript@5.1.3

完整错误信息及配置 #

["INFO" - 3:54:50 PM] Formatting file:///home/mike/Code/mycompany/myproject/src/routes/api/v1/proposals/%2Bserver.ts
["INFO" - 3:54:50 PM] Using config file at '/home/mike/Code/mycompany/myproject/.prettierrc'
["INFO" - 3:54:50 PM] Using ignore file (if present) at /home/mike/Code/mycompany/myproject/.prettierignore
["INFO" - 3:54:50 PM] File Info:
{
 "ignored": false,
 "inferredParser": "typescript"
}
["INFO" - 3:54:50 PM] Detected local configuration (i.e. .prettierrc or .editorconfig), VS Code configuration will not be used
["INFO" - 3:54:50 PM] Prettier Options:
{
 "filepath": "/home/mike/Code/mycompany/myproject/src/routes/api/v1/proposals/+server.ts",
 "parser": "typescript",
 "useTabs": false,
 "singleQuote": true,
 "trailingComma": "all",
 "printWidth": 120,
 "proseWrap": "always",
 "tabWidth": 2,
 "bracketSpacing": true,
 "semi": true,
 "arrowParens": "avoid",
 "svelteSortOrder": "options-scripts-markup-styles",
 "svelteStrictMode": false,
 "svelteBracketNewLine": true,
 "svelteAllowShorthand": true
}
["ERROR" - 3:54:50 PM] Error formatting document.
["ERROR" - 3:54:50 PM] ',' expected. (17:4)
 15 |
 16 |   return new Response(String(random));
> 17 | }) satisfies RequestHandler;
     |    ^
 18 |
SyntaxError: ',' expected. (17:4)
 15 |
 16 |   return new Response(String(random));
> 17 | }) satisfies RequestHandler;
     |    ^
 18 |
 at e (/home/mike/Code/mycompany/myproject/node_modules/prettier/parser-typescript.js:1:322)
 at /home/mike/Code/mycompany/myproject/node_modules/prettier/parser-typescript.js:22:3328487
 at Object.parse (/home/mike/Code/mycompany/myproject/node_modules/prettier/parser-typescript.js:22:3328520)
 at Object.parse$a [as parse] (/home/mike/Code/mycompany/myproject/node_modules/prettier/index.js:12513:19)
 at coreFormat (/home/mike/Code/mycompany/myproject/node_modules/prettier/index.js:14044:16)
 at formatWithCursor$1 (/home/mike/Code/mycompany/myproject/node_modules/prettier/index.js:14284:14)
 at /home/mike/Code/mycompany/myproject/node_modules/prettier/index.js:59304:12
 at Object.format (/home/mike/Code/mycompany/myproject/node_modules/prettier/index.js:59324:12)
 at t.default.format (/home/mike/.vscode-server/extensions/esbenp.prettier-vscode-9.13.0/dist/extension.js:1:14694)
 at t.PrettierEditProvider.provideEdits (/home/mike/.vscode-server/extensions/esbenp.prettier-vscode-9.13.0/dist/extension.js:1:11367)
 at U.provideDocumentFormattingEdits (/home/mike/.vscode-server/bin/4cb974a7aed77a74c7813bdccd99ee0d04901215/out/vs/workbench/api/node/extensionHostProcess.js:102:45790)
["INFO" - 3:54:50 PM] Formatting completed in 82ms.

内容的提问来源于stack exchange，提问作者mikemaccana