and have not ejected, any additional rules will only be displayed in the IDE integrations , but not in the browser or the terminal.
现在回想一下 create-react-app 中 ESLint 是如何工作的, 终端有 warning/error 的信息, 但是这个打印出来的信息的其实并不是依照 eslint-config-alloy/react 规则, 而是 create-react-app 的默认规则. 在集成在编辑器 (我用的 VSCode) 中的红色波浪线功能则是根据 eslint-config-alloy/react 规则显示的.
但是在 eject 后, 编译与波浪提示都根据 eslint-config-alloy/react 规则进行代码审查, 所以 eject 前根据默认规则审查通过的代码在 eject 后并不能通过 eslint-config-alloy/react 的审查报了错.(eslint-config-alloy/react 规则真的很严格).
ESLint 的 error 该不该直接退出
在这里还有一个设计思路与使用思路上的冲突: ESLint 默认 error 级别直接报错退出, 是因为将某种 rule 的错误等级定为 error 时, 当出错代码触发了这个 rule, 就意味着程序根据规则来说已经不对了, 就不需要再往后进行编译等等了. 所以代码必须先过了 ESLint 这关(也就是用户自己对代码定下的规则), 才能放到 babel 里去进行编译.(具体的可以看 zakas 大神关于这个问题的 讨论 )
(我个人之前本来比较喜欢 error 时不退出, 然后选择性的去修改部分有问题的代码, 有些报错的代码就不理会等重构的时候再说. 但是仔细一想其实违背了 ESLint 的思想, 既然有 warning 和 error 的区分, 那些不重要的 error 其实就应该定义为 warning.)
eslint-loader 配置问题
按照 ESLint-loader 的 文档
failOnError (default: false)
Loader will cause the module build to fail if there are any ESLint errors.
failOnError 默认是 false, 按照说明应该是不会阻止 build.
ESLint-loader 的作者也 提到 (不过远在 2015 年 3 月)
failOn* are off by default to avoid webpack to break the build for "just some linting issues". So you should not have any error/warning that break the build by default.
然而, 实际上 build 依然失败, 具体原因我也不清楚, 有几个 issue 也在反应 failOnError 不起作用, 我猜可能是 ESLint-loader 没能成功的配置 ESLint, 这个坑以后仔细研究一下再来填(逃.
解决方案
方案 1
eslint-loader 的作者给出的 解决方案
Like I said, you can use emitWarning: true option to force all ESLint error/warning being reported as warnings
将 emitWarning 设为 true 就可以了, 所有的 error/warning 信息都会打印出来, error 也不会阻止编译, 简单粗暴.
rules: [{
enforce: 'pre',
test: /\.jsx?$/,
loader: 'ESLint-loader',
options: {
emitWarning: true
}
}]
方案 2
遵照 zakas 大神的设计思路, 报 error 的就阻止编译, 改到通过为止, 报 warning 的就打印出来, 个人认为这才是正确遵照 ESLint 的使用方法.
方案 3(粗暴)
将
./node_modules/ESLint-loader/index.js
中的
emitter(webpack.version === 2 ? new ESLintError(messages) : messages)
直接注释掉! 不给 ESLint 传递任何错误信息, 也不会返回错误码了, 这样终端永远都是 0 errors 0 warnings(误), 错误就只能通过编辑器的红线提示来看了.
tips
Also to note, the actual build still finishes and produces output. This only affects wrappers that would call webpack, such as webpack-dev-server (won't automatically reload the browser if lint errors exist) or
frontend-maven-plugin
(will fail the maven build if lint errors exist).
这位仁兄 提到了 关于 ESLint 其实并不会阻止 build, 只是会在遇到 error 时阻止像 webpack-dev-server 这种服务器对浏览器的自动刷新.
参考
errors cause webpack to not build #23
MoOx/ESLint-loader
ESLint error causing Webpack to stop watching/building #168
Option to exit with success even if there are errors #2949
ESLint-loader with WebPack 2.2 #148
来源: https://juejin.im/post/5a71b4fbf265da3e2a0de863