Eslint规范

  1. for 循环禁止使用无限循环（这个非默认推荐）

    1. // bad
    2. for (var i = 0; i < 10; i--) {
    3. }
    4. for (var i = 10; i >= 0; i++) {
    5. }
    7. // good
    8. for (var i = 0; i < 10; i++) {
    9. }

  2. 不允许和负0比较

    1. // bad
    2. if (x === -0) {
    3.     // doSomething()...
    4. }
    6. // good
    7. if (x === 0) {
    8.     // doSomething()...
    9. }
    10. if (Object.is(x, -0)) {
    11.     // doSomething()...
    12. }

  3. 禁止在条件语句(if,while,do...while )中出现赋值操作

    1. // bad
    2. if (user.jobTitle = "manager") {
    3.     // user.jobTitle is now incorrect
    4. }
    6. // good
    7. if (user.jobTitle == "manager") {
    8.     // doSomething()...
    9. }

    注意：该规则有个字符串选项，默认是“except-parens”，允许出现赋值操作，但必须是被圆括号括起来的；设置为“always”表示禁止在条件语句中出现赋值语句

    1. // bad 设置为except-parens
    2.  var x;
    3.  if (x = 0) {
    4.      var b = 1;
    5.  }
    7.  function setHeight(someNode) {
    8.      "use strict";
    9.      do {
    10.          someNode.height = "100px";
    11.      } while (someNode = someNode.parentNode);
    12.  }
    14. // good 设置为except-parens
    15.  var x;
    16.  if (x === 0) {
    17.      var b = 1;
    18.  }
    20.  function setHeight(someNode) {
    21.      "use strict";
    22.      do {
    23.          someNode.height = "100px";
    24.      } while ((someNode = someNode.parentNode));
    25.  }

  4. 禁止在代码中使用console（在产品发布之前，剔除console的调用）

    1. // bad
    2. console.log("Log a debug level message.");
    3. console.warn("Log a warn level message.");
    4. console.error("Log an error level message.")
    6. // good
    7. //自定义的Console
    8. Console.log("Log a debug level message.");

    注意：可以设置allow参数允许console 对象方法

  1. 禁止在条件语句（for,if,while,do...while）和三元表达式（?:）中使用常量表达式

    1. // bad
    2.  if (false) {
    3.      doSomething();
    4.  }
    6.  if (2) {
    7.      doSomething();
    8.  }
    10.  for (;-2;) {
    11.      doSomething();
    12.  }
    14.  while (typeof x) {
    15.      doSomething();
    16.  }
    18.  do{
    19.      doSomething();
    20.  } while (x = -1);
    22.  var result = 0 ? a : b;
    24. // good
    25.  if (x === 0) {
    26.      doSomething();
    27.  }
    29.  for (;;) {
    30.      doSomething();
    31.  }
    33.  while (typeof x === "undefined") {
    34.      doSomething();
    35.  }
    37.  do{
    38.      doSomething();
    39.  } while (x);
    41.  var result = x !== 0 ? a : b;

    注意：可以通过设置checkLoops参数来表示是否允许使用常量表达式

  2. 禁用debugger，采用断点的方式进行调试

    1. // bad
    2. function isTruthy(x) {
    3.     debugger;
    4.     return Boolean(x);
    5. }
    7. // good
    8. function isTruthy(x) {
    9.     return Boolean(x); // set a breakpoint at this line
    10. }

  3. 不允许在函数（function）定义里面出现重复的参数(箭头函数和类方法设置重复参数会报错，但跟该规则无关)

    1. // bad
    2. function foo(a, b, a) {
    3.     console.log("value of the second a:", a);
    4. }
    5. var bar = function (a, b, a) {
    6.     console.log("value of the second a:", a);
    7. };
    9. // good
    10. function foo(a, b, c) {
    11.     console.log(a, b, c);
    12. }
    13. var bar = function (a, b, c) {
    14.     console.log(a, b, c);
    15. };
    17. // 箭头函数报错
    18. function foo(x, x, y = 1) {
    19.     //doSomething();
    20. }
    21. // SyntaxError: Duplicate parameter name not allowed in this context

  4. 不允许对象字面量出现重复的key

    1. // bad
    2. var foo = {
    3.     bar: "baz",
    4.     bar: "qux"
    5. };
    7. var foo = {
    8.     "bar": "baz",
    9.     bar: "qux"
    10. };
    12. var foo = {
    13.     0x1: "baz",
    14.     1: "qux"
    15. };
    17. // good
    18. var foo = {
    19.     bar: "baz",
    20.     foo: "foo"
    21. };

  5. 不允许使用重复的case值

    1. // bad
    2. var a = 1;
    3. var b = 1;
    5. switch (a) {
    6.     case 1:
    7.         break;
    8.     case 2:
    9.         break;
    10.     case 1:         // duplicate test expression
    11.         break;
    12.     default:
    13.         break;
    14. }
    16. switch (a) {
    17.     case b:
    18.         break;
    19.     case 2:
    20.         break;
    21.     case b:         // duplicate test expression
    22.         break;
    23.     default:
    24.         break;
    25. }
    27. switch (a) {
    28.     case '1':
    29.         break;
    30.     case 2:
    31.         break;
    32.     case '1':         // duplicate test expression
    33.         break;
    34.     default:
    35.         break;
    36. }
    38. //good
    40. var a = 1;
    42. switch (a) {
    43.     case 1:
    44.         break;
    45.     case 2:
    46.         break;
    47.     case 3:         // duplicate test expression
    48.         break;
    49.     default:
    50.         break;
    51. }

  6. 不允许出现空块语句

    1. // bad
    2. if (foo) {
    3. }
    5. try {
    6.     doSomething();
    7. } catch(ex) {
    9. } finally {
    11. }
    13. //good
    15. if (foo) {
    16.     // empty
    17. }
    19. try {
    20.     doSomething();
    21. } catch (ex) {
    22.     // continue regardless of error
    23. }

    注意：可以通过allowEmptyCatch为true允许出现空的catch子句

  7. 不允许在正则表达式中出现空字符集

    1. // bad
    2. /^abc[]/.test("abcdefg"); // false
    3. "abcdefg".match(/^abc[]/); // null
    5. // good
    6. /^abc/.test("abcdefg"); // true
    7. "abcdefg".match(/^abc/); // ["abc"]
    9. /^abc[a-z]/.test("abcdefg"); // true
    10. "abcdefg".match(/^abc[a-z]/); // ["abcd"]

  8. 不允许对catch子句的参数进行重新赋值

    1. // bad
    2. try {
    3.     // code
    4. } catch (e) {
    5.     e = 10;
    6. }
    8. // good
    9. try {
    10.     // code
    11. } catch (e) {
    12.     var foo = 10;
    13. }

  9. 禁止不必要的布尔类型转换

    1. // bad
    2. var bar = 'zhinanzhen';
    3. var foo = !!!bar;//与!bar值相同，都为false
    4. var foo = !!bar ? baz : bat;
    5. var foo = Boolean(!!bar);
    6. if (Boolean(foo)) {
    7.     // ...
    8. }
    10. // good
    11. var foo = !!bar;//转布尔值
    12. var foo = Boolean(bar);
    14. function foo() {
    15.     return !!bar;
    16. }
    18. var foo = bar ? !!baz : !!bat;

  10. 禁止不必要的分号和括号

    1. // bad
    2. var x = 5;;
    4. function foo() {
    5.     // code
    6. };
    8. a = (b * c);
    10. // good
    11. var x = 5;
    13. var foo = function() {
    14.     // code
    15. }
    17. a = b * c;

  11. 不允许对function重新赋值

    1. // bad
    2. var bar = 5;;
    4. function foo() {}
    5. foo = bar;
    7. function foo() {
    8.     foo = bar;
    9. }
    11. // good
    12. var foo = function () {}
    13. foo = bar;
    15. function foo(foo) { // `foo` is shadowed.
    16.     foo = bar;
    17. }
    19. function foo() {
    20.     var foo = bar;  // `foo` is shadowed.
    21. }

  12. 不允许在嵌套的语句块中用var声明变量和function

    1. // bad
    2. if (test) {
    3.     function doSomethingElse () {
    4.     //code
    5.     }
    6. }
    8. // good
    9. function doSomething() {
    10.     const a = 1;
    11. }

    注意：

    1. "functions" (默认) 禁止 function 声明出现在嵌套的语句块中
    2. "both" 禁止 function 和 var 声明出现在嵌套的语句块中

  13. 不允许在正则表达式中使用控制字符，即不可显示的字符（在ASCII码中，第0～31号及第127号是控制字符或通讯专用字符）

// bad var pattern1 = /\x1f/; var pattern2 = new RegExp("\x1f");

// good var pattern1 = /\x20/; var pattern2 = new RegExp("\x20");

  1. ```

  1. 不允许RegExp构造函数中出现无效的正则表达式

    1. // bad
    2. RegExp('[');//无效，报错，RegExp('[]')有效
    4. // good
    6. RegExp('.');//'.'元字符查找单个字符

  2. 不允许正则表达式字面量中出现多个空格

    1. // bad
    3. var re = /foo   bar/;
    5. // good
    7. var re = /foo {3}bar/;

  3. 定义函数时，空格的使用（参考airbnb规范的30-34条）

    1. // bad
    3. function thing() /*<NBSP>*/{//使用了多个空格
    4.     return 'test';
    5. }
    6. function thing( /*<NBSP>*/){
    7.     return 'test';
    8. }
    10. // good
    12. function thing() {
    13.     return 'test';
    14. }
    15. function thing(/*<NBSP>*/) {
    16.     return 'test';
    17. }

    注意：

    1. "skipStrings": true (默认) 允许在字符串字面量中出现任何空白字符
    2. "skipComments": true 允许在注释中出现任何空白字符
    3. "skipRegExps": true 允许在正则表达式中出现任何空白字符
    4. "skipTemplates": true 允许在模板字面量中出现任何空白字符

  4. 不允许将全局对象(这里主要指非函数型和非构造器对象的全局对象，例如：NaN，Infinity，undefined，Math，JSON，Reflect)作为函数进行调用

    1. // bad
    3. var math = Math();
    4. var json = JSON();
    5. var reflect = Reflect();
    7. // good
    9. function area(r) {
    10.     return Math.PI * r * r;
    11. }
    12. var object = JSON.parse("{}");
    13. var value = Reflect.get({ x: 1, y: 2 }, "x");

  5. 不允许使用稀疏数组

    1. // bad
    3. var items = [,];
    4. var colors = [ "red",, "blue" ];
    6. // good
    8. var items = [];
    9. var items = new Array(23);
    10. var colors = [ "red", "blue", ];

  6. 不允许使用多行表达式(使用分号结尾，避免无关的两条语句被解析成一条语句)

    1. // bad
    3. var hello = 'world'
    4. [1, 2, 3].forEach(addNumber);
    6. // good
    8. ar hello = 'world';
    9. [1, 2, 3].forEach(addNumber);

  7. 不允许在return，throw，continue，break后出现执行不到的代码

    1. // bad
    3. function foo() {
    4.     return true;
    5.     console.log("done");
    6. }
    8. // good
    10. function bar() {
    11.     let x = 1;
    12.     return x;
    13. }

  8. 不允许直接在finally语句中出现控制流语句（return,throw,break,continue）

    1. // bad
    3. let foo = function() {
    4.     try {
    5.         return 1;
    6.     } catch(err) {
    7.         return 2;
    8.     } finally {
    9.         return 3;
    10.     }
    11. };
    13. // good
    15. let foo = function() {
    16.     try {
    17.         return 1;
    18.     } catch(err) {
    19.         return 2;
    20.     } finally {
    21.         console.log("hola!");
    22.     }
    23. };
    25. //间接使用
    27. let foo = function() {
    28.     try {
    29.         return 1;
    30.     } catch(err) {
    31.         return 2;
    32.     } finally {
    33.         let a = function() {
    34.             return "hola!";
    35.         }
    36.     }
    37. };

  9. 否定操作的使用

    1. // bad
    3. if (!key in object) {
    4.     // doSomthing()
    5. }
    7. // good
    9. if (!(key in object)) {
    10.     // doSomthing()
    11. }

  10. 检查非数值（NaN）必须使用isNaN()

    1. // bad
    3. if (foo == NaN) {
    4.     // doSomthing()
    5. }
    7. // good
    9. if (isNaN(foo)) {
    10.     // doSomthing()
    11. }

  11. typeof 表达式必须与有效的字符串进行比较

    1. // bad
    3. typeof foo === "strnig"
    4. typeof foo == "undefimed"
    6. // good
    8. typeof foo === "string"
    9. typeof bar == "undefined"

  12. 不允许在case和default语句中出现词法声明（let,const,function,class），如果需要使用，必须使用花括号

    1. // bad
    3. switch (foo) {
    4.     case 1:
    5.         let x = 1;
    6.         break;
    7.     case 2:
    8.         const y = 2;
    9.         break;
    10.     case 3:
    11.         function f() {}
    12.         break;
    13.     default:
    14.         class C {}
    15. }
    17. // good
    19. switch (foo) {
    20.     // The following case clauses are wrapped into blocks using brackets
    21.     case 1: {
    22.         let x = 1;
    23.         break;
    24.     }
    25.     case 2: {
    26.         const y = 2;
    27.         break;
    28.     }
    29.     case 3: {
    30.         function f() {}
    31.         break;
    32.     }
    33.     case 4:
    34.         // Declarations using var without brackets are valid due to function-scope hoisting
    35.         var z = 4;
    36.         break;
    37.     default: {
    38.         class C {}
    39.     }
    40. }

  13. 不允许case语句落空，可以用throw、return、break或者注释作为结束

    1. // bad
    3. switch(foo) {
    4.     case 1:
    5.         doSomething();
    7.     case 2:
    8.         doSomethingElse();
    9. }
    11. // good
    13. switch(foo) {
    14.     case 1:
    15.         doSomething();
    16.         break;
    18.     case 2:
    19.         doSomething();
    20. }
    22. switch(foo) {
    23.     //如果有意落空case语句，需设置commentPattern参数，并且加上注释
    24.     case 1:
    25.         doSomething();
    26.         // break omitted
    28.     case 2:
    29.         doSomethingElse();
    30. }

  14. 不允许使用空的解构模式

    1. // bad
    3. var {} = foo;
    4. var [] = foo;
    5. var {a: {}} = foo;
    6. var {a: []} = foo;
    7. function foo({}) {}
    8. function foo([]) {}
    9. function foo({a: {}}) {}
    10. function foo({a: []}) {}
    12. // good
    14. var {a = {}} = foo;
    15. var {a = []} = foo;
    16. function foo({a = {}}) {}
    17. function foo({a = []}) {}

  15. 不允许修改只读的全局变量

    1. // bad
    3. Object = null;
    4. undefined = 1;
    5. window = {};

  16. 不允许使用8进制字面量（即用0开头的数字）

    1. // bad
    3. var num = 071;
    4. var result = 5 + 07;
    6. // good
    8. var num  = "071";

  1. 不允许多次声明同一个变量

    1. // bad
    3. var a = 3;
    4. var a = 10;
    6. // good
    8. var a = 3;
    9. a = 10;

    注意： “builtinGlobals”如果设置为 true，该规则也会检查全局内置对象，比如Object、Array、Number…

  2. 不允许自己给自己赋值

    1. // bad
    3. foo = foo;
    5. [a, b] = [a, b];
    7. [a, ...b] = [x, ...b];
    9. ({a, b} = {a, x});
    11. // good
    13. foo = bar;
    14. [a, b] = [b, a];
    16. let foo = foo;

  3. 不允许使用没有使用过的标签

    1. // bad
    3. A:
    4. for (let i = 0; i < 10; ++i) {
    5.     foo();
    6. }
    8. // good
    10. B:
    11. for (let i = 0; i < 10; ++i) {
    12.     if (foo()) {
    13.         break B;
    14.     }
    15.     bar();
    16. }

  4. 不允许使用没有必要的转义

    1. // bad
    3. "\'";
    4. '\"';
    5. "\#";
    6. "\e";
    7. `\"`;
    8. `\"${foo}\"`;
    9. `\#{foo}`;
    10. /\!/;
    11. /\@/;
    13. // good
    15. "\"";
    16. '\'';
    17. "\x12";
    18. "\u00a9";
    19. "\371";
    20. "xs\u2111";
    21. `\``;
    22. `\${${foo}\}`;
    23. `$\{${foo}\}`;
    24. /\\/g;
    25. /\t/g;
    26. /\w\$\*\^\./;

  5. 不允许删除变量（严格模式下会报错）

    1. // bad
    3. var x;
    4. delete x;

  6. 不允许使用未声明的变量

    1. // bad
    3. b = 10;
    5. //good
    7. let b = 10;

  7. 定义过的变量都必须被使用


    2. //good
    4. let b = 10;
    5. alert(b);

  8. 不允许使用空格和tab混合缩进（airbnb推荐使用两个空格作为缩进）

  9. 派生类中的构造函数必须调用 super()。非派生类的构造函数不能调用 super()

    1. //bad
    3. class A {
    4.     constructor() {
    5.         super();  // This is a SyntaxError.
    6.     }
    7. }
    9. class A extends B {
    10.     constructor() { }  // Would throw a ReferenceError.
    11. }
    13. //good
    15. class A {
    16.     constructor() { }
    17. }
    19. class A extends B {
    20.     constructor() {
    21.         super();
    22.     }
    23. }

  10. 在派生类构造函数中，不允许在调用super()之前使用this和super

    1. // bad
    3. class A extends B {
    4.     constructor() {
    5.         this.a = 0;
    6.         super();
    7.     }
    8. }
    10. class A extends B {
    11.     constructor() {
    12.         super.foo();
    13.         super();
    14.     }
    15. }
    17. //good
    19. class A {
    20.     constructor() {
    21.         this.a = 0; // OK, this class doesn't have an `extends` clause.
    22.     }
    23. }
    25. class A extends B {
    26.     constructor() {
    27.         super();
    28.         this.a = 0; // OK, this is after `super()`.
    29.     }
    30. }

  11. 不允许修改类声明的变量

    1. // bad
    3. class A { }
    4. A = 0;
    6. class A {
    7.     b() {
    8.         A = 0;
    9.     }
    10. }
    12. //good
    14. let A = class A { }
    15. A = 0; // A is a variable.
    17. let A = class {
    18.     b() {
    19.         A = 0; // A is a variable.
    20.     }
    21. }

  12. 禁止修改const声明的变量

    1. // bad
    3. const a = 0;
    4. a = 1;
    6. //good
    8. const a = 0;
    9. alert(a);

  13. Symbol函数前不能使用new命令

    1. // bad
    3. var foo = new Symbol("foo");
    5. //good
    7. var foo = Symbol("foo");
    9. function bar(Symbol) {
    10.     const baz = new Symbol("baz");
    11. }

  14. 不允许使用没有yield的generator 函数

    1. // bad
    3. function* foo() {
    4.   return 10;
    5. }
    7. //good
    9. function* foo() {
    10.   yield 5;
    11.   return 10;
    12. }

Airbnb规范

  1. 使用const声明只读的常量，使用let声明可变的变量

    1. // bad
    3. var a = 1;
    4. var b = 4;
    5. if(b > a){
    6.     a += 1;
    7. }
    9. //good
    11. let a = 1;
    12. const b = 2;
    13. if(b > a){
    14.     a += 1;
    15. }

  2. 使用字面量创建对象和数组

    1. // bad
    3. const item = new Object();
    4. const items = new Array();
    6. //good
    8. const item = {};
    9. const items = [];

  3. 不允许使用关键字作为变量和键值

    1. // bad
    3. const default = 0;
    4. const superman = {
    5.   default: { clark: 'kent' },
    6.   private: true
    7. };
    9. //good
    11. const defaults = 0;
    12. const superman = {
    13.   defaults: { clark: 'kent' },
    14.   hidden: true,
    15. };

  4. 向数组添加元素时，使用push函数，不允许使用直接赋值的方式

    1. // bad
    3. let items = [];
    4. items[items.length] = 'zhinanzhen';
    6. //good
    8. let items = [];
    9. items.push('zhinanzhen');

  5. 使用解构赋值的方式复制数组

    1. // bad
    3. const len = items.length;
    4. const itemsCopy = [];
    5. let i;
    7. for (i = 0; i < len; i++) {
    8.   itemsCopy[i] = items[i];
    9. }
    11. //good
    13. const itemsCopy = [...items];

  6. 对象转数组使用数组的from方法


    2. const foo = document.querySelectorAll('.foo');
    3. const nodes = Array.from(foo);

  7. 推荐使用解构存取和多属性对象

    1. // bad
    3. function getFullName(user) {
    4.   const firstName = user.firstName;
    5.   const lastName = user.lastName;
    7.   return `${firstName} ${lastName}`;
    8. }
    10. //good
    12. function getFullName(obj) {
    13.   const { firstName, lastName } = obj;
    14.   return `${firstName} ${lastName}`;
    15. }
    17. //best
    19. function getFullName({ firstName, lastName }) {
    20.   return `${firstName} ${lastName}`;
    21. }

  8. 数组推荐使用解构赋值


    2. const arr = [1, 2, 3, 4];
    3. const [first, second] = arr;

  9. 字符串使用单引号（eslint推荐使用一致的单引号或者双引号）


    2. // bad
    3. const name = "zhinanzhen";
    5. // good
    6. const name = 'zhinanzhen';

  10. ***推荐使用模版字符串


    2. function sayHi(name) {
    3.   return `How are you, ${name}?`;
    4. }

  11. 推荐使用函数声明代替函数表达式（var声明的函数表达式，函数的声明会被提升，但是函数体不会；函数声明的名称和函数体都会被提升）


    2. // bad
    3. const foo = function () {
    4. //doSomething();
    5. };
    7. // good
    8. function foo() {
    9.     const foo = function () {
    10.     //doSomething();
    11.     };
    12. }

  12. 不允许在if，while中声明一个函数


    2. // bad
    3. let a = 2;
    4. if (a > 0){
    5.     function foo(){
    6.         //doSomething()
    7.     }
    8. }

  13. 不允许把参数声明为arguments（eslint： 不允许函数的参数重名），且使用rest语法代替arguments


    2. // bad
    3. function nope(name, options, arguments) {
    4.   // ...stuff...
    5. }
    7. // bad
    8. function concatenateAll() {
    9.   const args = Array.prototype.slice.call(arguments);
    10.   return args.join('');
    11. }
    13. // good
    14. function concatenateAll(...args) {
    15.   return args.join('');
    16. }

  14. 不允许直接给函数的参数赋值


    2. // bad
    3. var b = 1;
    4. function count(a = b++) {
    5.   console.log(a);
    6. }
    7. count();  // 1
    8. count();  // 2
    9. count(3); // 3
    10. count();  // 3

  15. 在必须使用函数表达式或者传递一个匿名函数时，使用箭头函数


    2. // bad
    3. [1, 2, 3].map(function (x) {
    4.   return x * x;
    5. });
    7. // good
    8. [1, 2, 3].map((x) => {
    9.   return x * x;
    10. });

  16. 推荐使用class，避免直接操作prototype

    1. // bad
    2. function Queue(contents = []) {
    3.   this._queue = [...contents];
    4. }
    5. Queue.prototype.pop = function() {
    6.   const value = this._queue[0];
    7.   this._queue.splice(0, 1);
    8.   return value;
    9. }
    11. // good
    12. class Queue {
    13.   constructor(contents = []) {
    14.     this._queue = [...contents];
    15.   }
    16.   pop() {
    17.     const value = this._queue[0];
    18.     this._queue.splice(0, 1);
    19.     return value;
    20.   }
    21. }

  17. 使用extend继承

    1. // bad
    2. const inherits = require('inherits');
    3. function PeekableQueue(contents) {
    4.   Queue.apply(this, contents);
    5. }
    6. inherits(PeekableQueue, Queue);
    7. PeekableQueue.prototype.peek = function() {
    8.   return this._queue[0];
    9. }
    11. // good
    12. class PeekableQueue extends Queue {
    13.   peek() {
    14.     return this._queue[0];
    15.   }
    16. }

  18. 不要使用通配符import


    2. // bad
    3. import * as AirbnbStyleGuide from './AirbnbStyleGuide';
    5. // good
    6. import AirbnbStyleGuide from './AirbnbStyleGuide';

  19. 不要在import中直接export


    2. // bad
    3. // filename es6.js
    4. export { es6 as default } from './airbnbStyleGuide';
    6. // good
    7. // filename es6.js
    8. import { es6 } from './AirbnbStyleGuide';
    9. export default es6;

  20. 使用高阶函数（map(),reduce()）替代for-of


    2. const numbers = [1, 2, 3, 4, 5];
    4. // bad
    5. let sum = 0;
    6. for (let num of numbers) {
    7.   sum += num;
    8. }
    10. sum === 15;
    12. // good
    13. let sum = 0;
    14. numbers.forEach((num) => sum += num);
    15. sum === 15;
    17. // best (use the functional force)
    18. const sum = numbers.reduce((total, num) => total + num, 0);
    19. sum === 15;

  21. 访问对象属性使用‘.’，通过变量访问属性时使用中括号‘[]’


    2. const luke = {
    3.   jedi: true,
    4.   age: 28,
    5. };
    7. // bad
    8. const isJedi = luke['jedi'];
    10. // good
    11. const isJedi = luke.jedi;
    13. function getProp(prop) {
    14.   return luke[prop];
    15. }
    17. const isJedi = getProp('jedi');

  22. 将const和let分组


    2. // bad
    3. let i, len, dragonball,
    4.     items = getItems(),
    5.     goSportsTeam = true;
    7. // bad
    8. let i;
    9. const items = getItems();
    10. let dragonball;
    11. const goSportsTeam = true;
    12. let len;
    14. // good
    15. const goSportsTeam = true;
    16. const items = getItems();
    17. let dragonball;
    18. let i;
    19. let length;

  23. 优先使用 === 和 !== 而不是 == 和 !=.

  24. 条件表达式里面的值使用简写的方式

    1. // bad
    2. if (name !== '') {
    3.   // ...stuff...
    4. }
    6. // good
    7. if (name) {
    8.   // ...stuff...
    9. }
    11. // bad
    12. if (collection.length > 0) {
    13.   // ...stuff...
    14. }
    16. // good
    17. if (collection.length) {
    18.   // ...stuff...
    19. }

    注意：条件表达式例如 if 语句通过抽象方法 ToBoolean 强制计算它们的表达式并且总是遵守下面的规则：

    1. 对象：true
    2. Undefined：false
    3. Null ：false
    4. 布尔值 ：布尔的值
    5. 数字 ：+0、-0、或 NaN 算为 false, 否则为 true
    6. 字符串：如果是空字符串 '' 为 false，否则为 true
    7. 数组：true（包括空数组 [] ）

  25. 多行代码使用大括号包裹


    2. // bad
    3. if (test)
    4.     return false;
    6. function() { return false; }
    8. // good
    9. if (test) return false;
    11. if (test) {
    12.   return false;
    13. }
    15. function() {
    16.   return false;
    17. }

  26. 如果通过 if 和 else 使用多行代码块，把 else 放在 if 代码块关闭括号的同一行。


    2. // bad
    3. if (test) {
    4.     thing1();
    5.     thing2();
    6. }
    7. else {
    8.     thing3();
    9. }
    11. // good
    12. if (test) {
    13.     thing1();
    14.     thing2();
    15. } else {
    16.     thing3();
    17. }

  27. *** 使用 /** ... */ 作为多行注释，包含描述、指定所有参数和返回值的类型和值。


    2. // bad
    3. // make() returns a new element
    4. // based on the passed in tag name
    5. //
    6. // @param {String} tag
    7. // @return {Element} element
    8. function make(tag) {
    10.   // ...stuff...
    12.   return element;
    13. }
    15. // good
    16. /**
    17.  * make() returns a new element
    18.  * based on the passed in tag name
    19.  *
    20.  * @param {String} tag
    21.  * @return {Element} element
    22.  */
    23. function make(tag) {
    25.   // ...stuff...
    27.   return element;
    28. }

  28. 使用 // 作为单行注释。在评论对象上面另起一行使用单行注释。在注释前插入空行。


    2. // bad
    3. const active = true;  // is current tab
    5. // good
    6. // is current tab
    7. const active = true;
    9. // bad
    10. function getType() {
    11.   console.log('fetching type...');
    12.   // set the default type to 'no type'
    13.   const type = this._type || 'no type';
    15.   return type;
    16. }
    18. // good
    19. function getType() {
    20.   console.log('fetching type...');
    22.   // set the default type to 'no type'
    23.   const type = this._type || 'no type';
    25.   return type;
    26. }

  29. 给注释增加 FIXME 或 TODO 的前缀可以帮助其他开发者快速了解这是一个需要复查的问题，或是给需要实现的功能提供一个解决方式

    1. // good
    2. class Calculator {
    3.   constructor() {
    4.     // FIXME: shouldn't use a global here
    5.     total = 0;
    6.   }
    7. }
    9. class Calculator {
    10.   constructor() {
    11.     // TODO: total should be configurable by an options param
    12.     this.total = 0;
    13.   }
    14. }

  30. 使用两个空格作为缩进；

  31. 大括号前面使用一个空格；

  32. 在控制语句（if、while 等）的小括号前放一个空格；在函数调用及声明中，不在函数的参数列表前加空格


    2. // bad
    3. if(isJedi) {
    4.   fight ();
    5. }
    7. // good
    8. if (isJedi) {
    9.   fight();
    10. }
    12. // bad
    13. function fight () {
    14.   console.log ('Swooosh!');
    15. }
    17. // good
    18. function fight() {
    19.   console.log('Swooosh!');
    20. }

  33. 使用空格把运算符隔开；


    2. // bad
    3. const x=y+5;
    5. // good
    6. const x = y + 5;

  34. 在文件末尾，块儿末，新语句前插入空行插入一个空行


    2. // bad
    3. if (foo) {
    4.   return bar;
    5. }
    6. return baz;
    8. // good
    9. if (foo) {
    10.   return bar;
    11. }
    13. return baz;
    15. // bad
    16. const obj = {
    17.   foo() {
    18.   },
    19.   bar() {
    20.   },
    21. };
    22. return obj;
    24. // good
    25. const obj = {
    26.   foo() {
    27.   },
    29.   bar() {
    30.   },
    31. };
    33. return obj;

  35. 不要在行首插入逗号


    2. // bad
    3. const story = [
    4.     once
    5.   , upon
    6.   , aTime
    7. ];
    9. // good
    10. const story = [
    11.   once,
    12.   upon,
    13.   aTime,
    14. ];

  36. 给对象定义属性的时候增加结尾的逗号


    2. // bad
    3. const story = [
    4.     firstName: 'Dana',
    5.     lastName: 'Scully',
    6. ];
    8. // good
    9. const story = [
    10.     firstName: 'Dana',
    11.     lastName: 'Scully',
    12. ];

  37. 分号的使用


    2. // bad
    3. (function() {
    4.   const name = 'Skywalker'
    5.   return name
    6. })()
    8. // good
    9. (() => {
    10.   const name = 'Skywalker';
    11.   return name;
    12. })();
    14. // good (防止函数在两个 IIFE 合并时被当成一个参数)
    15. ;(() => {
    16.   const name = 'Skywalker';
    17.   return name;
    18. })();

  38. 在语句开始前执行类型转换


    2. //  => this.reviewScore = 9;
    4. // bad
    5. const totalScore = this.reviewScore + '';
    7. // good
    8. const totalScore = String(this.reviewScore);

  39. 对数字使用 parseInt 转换，并带上类型转换的基数

    1. const inputValue = '4';
    3. // bad
    4. const val = new Number(inputValue);
    6. // bad
    7. const val = +inputValue;
    9. // bad
    10. const val = inputValue >> 0;
    12. // bad
    13. const val = parseInt(inputValue);
    15. // good
    16. const val = Number(inputValue);
    18. // good
    19. const val = parseInt(inputValue, 10);

  40. 在使用长方法链时进行缩进。使用前面的点 . 强调这是方法调用而不是新语句

    1. // bad
    2. $('#items').find('.selected').highlight().end().find('.open').updateCount();
    4. // bad
    5. $('#items').
    6.   find('.selected').
    7.     highlight().
    8.     end().
    9.   find('.open').
    10.     updateCount();
    12. // good
    13. $('#items')
    14.   .find('.selected')
    15.     .highlight()
    16.     .end()
    17.   .find('.open')
    18.     .updateCount();

  41. 使用具有意义的命名方式


    2. // bad
    3. function q() {
    4.   // ...stuff...
    5. }
    7. // good
    8. function query() {
    9.   // ..stuff..
    10. }

  42. 使用驼峰命名对象和函数


    2. // bad
    3. const OBJEcttsssss = {};
    4. const this_is_my_object = {};
    5. function c() {}
    7. // good
    8. const thisIsMyObject = {};
    9. function thisIsMyFunction() {}

  43. 使用帕斯卡式（首字母大写）命名构造函数或类


    2. // bad
    3. function user(options) {
    4.   this.name = options.name;
    5. }
    7. const bad = new user({
    8.   name: 'nope',
    9. });
    11. // good
    12. class User {
    13.   constructor(options) {
    14.     this.name = options.name;
    15.   }
    16. }
    18. const good = new User({
    19.   name: 'yup',
    20. });

  44. 不要使用下划线 _ 结尾或开头来命名属性和方法


    2. // bad
    3. this.__firstName__ = 'Panda';
    4. this.firstName_ = 'Panda';
    5. this._firstName = 'Panda';
    7. // good
    8. this.firstName = 'Panda';

  45. 不要保存this的引用，使用箭头函数或者bind保存


    2. // bad
    3. function foo() {
    4.  const self = this;
    5.  return function() {
    6.    console.log(self);
    7.  };
    8. }
    10. // bad
    11. function foo() {
    12.  const that = this;
    13.  return function() {
    14.    console.log(that);
    15.  };
    16. }
    18. // good
    19. function foo() {
    20.  return () => {
    21.    console.log(this);
    22.  };
    23. }

  46. 如果文件只有一个类，那文件名必须与类名保持一致


    2. // file contents
    3. class CheckBox {
    4.  // ...
    5. }
    6. export default CheckBox;
    8. // in some other file
    9. // bad
    10. import CheckBox from './checkBox';
    12. // bad
    13. import CheckBox from './check_box';
    15. // good
    16. import CheckBox from './CheckBox';

  47. 存取函数时使用getVal() 和 setVal('hello')

    1. // bad
    2. echeng.age();
    4. // good
    5. echeng.getAge();
    7. // bad
    8. echeng.age(25);
    10. // good
    11. echeng.setAge(25);

  48. 属性是布尔值的时候使用isVal() 或 hasVal()


    2. // bad
    3. if (!dragon.age()) {
    4.  return false;
    5. }
    7. // good
    8. if (!dragon.hasAge()) {
    9.  return false;
    10. }

  49. set()和get()要保持一致


    2.  set(key, val) {
    3.    this[key] = val;
    4.  }
    6.  get(key) {
    7.    return this[key];
    8.  }

  50. 缓存jQuery查询


    2. // bad
    3. function setSidebar() {
    4.   $('.sidebar').hide();
    6.   // ...stuff...
    8.   $('.sidebar').css({
    9.     'background-color': 'pink'
    10.   });
    11. }
    13. // good
    14. function setSidebar() {
    15.   const $sidebar = $('.sidebar');
    16.   $sidebar.hide();
    18.   // ...stuff...
    20.   $sidebar.css({
    21.     'background-color': 'pink'
    22.   });
    23. }

  51. 使用 $ 作为存储 jQuery 对象的变量名前缀


    2. // bad
    3. const sidebar = $('.sidebar');
    5. // good
    6. const $sidebar = $('.sidebar');

  52. 对DOM查询使用层叠 $('.sidebar ul') 或 父元素 > 子元素 $('.sidebar > ul')的方式

  53. 对有作用域的jQuery对象查询使用 find

    1. // bad
    2. $('ul', '.sidebar').hide();
    4. // bad
    5. $('.sidebar').find('ul').hide();
    7. // good
    8. $('.sidebar ul').hide();
    10. // good
    11. $('.sidebar > ul').hide();
    13. // good
    14. $sidebar.find('ul').hide();
    1. 原文首创，转载请注明出处。

eslint推荐编码规范和airbnb推荐编码规范的更多相关文章

  1. 【转】Airbnb React编码规范

    Airbnb的编码规范是在业界非常流行的一套规范,而且它一直都在进化,推出最新技术的规范 原文:https://zhuanlan.zhihu.com/p/20616464 用更合理的方式书写React ...

  2. 前端编码规范（2）—— HTML 规范

    HTML 规范 文档类型 推荐使用 HTML5 的文档类型申明: <!DOCTYPE html>. (建议使用 text/html 格式的 HTML.避免使用 XHTML.XHTML 以及 ...

  3. 前端编码风格规范（3）—— JavaScript 规范

    JavaScript 规范 全局命名空间污染与 IIFE 总是将代码包裹成一个 IIFE(Immediately-Invoked Function Expression),用以创建独立隔绝的定义域.这 ...

  4. 【PHP开发规范】老生常谈的编码开发规范你懂多少？

    [PHP开发规范]老生常谈的编码开发规范你懂多少? 这几天看了一下阿里技术发布的一套Java开发规范<阿里巴巴Java开发手册>,里面写了阿里内部的Java开发规范标准,写的很好.这套Ja ...

  5. 前端编码规范（2）HTML 规范

    文档类型 推荐使用 HTML5 的文档类型申明: <!DOCTYPE html> (建议使用 text/html 格式的 HTML.避免使用 XHTML.XHTML 以及它的属性,比如 a ...

  6. 坑爹的对GBK编码的字符进行url编码

    url编码又叫百分号编码 现在的url编码十分混乱,都没有按照新标准来 对汉字都按照不同的编码后再进行url编码 2005年1月发布的RFC 3986,强制所有新的URI必须对未保留字符不加以百分号编 ...

  7. 【JAVA编码专题】JAVA字符编码系列一：Unicode,GBK,GB2312,UTF-8概念基础

    这两天抽时间又总结/整理了一下各种编码的实际编码方式,和在Java应用中的使用情况,在这里记录下来以便日后参考. 为了构成一个完整的对文字编码的认识和深入把握,以便处理在Java开发过程中遇到的各种问 ...

  8. 从原理上搞定编码（二）-- Web编码

    周末宅在家里睡完觉就吃饭,吃完饭接着睡觉,这日子过的实在是没劲啊.明明还有计划中的事情没有做, 为什么就是不想去做呢,这样的生活持续下去,必然会成为一个彻头彻尾的loser.上一篇写的 初识编码 ,这 ...

  9. UTF-8和GBK编码之间的区别(页面编码、数据库编码区别)以及在实际项目中的应用

    第一节:UTF-8和GBK编码概述 UTF-8 (8-bit Unicode Transformation Format) 是一种针对Unicode的可变长度字符编码,又称万国码,它包含全世界所有国家 ...

随机推荐

  1. chromeDriver下载地址

    http://chromedriver.storage.googleapis.com/index.html

  2. Package pdftex.def Error: PDF mode expected, but DVI mode detected!

    本系列文章由 @yhl_leo 出品,转载请注明出处. 文章链接: http://blog.csdn.net/yhl_leo/article/details/51646781 在如下使用LaTeX编译 ...

  3. hdu_1020_Encoding_201310172120

    Encoding Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total S ...

  4. [luogu1156]垃圾陷阱_动态规划_背包dp

    垃圾陷阱 luogu-1156 题目大意:Holsteins在距离地面D英尺的地方,FJ间隔时间ti会往下扔第i个垃圾.Holsteins对待每一个垃圾都会选择吃掉或者垫高.Holsteins有10个 ...

  5. [poj3070]Fibonacci_矩乘_快速幂

    Fibonacci poj-3070 题目大意:求Fibonacci第n项. 注释:模数为10000,$1\le n \le 10^9$. 想法:矩阵题,用例题6的想法,我们构造矩阵 $\begin{ ...

  6. GDB 调试 PHP文件

    http://www.bo56.com/%E5%9C%A82016%E7%9A%84phpcon%E5%A4%A7%E4%BC%9A%E4%B8%8A%E7%9A%84%E5%88%86%E4%BA% ...

  7. shell中eval命令

    原文:http://www.cnblogs.com/xdzone/archive/2011/03/15/1984971.html 语法:eval cmdLine eval会对后面的cmdLine进行两 ...

  8. c/c++ 数据结构之位图（bitmap）具体解释

    1.  概述 位图(bitmap)是一种很经常使用的结构,在索引.数据压缩等方面有广泛应用. 本文介绍了位图的实现方法及其应用场景. 2. 位图实现 2014728101320" alt=& ...

  9. 【面试】【Spring常见问题总结】【07】

    [常见面试问题总结文件夹>>>] 61.Spring IoC容器的依赖有两层含义: Bean依赖容器:也就是说Bean要依赖于容器,这里的依赖是指容器负责创建Bean并管理Bean的 ...

  10. CSS学习（十四）-CSS颜色之中的一个

    一.理论: 1.RGB色彩模式  a.CMYK色彩模式  b.索引色彩模式 (主要用于web) c.灰度模式  d.双色调模式 2.opacity: a.alphavalue:透明度 b.inheri ...