蓁祎家进步中

# eslint

返回大前端

# 1、The no-nested-ternary rule disallows nested ternary expressions

不要有嵌套三元表达式(?😃

  • Examples of incorrect code for this rule:
/*eslint no-nested-ternary: "error"*/
var thing = foo ? bar : baz === qux ? quxx : foobar;
foo ? (baz === qux ? quxx() : foobar()) : bar();
1
2
3
  • Examples of correct code for this rule:
var thing = foo ? bar : foobar;

var thing;

if (foo) {
  thing = bar;
} else if (baz === qux) {
  thing = quxx;
} else {
  thing = foobar;
}
1
2
3
4
5
6
7
8
9
10
11

# 2、disallow the unary operators ++ and -- (no-plusplus)

  • 不要用++``--
  • Because the unary ++ and -- operators are subject to automatic semicolon insertion, differences in whitespace can change semantics of source code.
  • 由于一元++和--运算符会自动插入分号，因此空格之间的差异可能会更改源代码的语义。
var i = 10;
var j = 20;

i++;
j;
// i = 11, j = 20

var i = 10;
var j = 20;

i;
++j;
// i = 10, j = 21
1
2
3
4
5
6
7
8
9
10
11
12
13
  • Examples of incorrect code for this rule:
/*eslint no-plusplus: "error"*/

var foo = 0;
foo++;

var bar = 42;
bar--;

for (i = 0; i < l; i++) {
  return;
}
1
2
3
4
5
6
7
8
9
10
11
  • Examples of correct code for this rule:
var foo = 0;
foo += 1;

var bar = 42;
bar -= 1;

for (i = 0; i < l; i += 1) {
  return;
}
1
2
3
4
5
6
7
8
9

This rule has an object option.

"allowForLoopAfterthoughts": true allows unary operators ++ and -- in the afterthought (final expression) of a for loop. allowForLoopAfterthoughts

Examples of correct code for this rule with the { "allowForLoopAfterthoughts": true } option:

/*eslint no-plusplus: ["error", { "allowForLoopAfterthoughts": true }]*/

for (i = 0; i < l; i++) {
  return;
}

for (i = 0; i < l; i--) {
  return;
}
1
2
3
4
5
6
7
8
9
  • 3、disallow ternary operators when simpler alternatives exist (no-unneeded-ternary)
// Bad
var isYes = answer === 1 ? true : false;
// Good
var isYes = answer === 1;

// Bad
var isNo = answer === 1 ? false : true;
// Good
var isNo = answer !== 1;
1
2
3
4
5
6
7
8
9
// Bad
foo(bar ? bar : 1);

// Good
foo(bar || 1);
1
2
3
4
5

# 3、Disallow arrow functions where they could be confused with comparisons (no-confusing-arrow)

Here's an example where the usage of => could be confusing:

// The intent is not clear
var x = (a) => (1 ? 2 : 3);
// Did the author mean this
var x = function(a) {
  return 1 ? 2 : 3;
};
// Or this
var x = a <= 1 ? 2 : 3;
1
2
3
4
5
6
7
8
  • Examples of incorrect code for this rule:
/*eslint no-confusing-arrow: "error"*/
/*eslint-env es6*/

var x = (a) => (1 ? 2 : 3);
var x = (a) => (1 ? 2 : 3);
1
2
3
4
5
  • Examples of correct code for this rule:
/*eslint no-confusing-arrow: "error"*/
/*eslint-env es6*/

var x = (a) => (1 ? 2 : 3);
var x = (a) => (1 ? 2 : 3);
var x = (a) => {
  return 1 ? 2 : 3;
};
var x = (a) => {
  return 1 ? 2 : 3;
};
1
2
3
4
5
6
7
8
9
10
11

# 4、iterators/generators require regenerator-runtime, which is too heavyweight for this guide to allow them. Separately, loops should be avoided in favor of array iterations

迭代器/生成器需要 regenerator-runtime，这对于本指南来说太重了，以至于不允许它们运行。另外，应避免循环，以利于数组迭代

# 5、Unexpected console statement

disallow the use of console (no-console)
in JavaScript that is designed to be executed in the browser, it's considered a best practice to avoid using methods on console. Such messages are considered to be for debugging purposes and therefore not suitable to ship to the client. In general, calls using console should be stripped before being pushed to production.
在旨在在浏览器中执行的 JavaScript 中，最好避免在控制台上使用方法。此类消息被认为是用于调试目的，因此不适合发送给客户端。通常，使用控制台的呼叫应先进行剥离，然后再进行生产。

# 6、Do not use Array index in keys