【webpack】新的起航28 -- webpack中配置eslint（番外篇）

开始

可以使用vsCode在扩展商店中安装Eslint，并且配置一个 .eslintrc.js 相关的自定义规则就完事了，可能跟webpack没有一点联系，但这并不是我们要说的，要么你写项目的时候就将使用代码规范化，最后打包也行，但有一个问题！

问题：

并不是所有开发工具都可以成功安装Eslint插件，也并不是所有开发者自定义的规则一样，这就要前期大量的配置规范（企业一般都有属于自己的一套代码规则），所以记录一下webpack如何配置eslint的 ------ eslint+webpack双剑合璧！

实现：

我们要实现通过npm install eslint eslint-loader -D，前者安装eslint跟通过开发工具安装是一样的道理，这里使用npm安装就是怕个别开发工具出现安装失败的问题，其次就是webpack的loader编译器 eslint-loader ，我们要在检测js结尾的规则中使用这个loader即可，当然这还没完，如果此时打包编译的话，他的规则报错就会生产到命令行中，明显跟看天书一样不方便，此时我们还要再开发环境中devServer配置项内使用一个 overlay: true 此时重新打包你会发现，浏览器就会展示对应的编码规范错误面板，精确到哪个文件哪行哪列，有没有看起来很行Vue中的那种页面报错呢，剩下的就要查一下对应报错如何改即可，一般通过查文档都可以解决，不好？

优化：

别急，我可以让你连这一步都看不到，就是可以使用代码整理工具，只需要每次写完代码格式化一下，即可解决Eslint相关的严格要求，所以如何自己配置一套符合能解决格式化配置的就是重点啦 → VScode格式化代码配置及插件 这篇文章可以给你答案~

最后说一下eslint-loader配置项：

戳这里 → 关于eslint-babel的官方文档

enforce：pre → 强制先执行当前loader，此时即使它写在最前面

写在options配置项内 ↓
fix: true → 自动修复eslint一下较低级的错误

cache:true → 优化一下打包速度

结语

最后说一下业界常用的：

首先上面说的一般都不会经常用（eslint+webpack），因为他可能会影响打包速度，所以一般都不会这样用，而且看着页面去改这些eslint的规范报错，简直不要太作死，最最最最正确的做法还是自己配置一个自动匹配eslint规范的格式化规则，使自己每次写的代码都符合规则，那就不需要在考虑这些骚操作了~