如何让VSCode的Prettier格式化React项目时不删除TypeScript类型中的逗号

1. 修改trailingComma配置 #

你当前.prettierrc中trailingComma: "none"的配置会让Prettier删除所有语法结构的尾随逗号，包含TypeScript类型定义中的行尾逗号，这是逗号被移除的直接原因。
可根据使用需求修改该配置值：

• 若只需在对象、数组、TypeScript类型定义这类ES5兼容的结构中保留尾随逗号，将值改为"es5"
• 若希望所有支持尾随逗号的语法（含函数参数等）都保留尾随逗号，将值改为"all"
  修改后的基础配置示例：

{
  "semi": false,
  "trailingComma": "es5",
  "singleQuote": true,
  "printWidth": 80
}

2. 显式指定TypeScript文件解析器 #

添加React依赖后如果Prettier错误识别了.ts/.tsx文件的语法规则，可在配置中新增overrides规则显式指定解析器，避免语法解析异常：

{
  "semi": false,
  "trailingComma": "es5",
  "singleQuote": true,
  "printWidth": 80,
  "overrides": [
    {
      "files": ["*.ts", "*.tsx"],
      "options": {
        "parser": "typescript"
      }
    }
  ]
}

3. 重启VSCode验证效果 #

修改配置后重启VSCode，重新保存TypeScript文件即可验证格式化效果。

内容的提问来源于stack exchange，提问作者Milan Smolík