Prettier格式化破坏Vue+TypeScript的ref<number>(0)代码求解决方案

问题说明 #

在Vue+TypeScript项目里用Prettier格式化代码时，带泛型的ref声明会被错误修改：

• 格式化前代码：

  const activeIndex = ref<number>(0)
  

• 格式化后代码：

  const activeIndex = ref < number > 0
  

当前使用的Prettier配置：

{
  "$schema": "https://json.schemastore.org/prettierrc",
  "semi": false,
  "tabWidth": 2,
  "singleQuote": true,
  "printWidth": 100,
  "trailingComma": "none"
}

不带类型声明的const activeIndex = ref(0)格式化正常，需要让Prettier保留原泛型写法。

可行解决方案 #

1. 升级Prettier到最新稳定版 #

这个问题多数是旧版Prettier对TypeScript函数式泛型（比如Vue的ref）的解析bug，升级到3.x及以上的最新版本，基本能直接修复这个问题。

2. 优化Prettier配置 #

在配置文件里明确指定TypeScript解析器，让Prettier更精准识别TS语法：
修改你的.prettierrc配置：

{
  "$schema": "https://json.schemastore.org/prettierrc",
  "semi": false,
  "tabWidth": 2,
  "singleQuote": true,
  "printWidth": 100,
  "trailingComma": "none",
  "parser": "typescript"
}

指定parser: "typescript"后，Prettier不会把泛型的尖括号误判为比较运算符，也就不会乱加空格和修改结构了。

3. 临时忽略单条代码（不推荐大范围用） #

如果暂时没法升级或改配置，可以在需要保留的代码前加忽略注释：

// prettier-ignore
const activeIndex = ref<number>(0)

这种方法适合个别特殊场景，不建议全局使用。

4. 排查工具冲突 #

如果项目同时用了ESLint，要确保两者规则不冲突。可以安装eslint-config-prettier，它会自动禁用ESLint中与Prettier冲突的格式化规则，避免互相干扰。

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