ESLint 规则详解(二)

接上篇 ESLint 规则详解(一)
前端界大神 Nicholas C. Zakas 在 2013 年开发的 ESLint,极大地方便了大家对 Javascript 代码进行代码规范检查。这个工具包含了 200 多条 Javascript 编码规范且运行迅速,是几乎每个前端项目都必备的辅助工具。可是,这么多规则,每个规则的设计出发点是什么,我们该如何选择适合自己项目的规则,又成了新问题。前不久,我所在的项目开始对前端代码进行代码规范的要求,于是我们详细梳理了 eslint 中的 230 个规则。我摘录了其中一些比较重要或特别的规则列在这里,希望能对大家的工作有所帮助。
no-sparse-arrays
使用代码质量检查工具的一个重要目的就是为了提高代码的可读性,或者说是降低其他人阅读并理解代码的难度,这条规则就是这样。当你看到这样一段代码 var userList = ['Tiger', 'Kate', , 'Mike']; 你真的很难确定原来写这段代码的人是不是故意要在数组中留下一个 undefined 元素,毕竟这样写并没有语法上的错误。这条规则的目的就是禁止通过这种方式在数组中插入 undefined 元素,因为这种写法太有迷惑性了。
no-extra-bind
如果你对 javascript 中的 this 变量有所了解,你一定也知道 bind 方法的作用,它可以很方便的帮我们修改方法执行时的上下文环境,但事实上有些时候并不需要使用 bind。如果你在一些不需要使用 bind 的地方也用 bind 来保证方法执行时的上下文环境,这会让代码执行的效率变低。所以,启用这条规则,可以帮你避免不必要的性能损失。
no-useless-call
和上一条规则类似,call 和 apply 也是帮助我们修改上下文环境的好工具,但我们应该只在需要修改上下文的时候才去使用这两个方法,如果你的代码检查工具发现你修改后的上下文和函数或方法原始的上下文相同,它就会给出提示。
yoda
yoda 表达式其实是用写争议的。有人觉得 if ('red' == color) 这样的写法可以避免程序员不小心把 == 写成了 =,但如前篇所说,我们用过在代码中禁用 ==,一律换成 ===,同时在代码检查工具的帮助下,把 == 写成 = 的可能性其实不大。而同时这样的写法在阅读时也显得比较别扭,所以我个人觉得还是禁用 yoda 表达式比较好。
no-delete-var
delete 操作符只能删除对象上的属性,并不能删除当前上下文中的某个变量,虽然代码不会报错,但很可能实际运行的结果和开发人员设想的不同,所以,应该明确禁止删除变量的操作。
no-undef
禁用未声明的变量。javascript 异常灵活,以至于你可以在没有声明一个变量的时候直接给他赋值,比如 t = 'test message',但这样的写法却是非常危险的,因为这种写法虽然会自动生命变量 t,但他的作用域却和用 var 声明的变量作用域不同,t 变量的作用域在全局变量上,所以,不用 var 直接声明并给变量赋值,经常导致意料之外的程序 bug。
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
欢迎关注我的微信公众号:老虎的小窝

ESLint 规则详解(二)的更多相关文章
- ESLint 规则详解(一)
前端界大神 Nicholas C. Zakas 在 2013 年开发的 ESLint,极大地方便了大家对 Javascript 代码进行代码规范检查.这个工具包含了 200 多条 Javascript ...
- eslint规则详解
{ // 环境定义了预定义的全局变量. "env": { //环境定义了预定义的全局变量.更多在官网查看 "browser":true, "node& ...
- jQuery.validator 详解二
前言:上一篇详细的介绍了jQuery.validator( 版本v1.13.0 )的验证规则,这一篇重点讲述它的源码结构,及如何来对元素进行验证,错误消息提示的内部实现 一.插件结构(组织方式) 在讲 ...
- 53个Oracle语句优化规则详解(转)
Oracle sql 性能优化调整 1. 选用适合的ORACLE优化器 ORACLE的优化器共有3种:a. RULE (基于规则) b. COST (基于成本) c. CHOOSE ...
- Apache Rewrite 规则详解
在开篇之前: 我想说这篇文章其实是我刚刚接触Rewrite的时候学习的文档,应属转载,但是在这里我不想写明原地址,原因是文章中大多数给出的配置命令经实验都是错误的.需要原文的可以在谷歌上搜索一下&qu ...
- css样式继承规则详解
css样式继承规则详解 一.总结 一句话总结:继承而发生样式冲突时,最近祖先获胜(最近原则). 1.继承中哪些样式不会被继承? 多数边框类属性,比如象Padding(补白),Margin(边界),背景 ...
- Shiro 安全框架详解二(概念+权限案例实现)
Shiro 安全框架详解二 总结内容 一.登录认证 二.Shiro 授权 1. 概念 2. 授权流程图 三.基于 ini 的授权认证案例实现 1. 实现原理图 2. 实现代码 2.1 添加 maven ...
- Nginx 常用全局变量 及Rewrite规则详解
每次都很容易忘记Nginx的变量,下面列出来了一些常用 $remote_addr //获取客户端ip $binary_remote_addr //客户端ip(二进制) $remote_port //客 ...
- .NET DLL 保护措施详解(二)关于性能的测试
先说结果: 加了缓存的结果与C#原生代码差异不大了 我对三种方式进行了测试: 第一种,每次调用均动态编译 第二种,缓存编译好的对象 第三种,直接调用原生C#代码 .net dll保护系列 ------ ...
随机推荐
- [SQLServer大对象]——FileTable初体验 (转载)
阅读导航启用FILESTREAM设置更改FILESTRAM设置启用数据库非事务性访问级别FileTable 在我接触FileTable之前,存储文件都是存储文件的链接和扩展名到数据,其实并没有实际的把 ...
- 使用动态SQL创建数据库
/*其实我也搞不懂为什么要用SQL来创建,明明SQL Server有图形化创建数据库多省事啊!*/USE master; DECLARE @sqlstr nvarchar(max)/*定义一个变量* ...
- 对EJB2.1几种接口的认识
因为教学上的需要,重新梳理了下EJB几种接口的职能,讲的是EJB3,虽然按照课件也能做出一个运行良好的EJB程序来,但是要想比较好的理解EJB3的工作原理,只知道这些注解还是不够的,特别是涉及到的接口 ...
- sudo控制权限简单用法介绍
为了安全及管理的方便,可将需要用root权限的用户加入到sudo管理,用root的权限来管理系统.利用sudo控制用户对系统命令的使用权限. 普通用户可以查看,但不能删除: 但是在/tmp公共环境下可 ...
- python基础学习12----装饰器
装饰器可以在不修改目标函数代码的前提下, 在目标函数执行前后增加一些额外功能 例如有一个简单的函数 import time def func1(): print("这是一个简单的函数&quo ...
- python基础学习11----函数
一.函数的定义 def 函数名(参数列表): 函数体 return语句 return语句不写或后边不加任何对象即为return None 二.函数的参数 无参数 def func1(): print( ...
- fatal: cannot create directoryxxxx': Invalid argument
问题:fatal: cannot create directoryxxxx': Invalid argument 环境:git 拉取远程仓库的代码后 原因:同事是mac,这个文件夹命名规则在苹果上没有 ...
- SDN期末作业-通过SDN的应用实现负载均衡
负载均衡程序 1.程序链接:https://github.com/424baopu/software/tree/master/LoadBalance 2.场景 topo: 场景描述: 服务器host ...
- JavaScript中数组slice和splice的对比小结
前言 今天重温了一下Javascript,看到了数组的方法,其中有两个比较相似的方法——splice和splice,看着很像,就是多了一个p,但是用法却相当不一样. 在使用中,可以通过选择一个具有强语 ...
- PHP生成excel表格文件并下载
本文引自网络,仅供自己学习之用. 利用php导出excel我们大多会直接生成.xls文件,这种方便快捷. function createtable($list,$filename){ header(& ...