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

Posted 2021-05-02 程序员交流学习

关于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，有可能有很多地方要去改，浪费我们的时间，因为你一下子就定位不到这个问题在哪里了。同时我们每次改代码的时候去检测，也能改善我们写代码的规范性，让我们慢慢养成规范写代码的习惯。