React项目中react/jsx-filename-extension规则未找到错误修复求助

我在React + TypeScript项目中碰到ESLint错误：Definition for rule 'react/jsx-filename-extension' was not found，错误出现在部分导入语句位置，示例代码如下：

import "./App.css";
import { useState } from "react";
import { SxProps } from "@mui/material";

// 更多导入语句...

已查看相关建议，但不想禁用该规则，且项目中没有webpack.config.js文件。

项目配置文件 #

eslint.js #

module.exports = {
  root: true,
  parser: "@typescript-eslint/parser",
  parserOptions: {
    project: "./tsconfig.json",
    ecmaVersion: 2018, // Allows for the parsing of modern ECMAScript features
    sourceType: "module", // Allows for the use of imports
    ecmaFeatures: {
      jsx: true, // Allows for the parsing of JSX
    },
  },
  plugins: ["@typescript-eslint", "react-hooks", "import"],
  extends: ["airbnb-typescript", "plugin:react-hooks/recommended", "prettier"],
  rules: {
    "import/no-extraneous-dependencies": 0,
    "import/prefer-default-export": 0,
    "react/react-in-jsx-scope": 0,
    "react/require-default-props": 0,
    "react/jsx-props-no-spreading": 0,
    "jsx-a11y/anchor-is-valid": 0,
    "react/no-unused-prop-types": 0,
    "@typescript-eslint/no-unused-vars": 0,
    "react-hooks/exhaustive-deps": 1,
    "no-param-reassign": [
      "error",
      { props: true, ignorePropertyModificationsFor: ["state"] },
    ],
  },
};

tsconfig.json #

{
  "compilerOptions": {
    "target": "es6",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "CommonJS",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": ["src"],
}

package.json #

{
  "name": "appname",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@emotion/react": "^11.10.6",
    "@emotion/styled": "^11.10.6",
    "@mui/material": "^5.11.10",
    "@testing-library/jest-dom": "^5.14.1",
    "@testing-library/react": "^13.0.0",
    "@testing-library/user-event": "^13.2.1",
    "@types/jest": "^27.0.1",
    "@types/node": "^16.7.13",
    "@types/react": "^18.0.0",
    "@types/react-dom": "^18.0.0",
    "moment": "^2.29.4",
    "mui-chips-input": "^2.0.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "react-uuid": "^2.0.0",
    "typescript": "^4.4.2",
    "web-vitals": "^2.1.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^5.55.0",
    "@typescript-eslint/parser": "^5.55.0",
    "eslint": "^8.36.0",
    "eslint-config-airbnb-typescript": "^17.0.0",
    "eslint-config-prettier": "^8.7.0",
    "eslint-plugin-import": "^2.27.5",
    "eslint-plugin-jsx-a11y": "^6.7.1",
    "eslint-plugin-react": "^7.32.2",
    "eslint-plugin-react-hooks": "^4.6.0",
    "prettier": "^2.8.4"
  }
}

修复步骤 #

这个错误的核心原因是ESLint无法找到react/jsx-filename-extension规则的定义——你已经安装了eslint-plugin-react插件，但未在ESLint配置中启用它。按以下步骤修复：

1. 在ESLint配置中启用react插件
   打开eslint.js，修改plugins数组，添加"react"：

plugins: ["@typescript-eslint", "react", "react-hooks", "import"],

2. 确保extends包含react基础规则
   虽然airbnb-typescript应该继承react规则，但显式添加plugin:react/recommended可以避免加载顺序问题，修改extends数组：

extends: [
  "airbnb-typescript",
  "plugin:react/recommended",
  "plugin:react-hooks/recommended",
  "prettier"
],

3. （可选）明确配置规则适配TSX文件
   如果前两步仍未解决问题，可以在rules中显式指定规则，支持.tsx和.jsx文件：

"react/jsx-filename-extension": [
  "error",
  { "extensions": [".tsx", ".jsx"] }
],

4. 重启编辑器或ESLint服务
   修改配置后，重启你的代码编辑器（如VSCode），确保ESLint加载新配置。

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