CRA+TypeScript项目ESLint报Missing file extension "tsx"错误求助

可行解决方案 #

• 首先检查ESLint配置文件名：你当前标注的配置文件名为eslintr.json，正确的命名应为.eslintrc.json（开头带点，中间含rc标识），命名错误会导致ESLint无法读取自定义配置，沿用默认规则触发报错。
• 修正import resolver配置错误：你当前配置中settings.import/resolver.typescript下的paths字段属于错误写法，应改为project，同时补充node resolver作为兜底，修改后的settings段如下：

"settings": {
  "import/parsers": {
    "@typescript-eslint/parser": [".ts", ".tsx"]
  },
  "import/resolver": {
    "typescript": {
      "alwaysTryTypes": true,
      "project": "./tsconfig.json"
    },
    "node": {
      "extensions": [".js", ".jsx", ".ts", ".tsx"]
    }
  }
}

• 清除缓存重启服务：CRA会将ESLint校验结果缓存到node_modules/.cache目录，修改配置后直接重启开发服务不会生效，需要先删除该缓存目录，再重新启动项目。
• 检查文件大小写匹配：确认你的组件文件实际命名为App.tsx，导入语句的大小写和实际文件名完全一致，部分操作系统对文件大小写敏感，不一致会触发扩展名校验报错。
• 若以上方案都未生效，可以直接关闭该规则：TS编译器本身会校验导入路径的合法性，import/extensions规则在TS项目中必要性不高，直接关闭不会影响项目校验质量，在rules段新增以下配置即可：

"import/extensions": "off"

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