在项目中如何使用ESLint提升代码质量

关于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如何去使用呢？首先咱们要去安装它：
“$ npm install eslint”
至因而本地安装仍是全局安装，大家能够看项目需求。在这里，咱们就不用官方提供的 eslint --init 来生成咱们的配置文件了，后面咱们会手动配置。尚学堂•百战程序员陈老师指出规则也不用咱们本身去指定，想看更多规则能够前往官网了解，这里只提供在公司项目中快速上手ESLint的技巧，以及在实战项目中碰到的问题的解决方案。
执行完以上步骤，咱们就可使用ESLint这个工具来校验项目里的代码。
在Vue项目里，.vue文件写的是相似于html的格式，不是标准的JavaScript文件，ESLint没法直接识别.vue文件里的JavaScript代码，那么这个时候咱们须要去安装一个工具，$ npm i eslint-plugin-html -D，由于在vue文件里面写JavaScript代码也是写在script标签里面的，这个插件的做用就是识别一个文件里面script标签里面的JS代码，官方也是这么推荐的。
如今咱们就能够到terminal里面输入 $ npm run lint，来检验项目里的代码是否符合ESLint的规则。
通常来讲，咱们项目在前期没有加入ESLint的时候，后期咱们加入了以后跑一下，基本上都会出现很是的多报错，一执行检查就是满屏的error和warning，怎么在项目中预处理错误，eslint-loader来帮忙。
我但愿在项目开发的过程中，每次修改代码，它都可以自动进行ESLint的检查。由于在咱们改代码的过程当中去作一次检查，若是有错误，咱们就可以很快地去定位到这个问题，因为是咱们刚刚改过的，所以立马把它修复掉就OK了。这就避免了咱们每次改了一大堆代码以后，要去提交的时候，再去跑一次ESLint，有可能有不少地方要去改，浪费咱们的时间，由于你一会儿就定位不到这个问题在哪里了。同时咱们每次改代码的时候去检测，也能改善咱们写代码的规范性，让咱们慢慢养成规范写代码的习惯。