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

  1. no-debugger

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

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

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

  2. no-extra-boolean-cast

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

    var boolResult = !!parameter;

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

  3. no-inner-declarations

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

  4. use-isnan

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

  5. eqeqeq

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

  6. no-caller

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

  7. no-extend-native

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

  8. no-restricted-properties

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

  9. no-sequences

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

    var a = 1, b = 1;

    a = b += 3, a + b;

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

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

  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 语句

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

在下一篇文章中,我会再选取 10 条规则进行分析,并整理出一个包含中文翻译的 ESLint 规则列表,敬请期待。

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

欢迎关注我的微信公众号:老虎的小窝

ESLint 规则详解(一)的更多相关文章

  1. ESLint 规则详解(二)

    接上篇 ESLint 规则详解(一) 前端界大神 Nicholas C. Zakas 在 2013 年开发的 ESLint,极大地方便了大家对 Javascript 代码进行代码规范检查.这个工具包含 ...

  2. eslint规则详解

    { // 环境定义了预定义的全局变量. "env": { //环境定义了预定义的全局变量.更多在官网查看 "browser":true, "node& ...

  3. Nginx 常用全局变量 及Rewrite规则详解

    每次都很容易忘记Nginx的变量,下面列出来了一些常用 $remote_addr //获取客户端ip $binary_remote_addr //客户端ip(二进制) $remote_port //客 ...

  4. 53个Oracle语句优化规则详解(转)

    Oracle sql 性能优化调整  1. 选用适合的ORACLE优化器        ORACLE的优化器共有3种:a. RULE (基于规则)   b. COST (基于成本) c. CHOOSE ...

  5. QuantLib 金融计算——基本组件之天数计算规则详解

    目录 天数计算规则详解 定义 30 / 360 法 30/360 US 30/360 Bond Basis 30E/360 30E/360 ISDA Actual 法 Actual/Actual IC ...

  6. Apache Rewrite 规则详解

    在开篇之前: 我想说这篇文章其实是我刚刚接触Rewrite的时候学习的文档,应属转载,但是在这里我不想写明原地址,原因是文章中大多数给出的配置命令经实验都是错误的.需要原文的可以在谷歌上搜索一下&qu ...

  7. css样式继承规则详解

    css样式继承规则详解 一.总结 一句话总结:继承而发生样式冲突时,最近祖先获胜(最近原则). 1.继承中哪些样式不会被继承? 多数边框类属性,比如象Padding(补白),Margin(边界),背景 ...

  8. Nginx之location 匹配规则详解

    有些童鞋的误区 1. location 的匹配顺序是“先匹配正则,再匹配普通”. 矫正: location 的匹配顺序其实是“先匹配普通,再匹配正则”.我这么说,大家一定会反驳我,因为按“先匹配普通, ...

  9. jQuery.validator 验证规则详解

    前言:jQuery.validator是一款非常不错的表单验证插件,验证方式非常简单方便,它还对HTML5做了兼容处理,了解了验证规则,就基本掌握了它的使用,下面就让我一一道来 jQuery.vali ...

随机推荐

  1. jQuery-ui datepicker的使用演示代码

    这两天使用jquery做一个web端展示的工具,遇到了不少问题也学到了不少知识.其中有一个就是在页面中显示日期选择器的功能,通过百度直接使用的是jquery datepicker 看到一篇使用说明很不 ...

  2. Delphi 常用函数(数学函数)round、trunc、ceil和floor

    源:Delphi 常用函数(数学函数)round.trunc.ceil和floor Delphi 常用函数(数学) Delphi中怎么将实数取整? floor 和 ceil 是 math unit 里 ...

  3. STM32 定时器用于外部脉冲计数(转)

    源:STM32 定时器用于外部脉冲计数 STM32 定时器(一)——定时器时间的计算 STM32的定时器是灰常NB的,也是灰常让人头晕的(当然是对于白菜来说的). STM32中的定时器有很多用法: ( ...

  4. 【noip】华容道

    描述 小 B 最近迷上了华容道,可是他总是要花很长的时间才能完成一次.于是,他想到用编程来完成华容道:给定一种局面,华容道是否根本就无法完成,如果能完成,最少需要多少时间. 小 B 玩的华容道与经典的 ...

  5. jade的特点

    jade特点 1超强的可读性 2灵活易用的缩进 3块扩展 4代码默认进过编码处理,以增强安全性 5编译及运行时的上下文错误报告 6命令行编译支持 7html5模式(使用 !!!5文档类型) 8可选的内 ...

  6. 如何检测 Android Cursor 泄漏

    简介: 本文介绍如何在 Android 检测 Cursor 泄漏的原理以及使用方法,还指出几种常见的出错示例.有一些泄漏在代码中难以察觉,但程序长时间运行后必然会出现异常.同时该方法同样适合于其他需要 ...

  7. java制作图片水印

    1.创建缓存图片对象 2.创建Java绘图工具对象 3.将原图绘制到缓存图片对象 4.使用工具将水印绘制到缓存图片对象 5.创建图片编码工具类 6.输出缓存图片对象到目标图片文件 BufferedIm ...

  8. ios framework 开发 之 实战二 ,成功

    1. 新建工程.引入cocoapod略过不提 2. 更改cocoapod类名 这是因为,引用framework的工程中,也有一个同样的文件,及文件里同样的类. 这个文件不能删除,但是可以重命名. 3. ...

  9. grunt live reload 配置记录

    1.npm install --save-dev grunt-contrib-watch  安装 watch 2.安装chrome livereload 插件 3.配置Gruntfile.js wat ...

  10. 一个参数引起的mysql从库宕机血案

    原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责任.http://suifu.blog.51cto.com/9167728/1859252 一个参数 ...