eslint-disable无法屏蔽unicorn/filename-case规则报错如何解决

架构老林

2026-10-3

问题原因

你添加的文件内注释不生效的核心原因是unicorn/filename-case是校验文件名的规则，作用范围是文件名称而非文件内部的代码内容，因此写在文件内部的eslint-disable-next-line注释无法匹配到该规则的校验逻辑，才会触发eslint-comments/no-unused-disable报错。

方案1：给Next.js页面目录统一配置kebab case规则（最推荐）

Next.js的pages、app目录下的文件本身就要求kebab case来匹配URL路径，你可以直接在ESLint配置文件（.eslintrc.js、.eslintrc.json等）中通过overrides给对应目录单独设置规则，一次性解决所有页面文件的命名校验问题：

module.exports = {
  // 保留你原有的其他ESLint配置
  overrides: [
    {
      // 匹配所有页面目录下的前端文件，可根据你的项目结构调整匹配规则
      files: ['pages/**/*.{js,jsx,ts,tsx}', 'app/**/*.{js,jsx,ts,tsx}'],
      rules: {
        'unicorn/filename-case': ['error', { case: 'kebabCase' }]
      }
    }
  ]
}

方案2：仅忽略单个文件的校验

如果你不想修改全局规则，只需要忽略payment-shipping.tsx这一个文件的校验，可以在ESLint配置中给unicorn/filename-case规则添加忽略文件配置：

module.exports = {
  // 保留你原有的其他ESLint配置
  rules: {
    'unicorn/filename-case': [
      'error',
      {
        case: 'camelCase', // 保留你原有的全局命名规则配置
        ignoredFiles: ['payment-shipping.tsx']
      }
    ]
  }
}