前端代码规范

一、变量

1、no-var

  const 和 let 不存在声明提升的问题，并且支持块级作用域：

错误代码示例：

  var a = 1;
  alert(a);

正确代码示例：

  const a = 1;
  alert(a);

2、no-unused-vars

  已经声明的变量或者常量没有在代码中使用，这样会增加代码量，混淆读者。

错误代码示例：

  const foo = '123';

正确代码示例：

  const foo = '123';
  alert(foo);

3、prefer-const

  一个变量不会被重新赋值，最好使用 const 赋值，减少认知负荷，提高可维护性。

错误代码示例：

  let foo = 1;
  console.log(foo);

正确代码示例：

  const foo = 1;
  console.log(foo);

二、可能出现的低级错误

1、for-direction

  避免一个 for 循环的停止条件永远无法到达：

错误代码示例：

for (var i = 0; i < 10; i--) {
}

正确代码示例：

for (var i = 0; i < 10; i++) {
}

2、no-dupe-args

  禁止在函数定义或者表达式中出现多个同名的参数：

错误代码示例：

function foo(a, b, a) {
  console.log('value of the second a:', a);
}

正确代码示例：

function foo(a, b, c) {
  console.log(a, b, c);
}

3、no-dupe-keys

  避免对象中出现多个相同的键：

错误代码示例：

const foo = {
  bar: 'baz',
  bar: 'qux'
};

正确代码示例：

const foo = {
  bar: 'bar',
}

4、no-duplicate-case

  避免在 switch 语句中出现重复的 case 语句：

错误代码示例：

const sex = 1;
switch(sex) {
  case 1:
    break;
  case 0:
    break;
  case 1:
    break;
}

正确代码示例：

const sex = 1;
switch(sex) {
  case 1:
    break;
  case 0:
    break;
}

5、constructor-super

  避免无效或者确实 super 方法的调用：

错误代码示例：

class A {
  constructor() {
    super(); 
  }
}
class A extends B {
  constructor() { }
}

正确代码示例：

class A {
  constructor() { }
}

class A extends B {
  constructor() {
    super();
  }
}

6、no-const-assign

  避免出现修改 const 变量的错误：

错误代码示例：

const a = 0;
a = 1;
console.log(a);

正确代码示例：

const a = 0;
console.log(a);

7、no-dupe-class-members

  避免 class 中出现同名的声明：

错误代码示例：

class Foo {
  bar() { console.log("hello"); }
  bar() { console.log("goodbye"); }
}

成功代码示例：

class Foo {
  bar() { console.log("hello"); }
}

8、no-this-before-super

  避免在 super 方法之前调用 this：

错误代码示例：

class A extends B {
  constructor() {
    this.a = 0;
    super();
  }
}

正确代码示例：

class A extends B {
  constructor() {
    super();
    this.a = 0;
  }
}

9、array-callback-return

  避免使用数组方法时，忘记 return 结果：

错误代码示例：

const nums = [1, 2, 3];
const doubleNums = nums.map(item => {
  // 一顿操作之后，忘记 return
})

正确代码示例：

const nums = [1, 2, 3];
const doubleNums = nums.map(item => item * 2);

三、最佳实践

1、dot-notation

  使用点号访问属性，更加易读、简洁、同时也约束了命名的规范性，并且更适用于 JavaScript 压缩：

错误代码示例：

  const a = foo['bar-some'];
  const b = foo['bar'];

正确代码示例：

  const a = foo.bar;

2、eqeqeq

  避免采用 == 降低程序的可读性：

错误代码示例：

  function unDef(obj) {
    if (obj == null) {
      return true;
    }
    return false;
  }

正确代码示例：

  function unDef(obj) {
    if (obj === undefined || obj === null) {
      return true;
    }
    return false;
  }

3、default-case

  采用 switch 语句时，需要设置 default 语句：

错误代码示例：

  const sex = 0
  swicth(sex) {
    case 0:
      return '男';
    case 1:
      return '女';
  }

正确代码示例：

  const sex = 0
  swicth(sex) {
    case 0:
      return '男';
    case 1:
      return '女';
    default:
      return '未知性别';
  }

4、no-magic-numbers

  将具体的数字或者字符串声明为意义明确的常量，从而使代码更加可读并且容易重构：

错误代码示例：

  const price = totalPrice * 0.25;

错误代码示例：

  const DISCOUNT = 0.25;
  const price = totalPrice * DISCOUNT;

5、radix

   默认情况下，parseInt()会通过检测前缀，来设置基数，为了避免意想不到的结果，建议在 parseInt() 中始终使用基数来消除意想不到的后果。

错误代码示例：

  const num = parseInt('071'); // 57 处理为8进制

正确代码示例：

  const num = parseInt('071', 10); // 71

6、semi

  行尾使用分号，避免压缩代码时出现意外情况：

错误代码示例：

  const a = '123'
  console.log(a)

正确代码示例：

  const a = '123';
  console.log(a);

7、no-extra-semi

  检测不必要的分号：

错误的代码示例：

  const a = 1;;

正确的代码示例：

  const a = 1;

8、max-depth

  避免过多的嵌套（最大4层），降低代码的可读性：

错误代码示例：

function foo() {
  for (;;) { // Nested 1 deep
    let val = () => (param) => { // Nested 2 deep
      if (true) { // Nested 3 deep
        if (true) { // Nested 4 deep
          if (true) { // Nested 5 deep
          }
        }
      }
    };
  }
}

正确代码示例：

function foo() {
  for (;;) { // Nested 1 deep
    let val = () => (param) => { // Nested 2 deep
      if (true) { // Nested 3 deep
        if (true) { // Nested 4 deep
        }
      }
    };
  }
}

9、max-params

  规定函数的参数不超过5个，更多的参数应该采用对象的方式：

错误代码示例：

function foo (bar, baz, qux, qxx, some, ok) {
  doSomething();
}

正确代码示例：

function foo ({bar, baz, qux, qxx, some, ok}) {
  doSomething();
}

10、comma-dangle

  对象的拖尾逗号：

错误代码示例：

const foo = {
  age: 20,
  sex: 0
}

正确代码示例：

const foo = {
  age: 20,
  sex: 0,
}

11、func-names

  避免使用匿名函数，命名函数更易于调试：

错误代码示例：

const foo = function () {};

正确代码示例：

const foo = function _foo() {};

12、indent

  风格统一的缩进，两个空格：

错误代码示例：

  if (a === 1) {
      console.log(a);
  }

正确代码示例：

  if (a) {
    console.log(a);
  }