ESLint 规则详解

前端界大神 Nicholas C. Zakas 在 2013 年开发的 ESLint,极大地方便了大家对 Javascript 代码进行代码规范检查。这个工具包含了 200 多条 Javascript 编码规范且运行迅速,是几乎每个前端项目都必备的辅助工具。可是,这么多规则,每个规则的设计出发点是什么,我们该如何选择适合自己项目的规则,又成了新问题。前不久,我所在的项目开始对前端代码进行代码规范的要求,于是我们详细梳理了 eslint 中的 230 个规则。我摘录了其中一些比较重要或特别的规则列在这里,希望能对大家的工作有所帮助。

  1. 1.no-debugger

    一般来说,我们确实不希望代码中出现 debugger,但是,debugger 在项目的开发阶段还是非常有用的,所以我们并没有完全禁用这个关键字,而是采用了这样的配置:

    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0

    这样一来,开发人员可以方便地使用 debugger 在本地进行各种调试,同时有保证了线上代码不会有忘记删掉的 debugger

     

  2. 2.no-extra-boolean-cast

    很多比较老的 javascript 代码里面可以看到这样的写法:

    var boolResult = !!parameter;

    这里面实际上是做了一次隐式类型转换,可是,你真的确切里面 js 隐式转换的详细规则么?事实上,在《javascript高级编程》一书里面,作者就明确警告了大家,尽量不要使用隐式类型转换,因为这个转换规则异常复杂,所以我们打开了这个规则,来避免潜在的问题

     

  3. 3.no-inner-declarations

    ES6以前,函数声明只能在程序或另一个函数体的最前面,所以在代码块内部声明函数是错误的做法。另外,由于 javascript 中代码声明会被提升到代码当前作用域的最前面,所以在代码块内声明变量也是不明智的做法

     

  4. 4.use-isnan

    这是很多人都容易忽略的一个点。javascript 代码中 NaN 和任何变量作比较,都会得到 false,甚至和它自身比较都会得到false。所以,要判断一个变量是否是 NaN 的时候,一定要用 isNaN 方法

     

  5. 5.eqeqeq

    这一条可以说是每个 javascript 开发人员都必需遵守的,禁用 == 和 != 用 === 和 !== 代替。原因和上面的第 2 条一样,== 和 != 会带来隐式的类型转换,虽然 javascript 运行时并不会转换出错,但是后续维护代码的人却很可能理解错误,所以这条规则是必备的

     

  6. 6.no-caller

    这个规则的来由就比较复杂了,简单来说,这是 ES6 之前的一个 API,这个 API 虽然帮我们解决了一些特殊场景的问题(匿名递归函数),但是,滥用这两个 API 会导致更多的问题,所以这个 API 在 ES6 已经被弃用了,在 ES5 的严格模式下也是被禁用的。如果你想详细了解这个 API 的用法,可以查看 MDN 上的详细说明

     

  7. 7.no-extend-native

    不要扩展原生对象原型。当你在某个对象上用 for in 语句遍历对象属性,而又忘了用 hasOwnProperty 判断属性来源的时候,你就会发现被你扩展的原型属性也会被遍历出来,这往往都不是我们想要的结果

     

  8. 8.no-restricted-properties

    这个规则事实上是一个工具,它可以禁用指定对象的指定方法。比如我们希望开发人员在发 ajax 请求的时候,全部使用我们自己封装的 ajax 方法,而不要使用 jQuery 的 ajax 方法,我们就可以通过这个配置,即使发现不符合我们规定的代码

     

  9. 9.no-sequences

    逗号表达式其实是我们比较常用的语法特性,比如在 for 循环中。不过它也有很多容易让人犯错的用法,比如:

    var a = 1, b = 1;

    a = b += 3, a + b;

    你知道这个时候 a 和 b 值分别是多少么?启用此规则之后,你仍然可以在 for 循环和其它一些不容易出错的场景中使用逗号表达式,不过,如果 ESLint 提示你触犯了规则,说明你就应该修改你的代码了。

    另外,上面 a 和 b 的值都是 4

     

  10. 10.no-with

    with 语句的作用是修改作用域链,虽然有时候可以用 with 语句来简化代码,比如:

    with(frames[0].document.forms[1]){

        console.log(name.value);    // 可直接访问 form 里面的 name 属性

    }

    但有时候 with 语句也会让代码难以理解,比如下面这段代码里面,打印出来的 log 对象无法确认是传入的参数还是 obj 上面的属性:

    function f(log, obj) {

        with (obj) {

            console.log(log)

        }

    }

    所以,我们还是应该尽量避免使用 with 语句

 

  1. 11.no-sparse-arrays

    使用代码质量检查工具的一个重要目的就是为了提高代码的可读性,或者说是降低其他人阅读并理解代码的难度,这条规则就是这样。当你看到这样一段代码 var userList = ['Tiger', 'Kate', , 'Mike']; 你真的很难确定原来写这段代码的人是不是故意要在数组中留下一个 undefined 元素,毕竟这样写并没有语法上的错误。这条规则的目的就是禁止通过这种方式在数组中插入 undefined 元素,因为这种写法太有迷惑性了。

     

  2. 12.no-extra-bind

    如果你对 javascript 中的 this 变量有所了解,你一定也知道 bind 方法的作用,它可以很方便的帮我们修改方法执行时的上下文环境,但事实上有些时候并不需要使用 bind。如果你在一些不需要使用 bind 的地方也用 bind 来保证方法执行时的上下文环境,这会让代码执行的效率变低。所以,启用这条规则,可以帮你避免不必要的性能损失。

     

  3. 13.no-useless-call

    和上一条规则类似,call 和 apply 也是帮助我们修改上下文环境的好工具,但我们应该只在需要修改上下文的时候才去使用这两个方法,如果你的代码检查工具发现你修改后的上下文和函数或方法原始的上下文相同,它就会给出提示。

     

  4. 14.yoda

    yoda 表达式其实是用写争议的。有人觉得 if ('red' == color)  这样的写法可以避免程序员不小心把 == 写成了 =,但如前篇所说,我们用过在代码中禁用 ==,一律换成 ===,同时在代码检查工具的帮助下,把 == 写成 = 的可能性其实不大。而同时这样的写法在阅读时也显得比较别扭,所以我个人觉得还是禁用 yoda 表达式比较好。

     

  5. 15.no-delete-var

    delete 操作符只能删除对象上的属性,并不能删除当前上下文中的某个变量,虽然代码不会报错,但很可能实际运行的结果和开发人员设想的不同,所以,应该明确禁止删除变量的操作。

     

  6. 16.no-undef

    禁用未声明的变量。javascript 异常灵活,以至于你可以在没有声明一个变量的时候直接给他赋值,比如 t = 'test message',但这样的写法却是非常危险的,因为这种写法虽然会自动生命变量 t,但他的作用域却和用 var 声明的变量作用域不同,t 变量的作用域在全局变量上,所以,不用 var 直接声明并给变量赋值,经常导致意料之外的程序 bug。

     

  7. 17.no-new-require

    当我们使用 CommonJS 的包管理规范时,经常用 require 引入一些依赖,当我们引入的依赖是一个类定义函数时,直接在 require 上进行 new 操作很可能会引起误解。比如 var tiger = new require('User'); 和 var tiger = new (require('User')); 所以,还是禁用这种写法比较好。

 

最后附上 ESLint 规则列表,详细列出了每条规则的名称,官方是否推荐开启,以及每条规则是否能够用 --fix 参数自动修复。 点击下载

 

如需转载,请注明转自:http://www.cnblogs.com/silenttiger/p/6855604.html

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/249171.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

全文搜索引擎 ElasticSearch 还是 Solr?

原文链接 最近项目组安排了一个任务,项目中用到了全文搜索,基于全文搜索 Solr,但是该 Solr 搜索云项目不稳定,经常查询不出来数据,需要手动全量同步,而且是其他团队在维护,依赖性太强&#xff0…

NodeJS作为Web架构中间层的使用

截至2016年12月,中国网民规模已达7.31亿。传统的网站系统是否能够支撑得起如此庞大的且不断增长的用户访问并且为用户提供体验友好的页面? 一、传统的前后端: 二、传统的前后端分离问题: 性能问题: 1、渲染、数据都在…

windows server 2012 流媒体服务器搭建(直播与点播)

IIS Live Smooth Streaming(实时平滑流式处理)是微软下一代流媒体解决方案。该技术是在IIS web中集成媒体传输平台IIS media services,实现利用标准 HTTP Web 技术以及高级 Silverlight 功能,确保在互联上传输质量最佳、播放流畅音…

Vue warn Failed to mount component: template or render function not defined

问题如图,造成这类的问题一般有这么几个原因。 代码的拼写问题,当然这是最低级的错误vue定义的问题,这里我说明两点 在组件内部定义组件时,template 对应的必须是html字符串引用外部组件时,vue文件必须以template标签…

Python实现线性回归2,梯度下降算法

接上篇 4.梯度下降算法 《斯坦福大学公开课 :机器学习课程》吴恩达讲解第二课时,是直接从梯度下降开始讲解,最后采用向量和矩阵的方式推导了解析解,国内很多培训视频是先讲解析解后讲梯度下降,个人认为梯度下降算法更为…

mac 下用 brew 安装mongodb

mac 下安装mongoDB一般俩种方法. (1)下载源码,解压,编译,配置,启动 比较艰难的一种模式. (2)brew install mongodb ,然后就可以悠闲的品一口茶,顺便瞄一眼网易新闻,这是一种傻瓜模式. 但傻瓜模式也有人为干预的时候,粗略说一下使用brew 安装mongodb 1 zhangzhimoke:~/code$…

比较python类的两个instance(对象) 是否相等

http://www.yihaomen.com/article/python/281.htm 比较python类的两个instance(对象) 是否相等 作者:轻舞肥羊 日期:2012-10-25 字体大小: 小 中 大对于同一个Class,可以创建不同的实例(instance), 如何比较这两个 instance 是否相等呢?我们知道,对于计算…

Mybaits插入记录返回主键值

某些情况进行insert时不知道主键值(主键为自增),例如系统新增用户时,有用户序号(主键 自增),用户名,密码。插入时只需插入用户名和密码,之后取得mysql自增的序号。 如下为…

CAS单点登录原理简单介绍

1. SSO简介 1.1 单点登录定义 单点登录(Single sign on),英文名称缩写SSO,SSO的意思就是在多系统的环境中,登录单方系统,就可以在不用再次登录的情况下访问相关受信任的系统。也就是说只要登录一次单体系统就可以。计划在项目中加…

前端跨域通信的几种方式

前言 前端通信类的问题,主要包括以下内容: 1、什么是同源策略及限制 同源策略是一个概念,就一句话。有什么限制,就三句话。能说出来即可。 2、前后端如何通信 如果你不准备,估计也就只能说出ajax。 3、如何创建Aja…

Luogu 3698 [CQOI2017]小Q的棋盘

BZOJ 4813 虽然数据范围很迷人,但是想树形$dp$没有前途。 先发现一个事情,就是我们可以先选择一条链,最后要走到这一条链上不回来,走到链上的点每一个只需要一步,而如果要走这条链之外的点,一个点需要走两步…

解决vue打包后静态资源路径错误的问题

vue项目完成的最后一步就是打包部署上线&#xff0c;但是打包部署的过程往往不是那么一帆风顺的&#xff0c;现将遇到问题和解决方案记录如下。 图片路径问题 起因&#xff1a; 页面中引入资源的方式往往有如下几种 * HTML标签中直接引入图片&#xff0c; 如 <img src&qu…

DOMBOM(source、methods、contents、Application)

何为DOM&#xff1f; Document Object Model Dom&#xff0c;是W3C组织推荐的处理可扩展标志语言的标准编程接口。在网页上&#xff0c;组织页面的对象被组织在一个树形结构中&#xff0c;用来表示文档中对象的标准模型就称为DOM。 可以认为DOM是页面上数据和结构的一个树形表示…

spring-注解---IOC(3)

spring--注解---IOC(3) package com.zwj.bean;public class Blue {public Blue(){System.out.println("blue...constructor");}public void init(){System.out.println("blue...init...");}public void detory(){System.out.println("blue...detory..…

在div中设置文字与内部div垂直居中

要实现如图一所示的结果&#xff1a; html代码如下&#xff1a; <!DOCTYPE html> <html><head lang"zh"><meta http-equiv"X-UA-Compatible" content"IEedge"><meta charset"utf-8" /><title>商…

王之泰201771010131《面向对象程序设计(java)》第九周学习总结

第一部分&#xff1a;理论知识学习部分 第7章异常、日志、断言和调试 概念&#xff1a;异常、异常类型、异常声明、异常抛出、 异常捕获1.异常处理技术2.断言的概念及使用3.基本的调试技巧 1&#xff09;异常的概念 a.Java的异常处理机制可以控制程序从错误产生的 位置转移到能…

Java学习——使用Static修饰符

程序功能&#xff1a;通过两个类 StaticDemo、LX4_1 说明静态变量/方法与实例变量/方法的区别。 package Pack1;public class Try {public static void main(String[] args) {// TODO Auto-generated method stubSystem.out.println("静态变量x"StaticDemo.getX());非…

JavaScript从入门到精通之入门篇(一)概念与语法

入门篇大纲 第一部分 概念与语法 1.JavaScript的历史 2.基本概念 3.JavaScript的使用、调试和异常处理 4.基本词法和变量 5.数据类型和类型转换 6.运算符 算数运算符 赋值运算符 一元运算符 使用一元运算符&#xff0c;将会把所有的内容转换为数值运算&#xff0c;不…

【小记】-005--纯CSS实现的小玩意儿

效果图奉上 代码奉上 <!DOCTYPE html> <html lang"zh"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><meta http-equiv"X-UA-Compatible&q…

JavaScript从入门到精通之入门篇(二)函数和数组

入门篇大纲 第二部分 函数与数组 1.函数 函数的定义 普通函数 function 函数名 &#xff08;表达式1…&#xff09; { 代码块 }js是解释性语言&#xff0c;在当前script标签代码执行的开始阶段&#xff0c;就会将普通函数放入堆中&#xff0c;也只是将引用放入堆中&#xf…