八、ECMAScript 2015

8.1arrow-body-style - require braces in arrow function body

箭头函数当函数体只有一句代码时可以省略大括号。这条规则强制代码中始终统一大括号的使用。除此之外，这条规则也会警告一些可能的编码错误，如下：

  1. /*eslint-env es6*/
  2. // Bad
  3. var foo = () => {};
  5. // Good
  6. var foo = () => ({});

如上BAD例子，开发者本意可能是希望返回一个空对象，但是JavaScript 解析引擎确认为大括号是一个代码块，该箭头函数返回undefined。

该规则接受一个可选配置，可以是always 或者as-needed.

  • "always" enforces braces around the function body
  • "as-needed" enforces no braces where they can be omitted (default)

举个栗子，下面代码将被视为错误：

  1. /*eslint arrow-body-style: [2, "always"]*/
  2. /*eslint-env es6*/
  3. let foo = () => 0;

而下面代码将不被认为错误：

  1. let foo = () => {
  2.     return 0;
  3. };
  4. let foo = (retv, name) => {
  5.     retv[name] = true;
  6.     return retv;
  7. };

当配置as-needed的时候，下面代码会报错：

  1. /*eslint arrow-body-style: [2, "as-needed"]*/
  2. /*eslint-env es6*/
  4. let foo = () => {
  5.     return 0;
  6. };
  8. let foo = () => {};

而下面代码不会报错：

  1. /*eslint arrow-body-style: [2, "as-needed"]*/
  2. /*eslint-env es6*/
  4. let foo = () => 0;
  5. let foo = (retv, name) => {
  6.     retv[name] = true;
  7.     return retv;
  8. };
  9. let foo = () => { bar(); };
  10. let foo = () => { /* do nothing */ };
  11. let foo = () => {
  12.     // do nothing.
  13. };

8.2arrow-parens - require parens in arrow function arguments

该规则规定了箭头函数参数是否需要圆括号包围，接受两个配置参数，always 和as-needed.

详见官网。

8.3arrow-spacing - require space before/after arrow function’s arrow (fixable)

该规则规定了箭头函数的箭头前后是否加空格。默认配置如下：

  1.  { "before": true, "after": true }

也就是说，默认配置要求箭头前后加空格。

举个栗子，下面的代码将会报错。

  1. /*eslint arrow-spacing: 2*/
  2. /*eslint-env es6*/
  4. ()=> {};     /*error Missing space before =>*/
  5. () =>{};     /*error Missing space after =>*/
  6. (a)=> {};    /*error Missing space before =>*/
  7. (a) =>{};    /*error Missing space after =>*/
  8. a =>a;       /*error Missing space after =>*/
  9. a=> a;       /*error Missing space before =>*/
  10. ()=> {'\n'}; /*error Missing space before =>*/
  11. () =>{'\n'}; /*error Missing space after =>*/

而下面代码将不会报错。

  1. /*eslint arrow-spacing: 2*/
  2. /*eslint-env es6*/
  4. () => {};
  5. (a) => {};
  6. a => a;
  7. () => {'\n'};

当配置为{ "before": false, "after": false }.时。下面代码不会报错。

  1. /*eslint arrow-spacing: [2, { "before": false, "after": false }]*/
  2. /*eslint-env es6*/
  4. ()=>{};
  5. (a)=>{};
  6. a=>a;
  7. ()=>{'\n'};

8.4constructor-super - verify calls of super() in constructors

该规则用来保证constructor函数中super()应该正确出现，比如在继承的classes中必须要super（）。而非继承的classes中不需要super（）。

8.5generator-star-spacing - enforce spacing around the * in generator functions (fixable)

该规则用来规定generator函数中星号前后的空白，接受四个配置：

  • {"before": true, "after": false} → "before"
  • {"before": false, "after": true} → "after"
  • {"before": true, "after": true} → "both"
  • {"before": false, "after": false} → "neither"

8.6no-arrow-condition - disallow arrow functions where a condition is expected

箭头函数的箭头很容易和比较操作符相混淆（>,<, <+ ,>=）这条规则规定了，在条件语句中禁止使用箭头函数。即使箭头函数参数被圆括号包围，但是该规则依然会警告。举个栗子，下面代码将会被警告：

  1. /*eslint no-arrow-condition: 2*/
  2. /*eslint-env es6*/
  4. if (a => 1) {}
  5. while (a => 1) {}
  6. for (var a = 1; a => 10; a++) {}
  7. a => 1 ? 2 : 3
  8. (a => 1) ? 2 : 3
  9. var x = a => 1 ? 2 : 3
  10. var x = (a) => 1 ? 2 : 3

8.7no-class-assign - disallow modifying variables of class declarations

该规则禁止重命名classes名。

8.8no-const-assign - disallow modifying variables that are declared using const

通过const关键字申明的变量不能够修改，修改后会导致runtime error .但是在一些非ES2015环境下，可能会忽略这点，因此这条规则就是为了加强这一特性而定。

8.9no-dupe-class-members - disallow duplicate name in class members

class中的成员不允许有相同的名字。举个栗子，下面将报错：

  1. /*eslint no-dupe-class-members: 2*/
  2. /*eslint-env es6*/
  4. class Foo {
  5.   bar() { }
  6.   bar() { }          /*error Duplicate name "bar".*/
  7. }
  9. class Foo {
  10.   bar() { }
  11.   get bar() { }      /*error Duplicate name "bar".*/
  12. }
  14. class Foo {
  15.   static bar() { }
  16.   static bar() { }   /*error Duplicate name "bar".*/
  17. }

8.10no-this-before-super - disallow use of this/super before calling super() in constructors.

在constructors中，不能够在super（）前面调用this/super.

8.11no-var - require let or const instead of var

使用const和let替代var。

8.12object-shorthand - require method and property shorthand syntax for object literals

在对象中，要求使用方法和属性的简写形式。

该方法并没有禁止在对象字面量中使用箭头函数，因此可以在对象字面量中使用箭头函数。举个栗子：

  1. /*eslint object-shorthand: 2*/
  2. /*eslint-env es6*/
  4. var foo = {
  5.     x: (y) => y
  6. };

该规则接受四个配置项：

  1. "always" expects that the shorthand will be used whenever possible.
  2. "methods" ensures the method shorthand is used (also applies to generators).
  3. "properties ensures the property shorthand is used (where the key and variable name match).
  4. "never" ensures that no property or method shorthand is used in any object literal.

8.13prefer-arrow-callback - suggest using arrow functions as callbacks

该规则要求在回调函数需是箭头函数，也就是说函数作为函数的参数传入时，传入的函数需要时箭头函数。

举个栗子：

  1. /*eslint prefer-arrow-callback: 2*/
  2. /*eslint-env es6*/
  4. foo(a => a);
  5. foo(function*() { yield; });
  7. // this is not a callback.
  8. var foo = function foo(a) { return a; };
  10. // using `this` without `.bind(this)`.
  11. foo( () => this.a; );
  13. // recursively.
  14. foo(function bar(n) { return n && n + bar(n - 1); });

箭头函数非常适合做回调函数：

  • 箭头函数中的this对象直接绑定到了其外面包围的函数的this对象。
  • 箭头函数往往比函数表达式更简洁。

8.14prefer-const - suggest using const declaration for variables that are never modified after declared

如果一个变量申明后就不再被修改，那么使用const来申明该变量。

下面的代码将被视为错误：

  1. /*eslint prefer-const: 2*/
  2. /*eslint-env es6*/
  4. let a = 3;               /*error `a` is never modified, use `const` instead.*/
  5. console.log(a);
  7. // `i` is re-defined (not modified) on each loop step.
  8. for (let i in [1,2,3]) {  /*error `i` is never modified, use `const` instead.*/
  9.     console.log(i);
  10. }
  12. // `a` is re-defined (not modified) on each loop step.
  13. for (let a of [1,2,3]) { /*error `a` is never modified, use `const` instead.*/
  14.     console.log(a);
  15. }

而下面的代码将被视为正确：

  1. /*eslint prefer-const: 2*/
  2. /*eslint-env es6*/
  4. let a; // there is no initialization.
  5. console.log(a);
  7. // `end` is never modified, but we cannot separate the declarations without modifying the scope.
  8. for (let i = 0, end = 10; i < end; ++i) {
  9.     console.log(a);
  10. }
  12. // suggest to use `no-var` rule.
  13. var b = 3;
  14. console.log(b);

8.15prefer-reflect - suggest using Reflect methods where applicable

该规则推荐使用Reflect上的方法替代以前老方法。

详见官网。

8.16prefer-spread - suggest using the spread operator instead of .apply().

推荐使用扩展符替代apply()方法。举个栗子

  1. var args = [1, 2, 3, 4];
  2. //以前这样写
  3. Math.max.apply(Math, args);
  4. //现在这样写
  5. Math.max(...args);

8.17prefer-template - suggest using template literals instead of strings concatenation

推荐使用模板代替以前的字符串拼接。举个栗子：

  1. var str = "Hello, " + name + "!";
  2. //现在这样写
  3. var str = `Hello, ${name}!`;

8.18require-yield - disallow generator functions that do not have yield

这条规则检测generates函数中有没有yield关键字，如果没有就会报错。

举个栗子，下面的代码将会报错：

  1. /*eslint require-yield: 2*/
  2. /*eslint-env es6*/
  4. function* foo() { /*error This generator function does not have `yield`.*/
  5.   return 10;
  6. }

而下面的代码将不会报错。

  1. /*eslint require-yield: 2*/
  2. /*eslint-env es6*/
  4. function* foo() {
  5.   yield 5;
  6.   return 10;
  7. }
  9. function foo() {
  10.   return 10;
  11. }
  13. // This rule does not warn on empty generator functions.
  14. function* foo() { }