TSX文件使用JSX触发ESLint react/jsx-filename-extension报错如何解决

算力阿峰

2026-10-12

排查思路与修复方案

你配置的规则本身语法正确，报错未消失通常是以下三类原因，对应修复方法如下：

原因1：ESLint服务未加载新配置
VSCode的ESLint插件不会自动实时读取更新后的配置，需要手动重启服务：
1. 按下快捷键Ctrl+Shift+P（Mac系统为Command+Shift+P）调出命令面板
2. 搜索并选择ESLint: Restart ESLint Server，等待服务重启后即可看到报错消失
原因2：存在更高优先级的ESLint配置文件覆盖了package.json配置
ESLint加载配置的优先级为：.eslintrc.js>.eslintrc.json>.eslintrc.yml>.eslintrc>package.json中的eslintConfig字段。如果项目根目录下存在前面几种独立的ESLint配置文件，package.json内的规则会被默认忽略。
修复方法：将你编写的规则迁移到优先级更高的独立ESLint配置文件的rules字段下即可，以.eslintrc.js为例：
```
module.exports = {
  // 保留你原有的其他配置
  rules: {
    // 保留你原有的其他规则
    "react/jsx-filename-extension": [1, { "extensions": [".tsx", ".jsx"] }]
  }
}
```
配置完成后同样重启ESLint服务生效。
原因3：VSCode ESLint插件未配置识别tsx文件
部分旧版本ESLint插件默认不会校验tsx后缀文件，需要手动修改VSCode配置：
1. 打开VSCode设置（快捷键Ctrl+,/Mac系统Command+,）
2. 搜索eslint.validate配置项，在列表中添加"typescriptreact"即可，示例配置：
```
"eslint.validate": [
  "javascript",
  "javascriptreact",
  "typescript",
  "typescriptreact"
]
```