Prettier 格式化 TypeScript 泛型语法问题解析

在 JavaScript 生态系统中，Prettier 作为一款流行的代码格式化工具，在处理 TypeScript 类型注解时可能会遇到一些特殊情况。本文将以一个典型场景为例，分析 Prettier 在处理 TypeScript 泛型语法时的行为差异。

问题现象

当开发者尝试格式化包含 TypeScript 泛型类型注解的代码时，例如：

const lastSelectIndexRef = useRef<number | null>(null);

在某些配置下，Prettier 可能会将其错误地格式化为：

const lastSelectIndexRef = (useRef < number) | (null > null);

这种格式化结果显然不符合预期，会导致代码无法正常执行。

根本原因

出现这种问题的核心在于 Prettier 使用的解析器选择。Prettier 支持多种解析器来处理不同类型的代码：

1. Babel 解析器：主要用于纯 JavaScript 代码
2. TypeScript 解析器：专门处理 TypeScript 语法
3. Babel-TS 解析器：结合了 Babel 和 TypeScript 的特性

当使用标准的 Babel 解析器时，Prettier 会将 < 和 > 符号解释为 JSX 标签或比较运算符，而不是 TypeScript 的泛型类型参数。这导致了格式化结果的异常。

解决方案

针对混合使用 JavaScript 和 TypeScript 的项目，推荐以下解决方案：

1. 显式指定 TypeScript 解析器：

   // .prettierrc
   {
     "parser": "typescript"
   }
   

2. 使用 Babel-TS 解析器（适用于需要同时支持 JS 和 TS 的情况）：

   // .prettierrc
   {
     "parser": "babel-ts"
   }
   

3. 让 Prettier 自动选择解析器（删除显式 parser 配置）：

   // .prettierrc
   {}
   

最佳实践

对于现代前端项目，特别是使用 TypeScript 的项目，建议：

1. 统一项目中的文件扩展名为 .ts 或 .tsx
2. 在项目根目录配置明确的 Prettier 解析器
3. 对于混合项目，考虑使用 overrides 配置为不同文件类型指定不同解析器

// .prettierrc
{
  "overrides": [
    {
      "files": "*.ts",
      "options": {
        "parser": "typescript"
      }
    },
    {
      "files": "*.js",
      "options": {
        "parser": "babel"
      }
    }
  ]
}

通过合理配置 Prettier 解析器，可以确保 TypeScript 的类型注解和泛型语法得到正确格式化，保持代码的一致性和可读性。