webpack多页运用架构系列（九）：总有刁民想害朕！ESLint为你阻击渣滓代码

2019年8月31日 124次阅读来源: array_huang

本文首发于
Array_Huang的手艺博客——
有用至上，非经作者赞同，请勿转载。
原文地点：
https://segmentfault.com/a/1190000007030775
假如您对本系列文章感兴趣，迎接关注定阅这里：
https://segmentfault.com/blog/array_huang

媒介

刁民，还不退下？啊……来人啊快救驾！

你地点的团队里有无“老鼠屎”？就是特地写种种看起来溜得飞起但实际上艰涩难明的代码？又或是缩进换行乱成一团？

你写代码是不是是特大意？常常落下些语法错误，debug起来想死？

假如你有以上题目，ESLint帮到你！[手动诙谐]

ESLint的用处是？

从上面两个运用场景，你也许已猜到ESLint是用来干什么的了：

检察代码是不是相符编码范例和一致的代码作风；
检察代码是不是存在语法错误；

语法错误好说，编码范例和代码作风怎样检察呢？ESLint定义好了一大堆划定规矩作为可设置项;同时，一些大公司会开源出来他们运用的设置（比如说airbnb），你能够在某套现成设置的基础上举行修正，修正成合适你们团队运用的编码范例和代码作风。

本文主要讲什么？

本文偏重引见怎样在webpack里整合进ESLint，而并不引见ESLint自身，因而，关于没有运用过ESLint的小伙伴，请先去本身入门一下啦。

webpack怎样整合ESLint？

此次我们须要运用到eslint-loader，先放出设置的代码：

/* 这是webpack设置文件的内容，省略无关部份 */
{
  module: {
    preLoaders: [{
      test: /\.js$/, // 只针对js文件
      loader: 'eslint', // 指定启用eslint-loader
      include: dirVars.srcRootDir, // 指定检察局限仅为本身团队写的营业代码
      exclude: [/bootstrap/], // 剔撤除不须要应用eslint检察的文件
    }],
  },
  eslint: {
    configFile: path.resolve(dirVars.staticRootDir, './.eslintrc'), // 指定eslint的设置文件在那里
    failOnWarning: true, // eslint报warning了就停止webpack编译
    failOnError: true, // eslint报error了就停止webpack编译
    cache: true, // 开启eslint的cache，cache存在node_modules/.cache目次里
  }
}

接下来解释一下这份eslint-loader的设置。

为嘛把eslint-loader放在`preLoaders`而不是`loaders`里？

理论上来讲放loaders里也无伤大雅，但放preLoaders里有以下优点：

放在preLoader是先于loader的，因而当ESLint检察到题目报了warning/error的时刻就会停掉，能够轻微省那末一点点时候吧也许[手动诙谐]。
假如你运用了babel，或相似的loader，那末，经由过程webpack编译前后的代码相差就很大了，这会形成两个题目（以babel为例）：
- babel把你的代码转成什么样你本身是没法控制的，这每每致使没法经由过程ESLint的检察。
- 我们实际上并不体贴编译后天生的代码，我们只须要管好我们本身手写的代码即可，横竖谁也不会没事去读读编译后的代码吧？

怎样传参给eslint-loader？

从eslint-loader官方文档能够看出，eslint-loader的设置照样比较多也比较复杂的，因而采用了自力的一个设置项eslint（跟module同级哈）。

总结

只需你能在本身团队里胜利履行ESLint，那末最起码，你能够宁神不必再看到那些奇奇怪怪的代码了，由于，它们都编译不经由过程呐哈哈哈哈哈……

后话

经由过程webpack整合ESLint，我们能够保证编译天生的代码都是没有语法错误且相符编码范例的；但在开辟过程当中，比及编译的时刻才察觉到题目能够也是太慢了点儿。

因而我发起能够把ESLint整合进编辑器或IDE里，像我本人在用Sublime Text 3的，就能够运用一个名为SublimeLinter的插件，一写了有题目的代码，就立时会标识出来，如下图所示：

《webpack多页运用架构系列（九）：总有刁民想害朕！ESLint为你阻击渣滓代码》

示例代码

诸位看本系列文章，搭配我在Github上的脚手架项目食用更佳哦（笑）：Array-Huang/webpack-seed（https://github.com/Array-Huang/webpack-seed）。

附系列文章目次（同步更新）