原文链接

定名范例

• 规范变量采纳驼峰式定名
• ‘ID’在变量名中全大写
• 常量全大写，用下划线衔接组织函数，大写第一个字母
• jquery对象必需以’$’开首定名

let thisIsMyName;
let goodID;
let reportURL;
let AndroidVersion;
let iOSVersion;
let MAX_COUNT = 10;
function Person(name) {
this.name = name;
}
// not good
let body = $('body');
// good
let $body = $('body');

局部变量定名范例

• s：示意字符串。比方：sName，sHtml;
• n：示意数字。比方：nPage，nTotal;
• b：示意逻辑。比方：bChecked，bHasLogin;
• a：示意数组。比方：aList，aGroup;
• r：示意正则表达式。比方：rDomain，rEmail;
• f：示意函数。比方：fGetHtml，fInit;
• o：示意以上未涉及到的其他对象，比方：oButton，oDate;

函数定名

小驼峰定名法，可运用罕见动词商定：

• can 推断是不是可实行某个行动，函数返回一个布尔值。true：可实行；false：不可实行
• has 推断是不是含有某个值， 函数返回一个布尔值。true：含有此值；false：不含有此值
• is 推断是不是为某个值，函数返回一个布尔值。true：为某个值；false：不为某个值
• get 猎取某个之，函数返回一个非布尔值
• set 设置某个值，无返回值、返回是不是设置胜利或许返回链式对象load 加载某些数据,无返回值或许返回是不是加载完成的效果

// 是不是可浏览
function canRead() {
 return true;
}
// 猎取称号
function getName() {
 return this.name;
}

援用 References

对一切的援用运用 const ；不要运用 var。

eslint: prefer-const, no-const-assign

这能够确保你没法对援用从新分派，从新分派能够会致使 bug 和难以明白的代码。

// bad
var a = 1;
var b = 2;
// good
const a = 1;
const b = 2;

假如你肯定须要可变动的援用，运用 let 替换 var 。

eslint: no-var jscs: disallowVar

// bad
var count = 1;
if (true) {
count += 1;
}
// good, 运用 let.
let count = 1;
if (true) {
count += 1;
}

对象Objects

运用字面量语法建立对象。

eslint: no-new-object

// bad
const item = new Object();
// good
const item = {};

当建立带有动态属性称号的对象时运用盘算的属性称号。

它们许可你在一个处所定义一个对象的一切属性。

function getKey(k) {
 return `a key named k`;
}
// bad
const obj = {
id: 5,
name: 'San Francisco',
};
obj[getKey('enabled')] = true;
// good
const obj = {
    id: 5,
    name: 'San Francisco',
    [getKey('enabled')]: true,
};

运用对象要领速记语法。

eslint: object-shorthand jscs: requireEnhancedObjectLiterals

// bad
const atom = {
value: 1,
addValue: function (value) {
    return atom.value + value;
  },
};
// good
const atom = {
value: 1,
addValue(value) {
    return atom.value + value;
  },
};

运用对象属性速记语法。

eslint: object-shorthand jscs: requireEnhancedObjectLiterals

const lukeSkywalker = 'Luke Skywalker';
// bad
const obj = {
  lukeSkywalker: lukeSkywalker,
};
// good
const obj = {
  lukeSkywalker,
};

将速记属性分组写在对象声明的最先处

更轻易看出哪些属性在运用速记语法

const anakinSkywalker = 'Anakin Skywalker';
const lukeSkywalker = 'Luke Skywalker';
// bad
const obj = {
episodeOne: 1,
twoJediWalkIntoACantina: 2,
lukeSkywalker,
episodeThree: 3,
mayTheFourth: 4,
anakinSkywalker,
};
// good
const obj = {
lukeSkywalker,
anakinSkywalker,
episodeOne: 1,
twoJediWalkIntoACantina: 2,
episodeThree: 3,
mayTheFourth: 4,
};

只用引号引无效标识符的属性。

eslint: quote-props jscs: disallowQuotedKeysInObjects

平常来讲，我们以为比较轻易浏览。它改进了语法高亮显现，而且更轻易被很多JS引擎优化。

// bad
const bad = {
'foo': 3,
'bar': 4,
'data-blah': 5,
};
// good
const good = {
foo: 3,
bar: 4,
'data-blah': 5,
};

数组 Arrays

运用字面量建立数组。

eslint: no-array-constructor

// bad
const items = new Array();
// good
const items = [];

运用数组睁开操纵符 … 复制数组。

// bad
const len = items.length;
const itemsCopy = [];
let i;
for (i = 0; i < len; i += 1) {
itemsCopy[i] = items[i];
}
// good
const itemsCopy = [...items];

运用睁开操纵符 … 替换 Array.from，来将一个类数组(array-like) 对象转换成数组。

const foo = document.querySelectorAll('.foo');
// good
const nodes = Array.from(foo);
// best
const nodes = [...foo];

有效 Array.from 替换睁开操纵符 … 来映照迭代，因为它防备了建立序言数组。

// bad
const baz = [...foo].map(bar);
// good
const baz = Array.from(foo, bar);

解构 Destructuring

当接见和运用对象的多个属性时，请运用对象解构。

eslint: prefer-destructuring jscs: requireObjectDestructuring

// bad
function getFullName(user) {
  const firstName = user.firstName;
  const lastName = user.lastName;
  return `firstName lastName`;
}
// good
function getFullName(user) {
  const { firstName, lastName } = user;
  return `firstName lastName`;
}
// best
function getFullName({ firstName, lastName }) {
  return `firstName lastName`;
}

运用数组解构。

eslint: prefer-destructuring jscs: requireArrayDestructuring

const arr = [1, 2, 3, 4];
// bad
const first = arr[0];
const second = arr[1];
// good
const [first, second] = arr;

运用对象解构来完成多个返回值，而不是数组解构。jscs: disallowArrayDestructuringReturn

您能够跟着时刻的推移增添新的属性或变动排序，而不会转变挪用时的位置。

// bad
function processInput(input) {
  return [left, right, top, bottom];
}
// 挪用者须要斟酌返回数据的递次
const [left, __, top] = processInput(input);
// good
function processInput(input) {
  return { left, right, top, bottom };
}
// 挪用者只挑选他们须要的数据
const { left, top } = processInput(input);

字符串 Strings

字符串运用单引号 ‘’。

eslint: quotes jscs: validateQuoteMarks

// bad
const name = "Capt. Janeway";
// bad - 模板字面量应当包括插值或换行符
const name = `Capt. Janeway`;
// good
const name = 'Capt. Janeway';

以编程体式格局构建字符串时，请运用模板字符串而不是字符串衔接。

eslint: prefer-template template-curly-spacing jscs: requireTemplateStrings

// bad
function sayHi(name) {
    return 'How are you, ' + name + '?';
}
// bad
function sayHi(name) {
    return ['How are you, ', name, '?'].join();
}
// bad
function sayHi(name) {
    return `How are you, ${ name }?`;
}
// good
function sayHi(name) {
     return `How are you, ${name}?`;
}

永久不要在字符串上运用 eval() ，它会翻开太多的破绽。

eslint: no-eval

函数 Functions

运用定名函数表达式而不是函数声明。

eslint: func-style jscs: disallowFunctionDeclarations

函数声明很轻易被提拔（Hoisting）,这对可读性和可保护性来讲都是不利的;

/ bad
function foo() {
  // ...
}
// bad
const foo = function () {
  // ...
};
// good 
// 用显著区分于变量援用挪用的辞汇定名
const short = function longUniqueMoreDescriptiveLexicalFoo() {
  // ...
};

用圆括号包裹马上挪用函数表达式 (IIFE)。

eslint: wrap-iife jscs: requireParenthesesAroundIIFE

一个马上挪用函数表达式是一个零丁的单位 – 将函数表达式包裹在括号中，背面再跟一个挪用括号，这看上去很紧凑。

// 马上挪用函数表达式 (IIFE)
(function () {
console.log('Welcome to the Internet. Please follow me.');
}());

不要运用 arguments。能够挑选 rest 语法 … 替换。

运用 … 能明白你要传入的参数。别的 rest（盈余）参数是一个真正的数组，而 arguments 是一个类数组（Array-like）。

// bad
function concatenateAll() {
  const args = Array.prototype.slice.call(arguments);
  return args.join('');
}
// good
function concatenateAll(...args) {
  return args.join('');
}

运用默许参数语法，而不要运用一个变化的函数参数

// really bad
function handleThings(opts) {
  // 越发蹩脚: 假如参数 opts 是 falsy(假值) 的话，它将被设置为一个对象，
  // 这多是你想要的，但它能够引发一些小的毛病。
  opts = opts || {};
  // ...
}
// still bad
function handleThings(opts) {
  if (opts === void 0) {
  opts = {};
}
// ...
}
// good
function handleThings(opts = {}) {
  // ...
}

一直将默许参数放在末了。

// bad
function handleThings(opts = {}, name) {
// ...
}
// good
function handleThings(name, opts = {}) {
// ...
}

离隔函数署名，括号双方用空格离隔。

// bad
const f = function(){};
const g = function (){};
const h = function() {};
// good
const x = function () {};
const y = function a() {};

不要转变参数。

eslint: no-param-reassign

操纵作为参数传入的对象，能够会在挪用原始对象时形成不必要的变量副作用。（对象是援用范例）

// bad
function f1(obj) {
obj.key = 1;
}
// good
function f2(obj) {
  const key = Object.prototype.hasOwnProperty.call(obj, 'key') ? obj.key : 1;
}

箭头函数 Arrow Functions

当您必需运用匿名函数（如在通报一个内联回调时），请运用箭头函数示意法。

eslint: prefer-arrow-callback, arrow-spacing jscs: requireArrowFunctions

它建立了一个在 this 高低文中实行的函数的版本，这一般是你想要的，而且如许的写法更加简约。

// bad
[1, 2, 3].map(function (x) {
  const y = x + 1;
  return x * y;
});
// bad
[1, 2, 3].map( _ => {
  
  return 0;
});
// good
[1, 2, 3].map((x) => {
  const y = x + 1;
  return x * y;
});
// good
[1, 2, 3].map(() => {
  
  return 0;
});

假如函数体由一个返回无副作用(side effect)的expression(表达式)的单行语句构成，那末能够省略大括号并运用隐式返回。不然，保存大括号并运用 return 语句。

// bad
[1, 2, 3].map(number => {
const nextNumber = number + 1;
return `A string containing the nextNumber.`;
});
// good
[1, 2, 3].map(number => `A string containing the number.`);

假如表达式跨多行，将其包裹在括号中，能够进步可读性。

// bad
['get', 'post', 'put'].map(httpMethod => Object.prototype.hasOwnProperty.call(
  httpMagicObjectWithAVeryLongName,
  httpMethod,
  )
);
// good
['get', 'post', 'put'].map(httpMethod => (
  Object.prototype.hasOwnProperty.call(
  httpMagicObjectWithAVeryLongName,
  httpMethod,
  )
));

假如你的函数只要一个参数而且不运用大括号，则能够省略参数括号。不然，为了清楚和一致性，老是给参数加上括号。

// bad
[1, 2, 3].map((x) => x * x);
// good
[1, 2, 3].map(x => x * x);
// good
[1, 2, 3].map(number => (
`A long string with the number. It’s so long that we don’t want it to take up space on the .map line!`
));
// 老是增添（）
// bad
[1, 2, 3].map(x => {
  const y = x + 1;
  return x * y;
});
// good
[1, 2, 3].map((x) => {
  const y = x + 1;
  return x * y;
});

防备运用比较运算符(< =, >=)时，殽杂箭头函数语法(=>)。

// bad
const itemHeight = item => item.height > 256 ? item.largeSize : item.smallSize;
// bad
const itemHeight = (item) => item.height > 256 ? item.largeSize : item.smallSize;
// good
const itemHeight = item => (item.height > 256 ? item.largeSize : item.smallSize);
// good
const itemHeight = (item) => {
  const { height, largeSize, smallSize } = item;
  return height > 256 ? largeSize : smallSize;
};

类 Classes & 组织函数 Constructors

老是运用 *class。防备直接操纵 prototype 。

// bad
function Queue(contents = []) {
  this.queue = [...contents];
}
Queue.prototype.pop = function () {
  const value = this.queue[0];
  this.queue.splice(0, 1);
  return value;
};
// good
class Queue {
  constructor(contents = []) {
    this.queue = [...contents];
  }
  pop() {
    const value = this.queue[0];
    this.queue.splice(0, 1);
    return value;
  }
}

运用 extends 继续。

因为 extends 是一个内置的原型继续要领而且不会损坏 instanceof。

// bad
const inherits = require('inherits');
  function PeekableQueue(contents) {
  Queue.apply(this, contents);
}

inherits(PeekableQueue, Queue);
  PeekableQueue.prototype.peek = function () {
  return this.queue[0];
};

// good
class PeekableQueue extends Queue {
  peek() {
    return this.queue[0];
  }
}

假如没有指定，类有一个默许的组织函数。一个空的组织函数或许只是托付给父类则不是必需的。

eslint: no-useless-constructor

// bad
class Jedi {
  constructor() {}
  getName() {
    return this.name;
  }
}
// bad
class Rey extends Jedi {
  constructor(...args) {
    super(...args);
  }
}
// good
class Rey extends Jedi {
  constructor(...args) {
    super(...args);
    this.name = 'Rey';
  }
}

防备反复类成员。

eslint: no-dupe-class-members

// bad
class Foo {
  bar() { return 1; }
  bar() { return 2; }
}
// good
class Foo {
  bar() { return 1; }
}
// good
class Foo {
  bar() { return 2; }
}

模块 Modules

老是运用模块 (import/export) 而不是其他非规范模块体系。

// bad
const AirbnbStyleGuide = require('./AirbnbStyleGuide');
module.exports = AirbnbStyleGuide.es6;
// ok
import AirbnbStyleGuide from './AirbnbStyleGuide';
export default AirbnbStyleGuide.es6;
// best
import { es6 } from './AirbnbStyleGuide';
export default es6;

不要运用通配符 import(导入)。

如许能确保你只要一个默许 export(导出)。

// bad
import * as AirbnbStyleGuide from './AirbnbStyleGuide';
// good
import AirbnbStyleGuide from './AirbnbStyleGuide';

不要从 import(导入) 中直接 export(导出)。

虽然一行代码简约明了，但有一个明白的 import(导入) 要领和一个明白的 export(导出) 要领，使事变能坚持一致。

// bad
// filename es6.js
export { es6 as default } from './AirbnbStyleGuide';
// good
// filename es6.js
import { es6 } from './AirbnbStyleGuide';
export default es6;

一个处所只在一个途径中 import(导入) 。

// bad
import foo from 'foo';
// … 其他一些 imports … //
import { named1, named2 } from 'foo';
// good
import foo, { named1, named2 } from 'foo';
// good
import foo, {
  named1,
  named2,
} from 'foo';

不要 export(导出) 可变绑定。

eslint: import/no-mutable-exports

平常应当防备可变性，特别是在导出可变绑定时。虽然一些特别情况下，能够须要这类手艺，然则平常而言，只应当导出常量援用。

// bad
let foo = 3;
export { foo };
// good
const foo = 3;
export { foo };

在只要单个导出的模块中，默许 export(导出) 优于定名 export(导出)。

eslint: import/prefer-default-export

为了勉励更多的文件只要一个 export(导出)，这有利于模块的可读性和可保护性。

// bad
export function foo() {}
// good
export default function foo() {}

将一切 import 导入放在非导入语句的上面。

eslint: import/first

因为 import 被提拔，坚持他们在顶部，防备不测的行动。

// bad
import foo from 'foo';
foo.init();
import bar from 'bar';
// good
import foo from 'foo';
import bar from 'bar';
foo.init();

多行导入应当像多行数组和对象字面量一样举行缩进。

// bad
import {longNameA, longNameB, longNameC, longNameD, longNameE} from 'path';
// good
import {
longNameA,
longNameB,
longNameC,
longNameD,
longNameE,
} from 'path';

属性 Properties

运用 点语法(.) 来接见对象的属性。

eslint: dot-notation jscs: requireDotNotation

const luke = {
jedi: true,
age: 28,
};
// bad
const isJedi = luke['jedi'];
// good
const isJedi = luke.jedi;

当经由过程变量接见属性时运用中括号 []。

const luke = {
jedi: true,
age: 28,
};
function getProp(prop) {
return luke[prop];
}
const isJedi = getProp('jedi');

求幂时运用求幂运算符 ** 。

eslint: no-restricted-properties.

// bad
const binary = Math.pow(2, 10);
// good
const binary = 2 ** 10;

变量 Variables

老是运用 const 或 let 来声明变量。 不如许做会致使发生全局变量。 我们愿望防备污染全局定名空间。

eslint: no-undef prefer-const

// bad
superPower = new SuperPower();
// good
const superPower = new SuperPower();

将一切的 const 和 let 分组 。

当你须要把已分派的变量分派给一个变量时异常有效

// bad
let i, len, dragonball,
items = getItems(),
goSportsTeam = true;
// bad
let i;
const items = getItems();
let dragonball;
const goSportsTeam = true;
let len;
// good
const goSportsTeam = true;
const items = getItems();
let dragonball;
let i;
let length;

变量不要链式赋值。

eslint: no-multi-assign

链接变量赋值会建立隐式全局变量。

// bad
(function example() {
// JavaScript 将其剖析为
// let a = ( b = ( c = 1 ) );
// let关键字只适用于变量a;
// 变量b和c变成了全局变量。
let a = b = c = 1;
}());
console.log(a); // 抛出 ReferenceError（援用毛病）
console.log(b); // 1
console.log(c); // 1
// good
(function example() {
let a = 1;
let b = a;
let c = a;
}());
console.log(a); // 抛出 ReferenceError（援用毛病）
console.log(b); // 抛出 ReferenceError（援用毛病）
console.log(c); // 抛出 ReferenceError（援用毛病）
// 一样适用于 `const`

防备运用一元递增和递减运算符(++, -–)。

依据 eslint 文档，一元递增和递减语句会遭到自动插进去分号的影响，并能够致使应用顺序中的值递增或递减，从而致使无提醒毛病。运用像 num += 1 而不是 num++ 或 num ++ 如许的语句来转变你的值也更具有表现力。不许可一元递增和递减语句也会阻挠您无意中预先递增/递减值，这也会致使顺序中的不测行动。

// bad
const array = [1, 2, 3];
let num = 1;
num++;
--num;
let sum = 0;
let truthyCount = 0;
for (let i = 0; i < array.length; i++) { 
  let value = array[i]; 
  sum += value;
   if (value) {
      truthyCount++; 
    } 
 }
// good 
const array = [1, 2, 3]; 
let num = 1; num += 1; num -= 1; 
const sum = array.reduce((a, b) => a + b, 0);
const truthyCount = array.filter(Boolean).length;

比较运算符 Comparison Operators 和 等号 Equality

运用 === 和 !== 优先于 == 和 !=。

eslint: eqeqeq

关于布尔值运用简写，但关于字符串和数字运用显式比较。

// bad
if (isValid === true) {
// ...
}
// good
if (isValid) {
// ...
}
// bad
if (name) {
// ...
}
// good
if (name !== '') {
// ...
}
// bad
if (collection.length) {
// ...
}
// good
if (collection.length > 0) {
// ...
}

在 case 和 default 子句中，运用大括号来建立包括词法声明的语句块(比方 let, const, function, 和 class).

eslint: no-case-declarations

// bad
switch (foo) {
  case 1:
    let x = 1;
  break;
  case 2:
    const y = 2;
  break;
  case 3:
    function f() {
      // ...
    }
  break;
default:
  class C {}
}
// good
switch (foo) {
  case 1: {
    let x = 1;
    break;
  }
  case 2: {
    const y = 2;
    break;
  }
  case 3: {
    function f() {
      // ...
    }
    break;
  }
  case 4:
    bar();
    break;
  default: {
    class C {}
  }
}

三元表达式不应当嵌套，一般写成单行表达式。

eslint: no-nested-ternary

// bad
const foo = maybe1 > maybe2
? "bar"
: value1 > value2 ? "baz" : null;
// 拆分红2个星散的三元表达式
const maybeNull = value1 > value2 ? 'baz' : null;
// better
const foo = maybe1 > maybe2
? 'bar'
: maybeNull;
// best
const foo = maybe1 > maybe2 ? 'bar' : maybeNull;

防备不必要的三元表达式语句。

eslint: no-unneeded-ternary

/ bad
const foo = a ? a : b;
const bar = c ? true : false;
const baz = c ? false : true;
// good
const foo = a || b;
const bar = !!c;
const baz = !c;

当运算符夹杂在一个语句中时，请将其放在括号内。夹杂算术运算符时，不要将 * 和 % 与 + ， -，，/ 夹杂在一起。

eslint: no-mixed-operators

这能够进步可读性，并清楚展示开发者的企图。

/ bad
const foo = a && b < 0 || c > 0 || d + 1 === 0;
// bad
const bar = a ** b - 5 % d;
// bad
if (a || b && c) {
return d;
}
// good
const foo = (a && b < 0) || c > 0 || (d + 1 === 0);
// good
const bar = (a ** b) - (5 % d);
// good
if ((a || b) && c) {
return d;
}
// good
const bar = a + b / c * d;

代码块 Blocks

运用大括号包裹一切的多行代码块。

eslint: nonblock-statement-body-position

// bad
if (test)
  return false;
// good
if (test) return false;
// good
if (test) {
  return false;
}
// bad
function foo() { return false; }
// good
function bar() {
  return false;
}

假如经由过程 if 和 else 运用多行代码块，把 else 放在 if 代码块闭合括号的统一行。

eslint: brace-style

// bad
if (test) {
  thing1();
  thing2();
}
else {
  thing3();
}
// good
if (test) {
  thing1();
  thing2();
} else {
  thing3();
}

假如一个 if 块老是实行一个 return 语句，背面的 else 块是不必要的。在 else if 块中的 return，能够分红多个 if 块来 return 。

eslint: no-else-return

// bad
function foo() {
  if (x) {
    return x;
  } else {
    return y;
  }
}
// bad
function cats() {
  if (x) {
    return x;
  } else if (y) {
    return y;
  }
}
// bad
function dogs() {
  if (x) {
    return x;
  } else {
  if (y) {
    return y;
  }
}
}
// good
function foo() {
  if (x) {
    return x;
  }
return y;
}
// good
function cats() {
  if (x) {
    return x;
  }
  if (y) {
    return y;
  }
}
//good
function dogs(x) {
  if (x) {
    if (z) {
      return y;
  }
} else {
  return z;
  }
}

掌握语句 Control Statements

假如您的掌握语句(if, while 的)太长或凌驾最大行长度，那末每一个（分组）前提能够放零丁一行。逻辑运算符应当放在每行肇端处。

// bad
if ((foo === 123 || bar === 'abc') && doesItLookGoodWhenItBecomesThatLong() && isThisReallyHappening()) {
 thing1();
}
// bad
if (foo === 123 &&
  bar === 'abc') {
  thing1();
}
// bad
if (foo === 123
  && bar === 'abc') {
  thing1();
}
// bad
if (
  foo === 123 &&
  bar === 'abc'
) {
  thing1();
}
// good
if (
  foo === 123
  && bar === 'abc'
) {
  thing1();
}
// good
if (
  (foo === 123 || bar === "abc")
  && doesItLookGoodWhenItBecomesThatLong()
  && isThisReallyHappening()
) {
  thing1();
}
// good
if (foo === 123 && bar === 'abc') {
  thing1();
}

解释 Comments

多行解释运用 /* … /。

/**
* @param {Grid} grid 须要兼并的Grid
* @param {Array} cols 须要兼并列的Index(序号)数组；从0最先计数，序号也包括。
* @param {Boolean} isAllSome 是不是2个tr的cols必需完成一样才举行兼并。true：完成一样；false(默许)：不完全一样
* @return void
* @author 单志永 2018/11/8
*/
function mergeCells(grid, cols, isAllSome) {
    // Do Something
}

单行解释运用 // 。将单行解释放在需解释的语句上方。在解释之前安排一个空行，除非它位于代码块的第一行。

// bad
const active = true;  // is current tab
// good
// is current tab
const active = true;
// bad
function getType() {
  console.log('fetching type...');
  // set the default type to 'no type'
  const type = this.type || 'no type';
  return type;
}
// good
function getType() {
  console.log('fetching type...');
  // set the default type to 'no type'
  const type = this.type || 'no type';
  return type;
}
// also good
function getType() {
  // set the default type to 'no type'
  const type = this.type || 'no type';
  return type;
}

一切解释符和解释内容用一个空格离隔，让它更轻易浏览。

eslint: spaced-comment

// bad
//is current tab
const active = true;
// good
// is current tab
const active = true;
// bad
/**
*make() returns a new element
*based on the passed-in tag name
*/
function make(tag) {
// ...
return element;
}
// good
/**
* make() returns a new element
* based on the passed-in tag name
*/
function make(tag) {
// ...
return element;
}

给解释增添 FIXME 或 TODO 的前缀，能够协助其他开发者疾速相识这个是不是是一个须要从新复查的题目，或是你正在为须要处理的题目提出处理方案。这将有别于通例解释，因为它们是可操纵的。运用 FIXME – need to figure this out 或许 TODO – need to implement。

运用 // FIXME: 来标识须要修改的题目。注：假如代码中有该标识，申明标识处代码须要修改，以至代码是毛病的，不能事情，须要修复，怎样修改会在申明中简单申明。

lass Calculator extends Abacus {
  constructor() {
    super();
    // FIXME: shouldn’t use a global here
    total = 0;
  }
}

运用 // TODO: 来标识须要完成的题目。注：假如代码中有该标识，申明在标识处有功用代码待编写，待完成的功用在申明中会简单申明。

class Calculator extends Abacus {
  constructor() {
    super();
    // TODO: total should be configurable by an options param
    this.total = 0;
  }
}

空格 Whitespace

运用 2 个空格作为缩进

// bad
function foo() {
∙∙∙∙let name;
}
// bad
function bar() {
∙let name;
}
// good
function baz() {
∙∙let name;
}

在大括号前安排 1 个空格。

eslint: space-before-blocks jscs: requireSpaceBeforeBlockStatements

// bad
function test(){
  console.log('test');
}
// good
function test() {
  console.log('test');
}
// bad
dog.set('attr',{
  age: '1 year',
  breed: 'Bernese Mountain Dog',
});
// good
dog.set('attr', {
  age: '1 year',
  breed: 'Bernese Mountain Dog',
});

在掌握语句（if、while 等）的小括号前放一个空格。在函数挪用及声明中，不在函数的参数列表前加空格。

eslint: keyword-spacing jscs: requireSpaceAfterKeywords

// bad
if(isJedi) {
  fight ();
}
// good
if (isJedi) {
  fight();
}
// bad
function fight () {
  console.log ('Swooosh!');
}
// good
function fight() {
  console.log('Swooosh!');
}

运用空格把运算符离隔。

eslint: space-infix-ops jscs: requireSpaceBeforeBinaryOperators, requireSpaceAfterBinaryOperators

// bad
const x=y+5;
// good
const x = y + 5;

在文件末端插进去一个空行。

eslint: eol-last

// bad
import { es6 } from './AirbnbStyleGuide';
// ...
export default es6;

// bad
import { es6 } from './AirbnbStyleGuide';
// ...
export default es6;

// good
import { es6 } from './AirbnbStyleGuide';
// ...
export default es6;

长要领链式挪用时运用缩进（2个以上的要领链式挪用）。运用一个点 . 开首，强调该行是一个要领挪用，不是一个新的声明。

eslint: newline-per-chained-call no-whitespace-before-property

// bad
$('#items').find('.selected').highlight().end().find('.open').updateCount();

// bad
$('#items').
find('.selected').
highlight().
end().
find('.open').
updateCount();

// good
$('#items')
.find('.selected')
.highlight()
.end()
.find('.open')
.updateCount();

// bad
const leds = stage.selectAll('.led').data(data).enter().append('svg:svg').classed('led', true)
.attr('width', (radius + margin) * 2).append('svg:g')
.attr('transform', `translate(${radius + margin},${radius + margin})`)
.call(tron.led);
// good
const leds = stage.selectAll('.led')
.data(data)
.enter().append('svg:svg')
.classed('led', true)
.attr('width', (radius + margin) * 2)
.append('svg:g')
.attr('transform', `translate(${radius + margin},${radius + margin})`)
.call(tron.led);

// good
const leds = stage.selectAll('.led').data(data);

不要在圆括号内加空格。

// bad
function bar( foo ) {
  return foo;
}
// good
function bar(foo) {
  return foo;
}
// bad
if ( foo ) {
  console.log(foo);
}
// good
if (foo) {
  console.log(foo);
}

不要在中括号内增添空格。

eslint: array-bracket-spacing jscs: disallowSpacesInsideArrayBrackets

// bad
const foo = [ 1, 2, 3 ];
console.log(foo[ 0 ]);
// good
const foo = [1, 2, 3];
console.log(foo[0]);

在大括号内增添空格

// bad
const foo = {clark: 'kent'};
// good
const foo = { clark: 'kent' };

范例转换 Type Casting & Coercion

在声明语句的最先处就实行强迫范例转换.

字符串:

eslint: no-new-wrappers

// => this.reviewScore = 9;
// bad
const totalScore = new String(this.reviewScore); // typeof totalScore 是 "object" 而不是 "string"
// bad
const totalScore = this.reviewScore + ''; // 挪用 this.reviewScore.valueOf()
// bad
const totalScore = this.reviewScore.toString(); // 不能保证返回一个字符串
// good
const totalScore = String(this.reviewScore);

使数字: 运用 Number 举行转换，而 parseInt 则一直以基数剖析字串。

eslint: radix no-new-wrappers

const inputValue = '4';
// bad
const val = new Number(inputValue);
// bad
const val = +inputValue;
// bad
const val = inputValue >> 0;
// bad
const val = parseInt(inputValue);
// good
const val = Number(inputValue);
// good
const val = parseInt(inputValue, 10);

布尔值:

eslint: no-new-wrappers

const age = 0;
// bad
const hasAge = new Boolean(age);
// good
const hasAge = Boolean(age);
// best
const hasAge = !!age;

定名划定规矩 Naming Conventions

防备运用单字母称号。使你的定名具有描述性。

eslint: id-length

// bad
function q() {
// ...
}
// good
function query() {
// ...
}

当定名对象，函数和实例时运用驼峰式定名。

eslint: camelcase jscs: requireCamelCaseOrUpperCaseIdentifiers

// bad
const OBJEcttsssss = {};
const this_is_my_object = {};
function c() {}
// good
const thisIsMyObject = {};
function thisIsMyFunction() {}

当定名组织函数或类的时刻运用 PascalCase 式定名，（注：即单词首字母大写）。

eslint: new-cap

// bad
function user(options) {
  this.name = options.name;
}
const bad = new user({
  name: 'nope',
});
// good
class User {
  constructor(options) {
    this.name = options.name;
  }
}
const good = new User({
  name: 'yup',
});

当 导出(export) 一个默许函数时运用驼峰式定名。你的文件名应当和你的函数的名字一致。

function makeStyleGuide() {
// ...
}
export default makeStyleGuide;

当导出一个 组织函数 / 类 / 单例 / 函数库 / 纯对象时运用 PascalCase 式定名，（愚人船埠注：即单词首字母大写）。

const AirbnbStyleGuide = {
  es6: {
    },
};
export default AirbnbStyleGuide;

存取器 Accessors

属性的存取器函数不是必需的。

别运用 JavaScript 的 getters/setters，因为它们会致使意想不到的副作用，而且很难测试，保护和明白。相反，假如要运用存取器函数，运用 getVal() 及 setVal(‘hello’)。

// bad
class Dragon {
  get age() {
    // ...
  }
  set age(value) {
    // ...
  }
}
// good
class Dragon {
  getAge() {
    // ...
  }
  setAge(value) {
    // ...
  }
}

假如属性/要领是一个 boolean, 运用 isVal() 或 hasVal() 要领。

// bad
if (!dragon.age()) {
  return false;
}
// good
if (!dragon.hasAge()) {
  return false;
}

)

更多前端资本请关注微信民众号“前端陌上寒”