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…

对局匹配

问题描述小明喜欢在一个围棋网站上找别人在线对弈。这个网站上所有注册用户都有一个积分,代表他的围棋水平。小明发现网站的自动对局系统在匹配对手时,只会将积分差恰好是K的两名用户匹配在一起。如果两人分差小于或大于K,系统都不会将他们匹…

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

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

Springboot项目修改html后不需要重启---springboot项目的热部署

一、spring-boot-devtools 在pom中直接引入依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-devtools</artifactId><optional>true</optional> </dependency> 设置以下两项&#xff08…

Hibernate中session的get方法和load方法的区别

一.发送SQL时机&#xff1a; load方法采用延迟加载&#xff08;lazy懒加载&#xff09;&#xff0c;执行到这行代码的时候&#xff0c;不会发送SQL语句&#xff0c;当真正使用这个对象的数据&#xff08;对象的数据不包括主键&#xff09;的时候才发送SQL语句&#xff1b; get…

Node.js Web 开发框架大全《中间件篇》

这篇文章与大家分享优秀的 Node.js 中间件模块。Node 是一个服务器端 JavaScript 解释器&#xff0c;它将改变服务器应该如何工作的概念。它的目标是帮助程序员构建高度可伸缩的应用程序&#xff0c;编写能够处理数万条同时连接到一个&#xff08;只有一个&#xff09;物理机的…

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

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

团队项目第一篇——NABCD

团队名称&#xff1a;筑梦之舟 团队项目名称&#xff1a;跑跑 N&#xff08;Need&#xff09;需求&#xff1a; 有许多人在跑步时想了解自己的移动轨迹和跑步距离很不便利&#xff0c;无法了解跑步的日程&#xff0c;我们的软件就是为了更加方便热爱跑步的人能够参加到跑步之中…

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

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

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

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

在centos和redhat上安装docker

前置条件 64-bit 系统kernel 3.101.检查内核版本&#xff0c;返回的值大于3.10即可。$ uname -r 2.使用 sudo 或 root 权限的用户登入终端。 3.卸载旧版本(如果安装过旧版本的话) $ yum remove docker \docker-common \docker-selinux \docker-engine 4.安装需要的软件包 #yum-…

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 是否相等呢&#xff1f;我们知道&#xff0c;对于计算…

Mybaits插入记录返回主键值

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

Mac 解决brew一直卡在Updating Homebrew

运行命令brew install node&#xff0c;结果界面一直卡在Updating Homebrew...上&#xff0c;有两种解决办法 方法一&#xff1a;直接关闭brew每次执行命令时的自动更新&#xff08;推荐&#xff09; vim ~/.bash_profile# 新增一行 export HOMEBREW_NO_AUTO_UPDATEtrue方法二…

CAS单点登录原理简单介绍

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

前端跨域通信的几种方式

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

T4((Text Template Transformation Toolkit))模版引擎之基础入门 C#中文本模板(.tt)的应用...

1 关于C#中文本模板(.tt)的简单应用https://blog.csdn.net/zunguitiancheng/article/details/78011145 任何一个傻瓜都能写出计算机能理解的程序&#xff0c;而优秀的程序员却能写出别人能读得懂的程序。—— Martin Fowler 2 T4模版引擎之生成数据库实体类 http://www.cnblogs…

LeetCode412Fizz Buzz

写一个程序&#xff0c;输出从 1 到 n 数字的字符串表示。 1. 如果 n 是3的倍数&#xff0c;输出“Fizz”&#xff1b; 2. 如果 n 是5的倍数&#xff0c;输出“Buzz”&#xff1b; 3.如果 n 同时是3和5的倍数&#xff0c;输出 “FizzBuzz”。 示例&#xff1a; n 15, 返回: [ …

vue+node实现中间层同步调用接口

为了应对业务的复杂性&#xff0c;提高前端的渲染能力&#xff0c;故在项目中引入nodejs做中间层&#xff0c;前端承接vue&#xff0c;后端对接Java。 至于为什么这么搞&#xff0c;网上有好多文章都在讨论&#xff0c;可以说仁者见仁智者见智&#xff0c;这里我们不在深究。 …