Prettier声明支持类私有方法但处理TS文件时报错如何解决

1. Prettier默认未为TS/TSX文件指定typescript解析器时，会使用Babel解析器处理文件，而Babel默认未开启类私有属性、类私有方法对应的语法解析插件，就会触发语法不支持的报错。
2. 本地安装的Prettier版本过低，旧版本对TypeScript类私有成员语法的原生支持存在缺陷，也会导致该问题。

• 第一步：升级Prettier到最新稳定版，执行如下命令：
  npm install --save-dev prettier@latest

• 第二步：修改.prettierrc.yml配置，在overrides字段下新增TS/TSX文件的解析规则，修改后的完整配置如下：

trailingComma: es5
tabWidth: 4
semi: false
singleQuote: true
arrowParens: avoid
printWidth: 80
importOrder:
  - "^@"
  - "^(?!src|\\.)"
  - "^.+"
importOrderSeparation: true
overrides:
  - files:
    - "*.json"
    options:
      tabWidth: 2
  - files:
    - "*.ts"
    - "*.tsx"
    options:
      parser: "typescript"

• 第三步：重新执行格式化命令即可正常运行：
  npx prettier "src/web-components/registerCustomElement.tsx"

如果完成上述操作后仍有报错，可在项目根目录新增.babelrc配置文件，添加对应语法插件支持：

{
  "parserOpts": {
    "plugins": ["classPrivateProperties", "classPrivateMethods"]
  }
}

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