ESLint无法识别JSX文件中的Prettier格式问题求助

核心问题分析 #

你遇到的情况是ESLint仅扫描JS文件的Prettier违规，却忽略JSX文件，大概率是文件扫描范围、解析器配置或插件优先级的问题，以下是针对性排查和解决步骤：

1. 强制ESLint扫描JSX文件 #

默认eslint .可能未明确包含JSX扩展名，导致漏扫。先验证这一点：

npm run lint -- --ext .js,.jsx

如果这条命令能检测出JSX文件的问题，直接修改package.json的lint命令，固定扫描扩展名：

{
  "scripts": {
    "lint": "eslint . --ext .js,.jsx",
    "lint:fix": "eslint --fix . --ext .js,.jsx"
  }
}

2. 显式配置JSX解析器 #

React项目的JSX需要专用解析器识别，虽然react-app预设已包含，但和airbnb配置可能存在冲突。在.eslintrc.json中添加解析器配置：

{
  "parser": "@babel/eslint-parser",
  "parserOptions": {
    "ecmaVersion": "latest",
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  },
  // 其他原有配置...
}

执行安装依赖：

npm install --save-dev @babel/eslint-parser

3. 确保Prettier规则优先级 #

plugin:prettier/recommended已经放在extends最后（正确），但可以显式强制开启Prettier规则，避免被其他配置覆盖：

{
  "rules": {
    "react/react-in-jsx-scope": "off",
    "prettier/prettier": "error" // 强制将Prettier违规标记为ESLint错误
  }
}

4. 验证Prettier本身是否生效 #

先单独运行Prettier检查JSX文件，确认配置没问题：

npx prettier --check Test1.jsx

如果这条命令能检测出双引号、tabWidth的问题，说明Prettier配置正常，问题出在ESLint集成；如果检测不出，检查.prettierrc.json是否在项目根目录，或是否被其他Prettier配置文件（如.prettierrc.js）覆盖。

5. 修复依赖版本兼容 #

eslint-config-airbnb@19.0.4与eslint@8.36.0可能存在版本兼容问题，更新依赖到兼容版本：

npm update eslint-config-airbnb eslint-plugin-prettier eslint-config-prettier

验证 #

修改配置后重新运行npm run lint，Test1.jsx中的"20px"双引号、tabWidth不符合配置的问题应该会被正常检测上报。

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