能否仅在JSX代码块中禁用ESLint的comma-dangle规则？

当然可以实现，有两种常用方案：

方案1：全局规则细分配置（推荐） #

直接在comma-dangle规则中针对JSX语法单独设置禁用逻辑，同时保留其他语法场景的原有规则。如果只想针对.tsx文件生效，可结合overrides配置精准控制：

修改你的.eslint.cjs文件如下：

module.exports = {
    root: true,
    env: {browser: true, es2020: true},
    extends: [
        'eslint:recommended',
        'plugin:@typescript-eslint/recommended',
        'plugin:react-hooks/recommended',
    ],
    ignorePatterns: ['build', '.eslintrc.cjs'],
    parser: '@typescript-eslint/parser',
    plugins: ['react-refresh'],
    rules: {
        // 非TSX文件保持原有规则
        'comma-dangle': ['warn', 'always-multiline'],
        // 其他规则...
    },
    overrides: [
        {
            // 仅对TSX文件应用以下规则
            files: ['*.tsx'],
            rules: {
                'comma-dangle': [
                    'warn',
                    {
                        arrays: 'always-multiline',
                        objects: 'always-multiline',
                        imports: 'always-multiline',
                        exports: 'always-multiline',
                        functions: 'always-multiline',
                        jsx: 'never' // 禁用JSX中的尾随逗号检查
                    }
                ]
            }
        }
    ]
};

该配置会让.tsx文件里的数组、对象、导入导出等语法依然遵循always-multiline的逗号dangle规则，仅JSX元素的属性/子元素部分不会检查尾随逗号。

方案2：行内注释临时禁用（灵活场景） #

如果只需要在某一段特定JSX代码中禁用规则，可使用ESLint行内注释实现局部控制：

function MyComponent() {
  // 临时禁用逗号dangle规则
  /* eslint-disable comma-dangle */
  return (
    <div
      className="card"
      onMouseEnter={() => {}}
    >
      <h1>示例组件</h1>
    </div>
  );
  // 恢复规则
  /* eslint-enable comma-dangle */
}

这种方式适合局部、临时的规则禁用需求。

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