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!


预告:更多关于前端工程工作流构建的文章,都会第一时间更新在我的公众号:闰土大叔,欢迎关注!

我是如何在公司项目中使用ESLint来提升代码质量的的更多相关文章

  1. 如何在VUE项目中添加ESLint

    如何在VUE项目中添加ESLint 1. 首先在项目的根目录下 新建 .eslintrc.js文件,其配置规则可以如下:(自己小整理了一份),所有的代码如下: // https://eslint.or ...

  2. Vue2/3 项目中的 ESLint + Prettier 代码检测格式化风格指南

    Vue2/3 项目中的 ESLint + Prettier 代码检测格式化风格指南 因为平时都是使用 VSCode ESLint + Prettier 检测格式化不规范代码,但是随着接手的项目越来越多 ...

  3. 在vue项目中使用codemirror插件实现代码编辑器功能(代码高亮显示及自动提示

    在vue项目中使用codemirror插件实现代码编辑器功能(代码高亮显示及自动提示) 1.使用npm安装依赖 npm install --save codemirror; 2.在页面中放入如下代码 ...

  4. DevOps 在公司项目中的实践落地

    原文出处:https://www.cnblogs.com/beef/p/7743594.html ref: [DevOps]团队敏捷开发系列--开山篇 https://www.cnblogs.com/ ...

  5. vue-webpack所构建好的项目中增加Eslint

    首先在package.json中配置eslint模块: 在终端运行命令:npm install 然后在build文件夹中web pack.base.conf.js配置eslint 接下来在在项目中新建 ...

  6. 在React项目中添加ESLint

    1. 安装eslint npm install eslint --save-dev // 或者 yarn add eslint --dev 2. 初始化配置文件 npx eslint --init / ...

  7. 我是如何在实际项目中解决MySQL性能问题

    可能是本性不愿随众的原因,我对于程序员面试中动辄就是考察并发上千万级别的QPS向来嗤之以鼻,好像国内的应用都是那么多用户量一样,其实并发达到千万,百万以上的应用能有几个? 绝大多数的程序员面临的只是解 ...

  8. JQuery复制内容到剪切板-jquery.zclip.js的使用,在公司项目中

    公司项目中有一个复制粘贴的内容,也试图找其他插件但都是浏览器兼容问题,在网上找这个插件挺不错的,FLASH,兼容各个浏览器,测试时要在服务器环境下,点击参考,参考这个网址,或者搜下标题这个插件,性能不 ...

  9. create-react-app项目中的eslint

    "no-multi-spaces": 1, //禁止多个空格 "jsx-quotes": 1, //此规则强制在JSX属性中一致使用双引号或单引号 " ...

随机推荐

  1. mysql case then使用

    表的创建CREATE TABLE `lee` (`id` int(10) NOT NULL AUTO_INCREMENT, `name` char(20) DEFAULT NULL, `birthda ...

  2. 基于Criminisi算法的栅格影像数据敏感地物隐藏

    栅格影像数据敏感地物伪装是指通过计算机智能识别与计算,将影像数据中的敏感地物进行识别与提取,将敏感地物智能替换成公共地物,如草地.森林.湖泊.公园等.但目前该技术并不成熟,同时栅格影像数据敏感地物伪装 ...

  3. CentOS下下删除大量文件

    首先建立50万个文件 ➜ test for i in $(seq 1 500000);do echo text >>$i.txt;done 1. rm ➜ test time rm -f ...

  4. android操作通讯录的联系人

    界面配置文件 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"     and ...

  5. js 手机端触发事事件、javascript手机端/移动端触发事件

    处理Touch事件能让你跟踪用户的每一根手指的位置.你可以绑定以下四种Touch事件: touchstart: // 手指放到屏幕上的时候触发 touchmove: // 手指在屏幕上移动的时候触发 ...

  6. Android模拟神器Genymotion eclipse插件安装问题出解决

    我之前一直是打开eclipse之前直接运行Genymotion模拟器就可以连接到adb了,非常方便,但最近突然想来装个eclipse的Genymotion插件玩玩,安装时居然出错了,于是不折腾好心里不 ...

  7. 【转】CentOS 6 服务器安全配置指南

    原文连接: CentOS 6 服务器安全配置指南(通用) Linux 是一个开放式系统,可以在网络上找到许多现成的程序和工具,这既方便了用户,也方便了黑客,因为他们也能很容易地找到程序和工具来潜入 L ...

  8. 金融界高富帥現身快男北京唱區 陳樂:我拿生活養夢想__娛樂新聞_Yes娛樂

    http://m.baidu.com/tc?pn=15&bd_page_type=1&pu=sz%401320%5F1001%2Cta%40iphone%5F2%5F4%2E1%5F3 ...

  9. Android开发实现HttpClient工具类

    在Android开发中我们经常会用到网络连接功能与服务器进行数据的交互,为此Android的SDK提供了Apache的HttpClient来方便我们使用各种Http服务.你可以把HttpClient想 ...

  10. Material Theme 文件名的标签(tab)被大写了

    我们平时使用的都是小写的,今天第一次使用Material Theme 这个发现标签被大写了,百度后没找到然后自己找了找设置,解决了 原来是这样的, 设置如下 设置后: 希望能帮到有同样问题的同学