Prettier移除React类组件TypeScript泛型注解问题求助

我用类组件编写ErrorBoundary时，代码如下：

class ErrorBoundary extends Component<ErrorBoundaryProps,ErrorBoundaryState>

但每次用Prettier格式化后，<ErrorBoundaryProps,ErrorBoundaryState>这段泛型注解就会消失，不确定问题出在Prettier还是ESLint上。我的.eslintrc.json配置如下：

{  
  "extends": [    
    "next/core-web-vitals",    
    "plugin:storybook/recommended"  
  ],  
  "plugins": ["simple-import-sort"],  
  "rules": {    
    "simple-import-sort/imports": "error",    
    "simple-import-sort/exports": "error"  
  },  
  "parserOptions": {    
    "sourceType": "module",    
    "ecmaVersion": "latest"  
  }
}

排查与解决步骤 #

• 先验证Prettier本身的问题
  1. 单独运行Prettier格式化目标文件：执行npx prettier --write your-error-boundary-file.tsx，直接观察泛型注解是否消失，以此确认是否是Prettier的问题。
  2. 检查Prettier配置文件（.prettierrc/prettier.config.js），确认是否存在typescriptRemoveUnusedParameters这类会修改TypeScript语法的规则，或者是否安装了prettier-plugin-tailwindcss等可能干扰泛型解析的插件。
• 排查ESLint的影响
  1. 临时注释掉ESLint配置中的simple-import-sort插件，格式化代码后观察泛型是否还会消失，排除排序插件意外修改语法的可能。
  2. 暂时移除extends中的next/core-web-vitals项，测试问题是否消失，排查该预设规则是否影响了类组件泛型的保留。
• 检查TypeScript配置
  确保tsconfig.json的compilerOptions.jsx设置为react-jsx或react，错误的JSX配置可能导致Prettier无法正确识别React类组件的泛型语法。

内容的提问来源于stack exchange，提问作者E C I N