解决lint-staged中ESLint忽略文件警告问题的最佳实践

在开发过程中，我们经常遇到需要自动生成代码文件的情况，比如使用GraphQL Codegen这样的工具生成TypeScript类型定义文件。这些生成的文件通常需要被ESLint忽略，但实际使用lint-staged时却会遇到"File ignored because of a matching ignore pattern"的警告信息。

问题根源分析

这个问题的本质在于ESLint和lint-staged的交互方式。当我们在.eslintrc.json中配置了ignorePatterns来忽略特定目录或文件时，ESLint确实会跳过对这些文件的检查。然而，当这些被忽略的文件被修改并提交时，lint-staged仍然会尝试对它们运行ESLint，从而产生警告。

传统解决方案的局限性

常见的解决方案是使用--no-warn-ignored选项，但这仅适用于ESLint的flat配置格式。对于许多仍在广泛使用的插件和配置（如Airbnb的ESLint配置），由于它们的peer dependencies尚未支持flat配置，这种方法并不适用。

推荐解决方案

更优雅的解决方案是在将文件传递给ESLint之前，先使用ESLint API检查哪些文件应该被忽略。以下是具体实现方法：

import { ESLint } from 'eslint'

const removeIgnoredFiles = async (files) => {
  const eslint = new ESLint()
  const isIgnored = await Promise.all(
    files.map((file) => {
      return eslint.isPathIgnored(file)
    })
  )
  const filteredFiles = files.filter((_, i) => !isIgnored[i])
  return filteredFiles.join(' ')
}

export default {
  '**/*.{ts,tsx,js,jsx}': async (files) => {
    const filesToLint = await removeIgnoredFiles(files)
    return [`eslint --max-warnings=0 ${filesToLint}`]
  },
}

实现原理

1. 我们创建了一个removeIgnoredFiles函数，它接受文件列表作为参数
2. 使用ESLint的isPathIgnored方法异步检查每个文件是否应该被忽略
3. 过滤掉所有被忽略的文件，只保留需要检查的文件
4. 将过滤后的文件列表传递给ESLint命令

优势

这种方法有以下几个优点：

• 完全遵循ESLint的忽略规则配置
• 不会产生任何警告信息
• 兼容各种ESLint配置格式
• 保持代码整洁，无需特殊注释或配置

实际应用建议

对于大型项目，可以考虑将这个功能封装为一个独立的工具函数，方便在多个lint-staged配置中复用。同时，可以添加适当的日志输出，在开发环境下帮助调试哪些文件被忽略了。

通过这种方式，我们既保持了代码质量检查的严格性，又避免了不必要的警告干扰，使开发流程更加顺畅。