husky+eslint 提交项目报错【File ignored because of a matching ignore pattern 】问题修复

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第14天，点击查看活动详情

背景

前端工具 eslint+husky+lintstaged 已经成为大多数前端开发的选择。
我司某个项目也采用了这种方案。
今天在合并master分支，解决完冲突之后。发现代码提交不上去。
原因是lintstaged配置文件内的eslint语句执行的时候出现了一个 warning 。
我们项目中配置了提交代码需要0警告。

warning File ignored because of a matching ignore pattern. Use "--no-ignore" to override

查看警告文件。以及 eslint 官网对于 --no-ignore 的说明之后。明白了问题所在。

手动运行命令 npm run lint 不会报错。但是使用 git提交 的时候报错了。

.lintstagedrc配置文件

{
  "src/**/*.{js,vue}": [
      "eslint --fix --ext .js,.vue src --max-warnings 0",
      "prettier --write"
  ]
}

以上是我的lintstaged配置文件。那么问题就出在litstaged中了。

通过报错中指向的iconfont文件。进行查找，发现该文件在本地的.eslintignore中配置了。eslint官网关于ignoring-code的说明

官网中描述到。出现此消息是因为 ESLint 不确定您是否真的想对文件进行 lint。如消息所示，您可以使用--no-ignore忽略规则来省略。

也就是lintstaged在运行中无法忽略在eslintignore的文件

.eslintignore配置文件

src/**/iconfont.js

以上是我的eslintignore配置文件

解决问题

查阅lintstaged的官网描述。发现可以 lint-staged官网描述在配置中Filtering files内使用非判断。

"!(*test).js" . will match all JS files, except those ending in test.js, so foo.js but not foo.test.js

于是我在本地修改我的配置文件。

{
  "!(iconfont)src/**/*.{js,vue}": [
      "eslint --fix --ext .js,.vue src --max-warnings 0",
      "prettier --write"
  ]
}

{
  "src/**/!(iconfont)*.{js,vue}": [
      "eslint --fix --ext .js,.vue src --max-warnings 0",
      "prettier --write"
  ]
}

通过上面以及更多的尝试之后，发现并没有生效。有配置成功的可以在评论区留下你的配置。

后来各种查阅资料。通过改写配置文件终于解决了此问题。

在配置文件加上.js后缀
在内部添加处理函数，手动过滤eslintignore中的文件
把处理过的文件名用空格拼接
用eslint去执行拼接过后的所有文件。

.lintstagedrc.js

const path = require('path');

const ignorePaths = ['src/assets/fonts/iconfont.js'];

const buildEslintCommand = (filenames) => {
  return `eslint --fix --ext .js,.vue src --max-warnings 0 ${filenames
    .reduce((files, file) => {
      const pathToFile = path.relative(process.cwd(), file);
      if (!ignorePaths.includes(pathToFile)) files.push(pathToFile);
      return files;
    }, [])
    .join(' ')}`;
};

module.exports = {
  'src/**/*.{js,vue}': [buildEslintCommand, 'prettier --write'],
};

通过以上方法，完美解决此问题。