为eject后的create-react-app配置ESLint
问题项目一开始使用的是create-react-app创建的,配置的ESLint是用的AlloyTeam的eslint-config-alloy/react, 默认配置已经很合理了,并且每条配置都有相应的说明,只需要再根据个人喜好修改一些rule即可,我个人修改的.eslintrc.json配置如下 { "extends": [ "eslint-config-alloy/react" ],"globals": { // 这里填入你的项目需要的全局变量 // 这里值为 false 表示这个全局变量不允许被重新赋值,比如: // // jQuery: false,// $: false },"rules": { "indent": [ "warn",2,{ "SwitchCase": 1,"flatTernaryExpressions": true } ],"semi": [ "error","never" ],"react/jsx-indent": [ "warn",2 ],"react/jsx-indent-props": [ "warn","no-unused-vars": [ "warn",{ "vars": "all","args": "none","caughtErrors": "none" } ] } } 但是在eject之后运行
思考按理说,eject前后配置不变,只不过是将配置弹出,npm start 应该可以直接运行,但是却报了ESLint的错误。 一开始我以为是eslint-config-alloy/react的问题,然后重新手写了一些配置依然会报错,证明不是eslint-config-alloy/react的问题。google之后在一个issue发现:
也就是说,ESLint的会在发现error级别错误的时候触发webpack报错,导致编译失败。 但是为什么在eject之前能通过审查的代码在eject后就遇到error报错了呢? 简单粗暴我们直接看create-react-app文档中关于ESLint的部分
现在回想一下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的文档
ESLint-loader的作者也提到(不过远在2015年3月)
然而,实际上build依然失败,具体原因我也不清楚,有几个issue也在反应 解决方案方案1eslint-loader的作者给出的解决方案
将 rules: [{ enforce: 'pre',test: /.jsx?$/,loader: 'ESLint-loader',options: { emitWarning: true } }] 方案2遵照zakas大神的设计思路,报error的就阻止编译,改到通过为止,报warning的就打印出来,个人认为这才是正确遵照ESLint的使用方法。 方案3(粗暴)将 emitter(webpack.version === 2 ? new ESLintError(messages) : messages) 直接注释掉!不给ESLint传递任何错误信息,也不会返回错误码了,这样终端永远都是 0 errors 0 warnings(误),错误就只能通过编辑器的红线提示来看了。 tips
这位仁兄提到了关于ESLint其实并不会阻止build,只是会在遇到error时阻止像webpack-dev-server这种服务器对浏览器的自动刷新。 参考
(编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |