我是如何在公司项目中使用ESLint来提高代码质量的

ESLint：你认识我吗

ESLint是一个语法规则和代码风格的检查工具。

和学习全部编程语言同样，想要入门ESLint，首先要去它的官网看看：https://eslint.org/。

ESLint的版本问题

目前ESLint的稳定版本是v4.19.1，若是你看过ESLint的官方文档，就会知道官网推出了ESLint v5.0.0-alpha.1，这是ESLint的一个主要版本升级。

因为这是预发布版本，ESLint还没有准备好用于生产，所以咱们不会经过npm自动升级。next安装时必须指定标签：$ npm i eslint@next --save-dev ，这句命令从 npm 仓库安装了 ESLint CLI，若是想尝试下新功能的童鞋能够安装捣鼓一番。

为何咱们要在项目中使用ESLint

ESLint能够校验咱们写的代码，给代码定义一个规范，项目里的代码必须按照这个规范写。

加入ESLint有很是多的好处，好比说能够帮助咱们避免一些很是低级的错误，一些格式上的问题致使咱们在运行生产环境的时候出现一些不明因此的报错。还有就是在跟团队协做的时候，每一个人都保持同一个风格进行代码书写，这样团队内部相互去看别人的代码的时候，就能够更容易的看懂。

ESLint实战小技巧全揭秘

那么ESLint如何去使用呢？首先咱们要去安装它：$ npm install eslint ，至因而本地安装仍是全局安装，大家能够看项目需求。在这里，咱们就不用官方提供的 eslint --init 来生成咱们的配置文件了，后面咱们会手动配置。规则也不用咱们本身去指定，想看更多规则能够前往官网了解，这里只提供在公司项目中快速上手ESLint的技巧，以及在实战项目中碰到的问题的解决方案。

用别人的轮子开发本身的项目，省时省力

第一个小技巧来了，如今网上有个叫eslint-config-standard的标准的ESLint规则，咱们继承这个规则就能够了。这样的话咱们项目里按照这个标准规则去开发代码就OK了。

首先咱们要去安装ESLint所要用到的一大堆东西：

$ npm i eslint eslint-config-standard eslint-plugin-standard eslint-plugin-promise eslint-plugin-import eslint-plugin-node -D

这些都是eslint-config-standard这个npm包里推荐咱们去安装的，由于它的校验规则要依赖于这些plugins进行去验证。

而后，咱们要去项目的根目录里面手动建立一个.eslintrc文件，而后在里面敲入如下代码：

{
  "extends": "standard"
}

执行完以上步骤，咱们就可使用ESLint这个工具来校验项目里的代码。

在Vue项目里，.vue文件写的是相似于html的格式，不是标准的JavaScript文件，ESLint没法直接识别.vue文件里的JavaScript代码，那么这个时候咱们须要去安装一个工具，$ npm i eslint-plugin-html -D，由于在vue文件里面写JavaScript代码也是写在script标签里面的，这个插件的做用就是识别一个文件里面script标签里面的JS代码，官方也是这么推荐的。因此咱们要在.eslintrc文件里面新增这么一段：

{
  "extends": "standard",
  "plugins": [
    "html"
  ]
}

执行完以上步骤后，咱们跳转到package.json文件里面的scripts里面新增一条命令：

"lint": "eslint --ext .js --ext .jsx --ext .vue src/"

--ext后面须要写上指定检测文件的后缀，如.js、.jsx、 .vue等，紧接着后面要写上一个参数，这个参数就是咱们要检测哪一个目录下面的文件，通常项目文件都在src下面，因此在后面写上src/就好。

如今咱们就能够到terminal里面输入 $ npm run lint，来检验项目里的代码是否符合ESLint的规则。

通常来讲，咱们项目在前期没有加入ESLint的时候，后期咱们加入了以后跑一下，基本上都会出现很是的多报错，一执行检查就是满屏的error和warning，简直是丧心病狂不堪入目~

如何让ESLint自动修复报错，提升开发效率

在报这么多的错误以后，若是咱们一条一条地去修复，就会变的很是的麻烦，相信刚接触ESLint的童鞋都深有体会。其实这些错误均可以让ESLint帮助咱们自动地修复。

那么咱们该怎么作呢？继续在package.json文件里面的scripts里面新增一条命令：

"lint-fix": "eslint --fix --ext .js --ext .jsx --ext .vue src/"

只须要在ESLint后面加上一个参数--fix，它就会自动修复Lint出来的问题。当咱们再去terminal里面跑一下：$ npm run lint-fix ，你会发现，世界一下安静了许多，没有那么多飘红的报错，没有满屏的error和warning。

固然，还有一种万能方法，就是在报错的JS文件中第一行写上 /* eslint-disable */
，详情可见官网的User guide（用户指南）。

至此，曾经使人抓狂的ESLint报错此刻却温柔的像只小绵羊。

不过，你觉得事情到这儿就结束了？NO，NO，NO，咱们但愿ESLint可以作的更多。

怎么在项目中预处理错误，eslint-loader来帮忙

我但愿在项目开发的过程中，每次修改代码，它都可以自动进行ESLint的检查。由于在咱们改代码的过程当中去作一次检查，若是有错误，咱们就可以很快地去定位到这个问题，因为是咱们刚刚改过的，所以立马把它修复掉就OK了。这就避免了咱们每次改了一大堆代码以后，要去提交的时候，再去跑一次ESLint，有可能有不少地方要去改，浪费咱们的时间，由于你一会儿就定位不到这个问题在哪里了。同时咱们每次改代码的时候去检测，也能改善咱们写代码的规范性，让咱们慢慢养成规范写代码的习惯。

这个时候咱们又要在terminal里面安装东西了：

$ npm i eslint-loader babel-eslint -D

执行完上述操做后，咱们须要跳转到.eslintrc文件里面配置一下：

{
  "extends": "standard",
  "plugins": [
    "html"
  ],
  "parser": "babel-eslint"
}

为何咱们要配置parser呢？由于咱们的项目是基于webpack的，项目里的代码都是须要通过babel去处理的。babel处理的这种语法可能对ESLint不是特别的支持，而后咱们使用loader处理ESLint的时候就会出现一些问题。因此通常来讲，咱们用webpack和babel来进行开发的项目，都会指定它的parser使用babel-eslint。

执行完以上步骤以后，在build目录下找到我前几篇文章里讲到的webpack.config.base.js，而后在module下面的rules里面添加一个对象：

rules: [
  {
    test: /\.(vue|js|jsx)$/,
    loader: 'eslint-loader',
    exclude: /node_modules/,
    enforce: 'pre'
  },
  ......
]

此时你们可能内心纳闷了，闰土啊你写的前面三个咱们都能看懂，最后一个 enforece: 'pre' 这是什么鬼？

别急，且听我慢慢道来。由于.vue文件已经被vue-loader处理过了，而eslint-loader只是作代码检测，确定不能让它去默认处理.vue文件。因此咱们但愿vue-loader在处理.vue文件以前，让eslint-loader先进行一次代码检测。若是代码检测都经过不了的话，那么vue-loader就不须要处理了，直接报错就OK了。因此须要加上 enforece: 'pre'，这叫预处理。

执行完上述步骤以后，咱们就能够去terminal里面尽情地跑一下 $ npm run dev ，等运行成功后，咱们能够在项目里找一个js文件，故意报个错保存一下，好比说多加个空格之类的，而后咱们的terminal里面就会立刻报错，此刻我猜测terminal的心里活动应该是：“TMD，写的什么烂代码，每天写bug气得我每次脸都涨的通红”~~~

幸运的是，机器是没有感情的，咱们却能够嗨皮地立马定位到错误，而后把它改掉就能够了。至此，ESLint无师自通，真正作到了心里无惧。

写在最后

这就是ESLint，辅助编码规范的执行，有效控制项目代码的质量。更多操做指南能够前往官网了解，这里只提供在公司项目中快速上手ESLint的技巧，以及在实战项目中碰到的问题的解决方案。

不积跬步无以致千里，不积小流无以成江海。但愿每一位童鞋均可以在平凡的岗位上积累经验，沉淀技术，早日成为公司团队里的技术骨干！Good luck！

预告：更多关于前端工程工做流构建的文章，都会第一时间更新在个人公众号：闰土大叔，欢迎关注！