ESLint 规则详解（一）

前端界大神 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

 

欢迎关注个人微信公众号：老虎的小窝