React+TypeScript项目中ESLint规则在.tsx的return内不生效求助

核心问题 #

你的ESLint配置未正确启用JSX语法的格式化规则：standard-with-typescript仅专注TypeScript标准规则，不包含JSX缩进、引号等格式化逻辑；同时配置存在冗余，overrides部分的重复设置可能导致规则冲突，使得JSX相关规则未生效。

具体修复步骤 #

1. 调整规则继承顺序，补充JSX规则集 #

修改extends数组，将React相关规则放在standard-with-typescript之后，确保React规则能覆盖基础规则：

extends: [
  'standard-with-typescript',
  'plugin:react/recommended',
  'plugin:react/jsx-runtime' // 适配React 17+自动导入JSX runtime
],

2. 完善解析器配置，开启JSX支持 #

在parserOptions中明确开启JSX解析，同时简化冗余的overrides配置（外层已配置TS解析器，无需重复设置）：

parser: '@typescript-eslint/parser',
parserOptions: {
  ecmaVersion: 'latest',
  sourceType: 'module',
  project: './client/tsconfig.json',
  ecmaFeatures: {
    jsx: true // 明确开启JSX解析支持
  }
},

3. 手动启用JSX格式化规则 #

在rules中添加JSX缩进、引号等规则，强制统一格式：

rules: {
  '@typescript-eslint/explicit-function-return-type': 'off',
  'react/react-in-jsx-scope': 'off',
  // JSX缩进规则（统一2空格）
  'react/jsx-indent': ['error', 2],
  'react/jsx-indent-props': ['error', 2],
  // JSX引号规则（统一单引号）
  'jsx-quotes': ['error', 'prefer-single'],
  // JSX闭合标签对齐规则
  'react/jsx-closing-bracket-location': ['error', 'line-aligned']
}

4. 清理冗余配置 #

删除整个overrides数组（外层已覆盖TS/TSX文件的解析配置，重复设置易引发冲突）。

5. 确保依赖完整 #

若未安装相关依赖，执行以下命令补充：

npm install eslint-plugin-react @typescript-eslint/eslint-plugin @typescript-eslint/parser standard-with-typescript --save-dev

最终配置示例 #

修改后的.eslintrc.cjs如下：

module.exports = {
  env: {
    browser: true,
    es2021: true
  },
  extends: [
    'standard-with-typescript',
    'plugin:react/recommended',
    'plugin:react/jsx-runtime'
  ],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
    project: './client/tsconfig.json',
    ecmaFeatures: {
      jsx: true
    }
  },
  plugins: [
    '@typescript-eslint',
    'react'
  ],
  rules: {
    '@typescript-eslint/explicit-function-return-type': 'off',
    'react/react-in-jsx-scope': 'off',
    'react/jsx-indent': ['error', 2],
    'react/jsx-indent-props': ['error', 2],
    'jsx-quotes': ['error', 'prefer-single'],
    'react/jsx-closing-bracket-location': ['error', 'line-aligned']
  }
}

验证修复 #

执行命令测试并自动修复TSX文件：

npx eslint src/App.tsx --fix

此时return内的JSX引号、缩进应该会自动格式化。

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