摘要：原文鏈接命名規(guī)范標(biāo)準(zhǔn)變量采用駝峰式命名在變量名中全大寫(xiě)常量全大寫(xiě)，用下劃線連接構(gòu)造函數(shù)，大寫(xiě)第一個(gè)字母對(duì)象必須以開(kāi)頭命名局部變量命名規(guī)范表示字符串?？蓤?zhí)行不可執(zhí)行判斷是否含有某個(gè)值，函數(shù)返回一個(gè)布爾值。

原文鏈接

標(biāo)準(zhǔn)變量采用駝峰式命名

‘ID’在變量名中全大寫(xiě)

常量全大寫(xiě)，用下劃線連接構(gòu)造函數(shù)，大寫(xiě)第一個(gè)字母

jquery對(duì)象必須以’$’開(kāi)頭命名

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：表示數(shù)字。例如：nPage，nTotal;

b：表示邏輯。例如：bChecked，bHasLogin;

a：表示數(shù)組。例如：aList，aGroup;

r：表示正則表達(dá)式。例如：rDomain，rEmail;

f：表示函數(shù)。例如：fGetHtml，fInit;

o：表示以上未涉及到的其他對(duì)象，例如：oButton，oDate;

小駝峰命名法，可使用常見(jiàn)動(dòng)詞約定：

can 判斷是否可執(zhí)行某個(gè)動(dòng)作，函數(shù)返回一個(gè)布爾值。true：可執(zhí)行；false：不可執(zhí)行

has 判斷是否含有某個(gè)值， 函數(shù)返回一個(gè)布爾值。true：含有此值；false：不含有此值

is 判斷是否為某個(gè)值，函數(shù)返回一個(gè)布爾值。true：為某個(gè)值；false：不為某個(gè)值

get 獲取某個(gè)之，函數(shù)返回一個(gè)非布爾值

set 設(shè)置某個(gè)值，無(wú)返回值、返回是否設(shè)置成功或者返回鏈?zhǔn)綄?duì)象load 加載某些數(shù)據(jù),無(wú)返回值或者返回是否加載完成的結(jié)果

// 是否可閱讀
function canRead() {
 return true;
}
// 獲取名稱
function getName() {
 return this.name;
}

eslint: prefer-const, no-const-assign

這可以確保你無(wú)法對(duì)引用重新分配，重新分配可能會(huì)導(dǎo)致 bug 和難以理解的代碼。

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

eslint: no-var jscs: disallowVar

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

eslint: no-new-object

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

它們?cè)试S你在一個(gè)地方定義一個(gè)對(duì)象的所有屬性。

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,
};

更容易看出哪些屬性在使用速記語(yǔ)法

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

一般來(lái)說(shuō)，我們認(rèn)為比較容易閱讀。它改進(jìn)了語(yǔ)法高亮顯示，并且更容易被許多JS引擎優(yōu)化。

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

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];

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

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

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;

您可以隨著時(shí)間的推移添加新的屬性或更改排序，而不會(huì)改變調(diào)用時(shí)的位置。

// bad
function processInput(input) {
  return [left, right, top, bottom];
}
// 調(diào)用者需要考慮返回?cái)?shù)據(jù)的順序
const [left, __, top] = processInput(input);
// good
function processInput(input) {
  return { left, right, top, bottom };
}
// 調(diào)用者只選擇他們需要的數(shù)據(jù)
const { left, top } = processInput(input);

eslint: quotes jscs: validateQuoteMarks

// bad
const name = "Capt. Janeway";
// bad - 模板字面量應(yīng)該包含插值或換行符
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}?`;
}

eslint: no-eval

eslint: func-style jscs: disallowFunctionDeclarations

函數(shù)聲明很容易被提升（Hoisting）,這對(duì)可讀性和可維護(hù)性來(lái)說(shuō)都是不利的;

/ bad
function foo() {
  // ...
}
// bad
const foo = function () {
  // ...
};
// good 
// 用明顯區(qū)別于變量引用調(diào)用的詞匯命名
const short = function longUniqueMoreDescriptiveLexicalFoo() {
  // ...
};

eslint: wrap-iife jscs: requireParenthesesAroundIIFE

一個(gè)立即調(diào)用函數(shù)表達(dá)式是一個(gè)多帶帶的單元 – 將函數(shù)表達(dá)式包裹在括號(hào)中，后面再跟一個(gè)調(diào)用括號(hào)，這看上去很緊湊。

// 立即調(diào)用函數(shù)表達(dá)式 (IIFE)
(function () {
console.log("Welcome to the Internet. Please follow me.");
}());

使用 … 能明確你要傳入的參數(shù)。另外 rest（剩余）參數(shù)是一個(gè)真正的數(shù)組，而 arguments 是一個(gè)類數(shù)組（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) {
  // 更加糟糕: 如果參數(shù) opts 是 falsy(假值) 的話，它將被設(shè)置為一個(gè)對(duì)象，
  // 這可能是你想要的，但它可以引起一些小的錯(cuò)誤。
  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

操作作為參數(shù)傳入的對(duì)象，可能會(huì)在調(diào)用原始對(duì)象時(shí)造成不必要的變量副作用。（對(duì)象是引用類型）

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

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

它創(chuàng)建了一個(gè)在 this 上下文中執(zhí)行的函數(shù)的版本，這通常是你想要的，而且這樣的寫(xiě)法更為簡(jiǎn)潔。

// 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;
});

// 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;
};

// 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;
  }
}

因?yàn)?extends 是一個(gè)內(nèi)置的原型繼承方法并且不會(huì)破壞 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; }
}

// 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;

這樣能確保你只有一個(gè)默認(rèn) export(導(dǎo)出)。

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

雖然一行代碼簡(jiǎn)潔明了，但有一個(gè)明確的 import(導(dǎo)入) 方法和一個(gè)明確的 export(導(dǎo)出) 方法，使事情能保持一致。

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

// 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";

eslint: import/no-mutable-exports

一般應(yīng)該避免可變性，特別是在導(dǎo)出可變綁定時(shí)。雖然一些特殊情況下，可能需要這種技術(shù)，但是一般而言，只應(yīng)該導(dǎo)出常量引用。

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

eslint: import/prefer-default-export

為了鼓勵(lì)更多的文件只有一個(gè) export(導(dǎo)出)，這有利于模塊的可讀性和可維護(hù)性。

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

eslint: import/first

由于 import 被提升，保持他們?cè)陧敳浚乐挂馔獾男袨椤?/pre>
// bad
import foo from "foo";
foo.init();
import bar from "bar";
// good
import foo from "foo";
import bar from "bar";
foo.init();

多行導(dǎo)入應(yīng)該像多行數(shù)組和對(duì)象字面量一樣進(jìn)行縮進(jìn)。
// bad
import {longNameA, longNameB, longNameC, longNameD, longNameE} from "path";
// good
import {
longNameA,
longNameB,
longNameC,
longNameD,
longNameE,
} from "path";
屬性 Properties
使用 點(diǎn)語(yǔ)法(.) 來(lái)訪問(wèn)對(duì)象的屬性。
eslint: dot-notation jscs: requireDotNotation
const luke = {
jedi: true,
age: 28,
};
// bad
const isJedi = luke["jedi"];
// good
const isJedi = luke.jedi;
當(dāng)通過(guò)變量訪問(wèn)屬性時(shí)使用中括號(hào) []。
const luke = {
jedi: true,
age: 28,
};
function getProp(prop) {
return luke[prop];
}
const isJedi = getProp("jedi");

求冪時(shí)使用求冪運(yùn)算符 ** 。
eslint: no-restricted-properties.
// bad
const binary = Math.pow(2, 10);
// good
const binary = 2 ** 10;
變量 Variables
總是使用 const 或 let 來(lái)聲明變量。 不這樣做會(huì)導(dǎo)致產(chǎn)生全局變量。 我們希望避免污染全局命名空間。
eslint: no-undef prefer-const
// bad
superPower = new SuperPower();
// good
const superPower = new SuperPower();

將所有的 const 和 let 分組 。
當(dāng)你需要把已分配的變量分配給一個(gè)變量時(shí)非常有用
// 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;
變量不要鏈?zhǔn)劫x值。
eslint: no-multi-assign
鏈接變量賦值會(huì)創(chuàng)建隱式全局變量。
// bad
(function example() {
// JavaScript 將其解析為
// let a = ( b = ( c = 1 ) );
// let關(guān)鍵字只適用于變量a;
// 變量b和c變成了全局變量。
let a = b = c = 1;
}());
console.log(a); // 拋出 ReferenceError（引用錯(cuò)誤）
console.log(b); // 1
console.log(c); // 1
// good
(function example() {
let a = 1;
let b = a;
let c = a;
}());
console.log(a); // 拋出 ReferenceError（引用錯(cuò)誤）
console.log(b); // 拋出 ReferenceError（引用錯(cuò)誤）
console.log(c); // 拋出 ReferenceError（引用錯(cuò)誤）
// 同樣適用于 `const`
避免使用一元遞增和遞減運(yùn)算符(++, -–)。
根據(jù) eslint 文檔，一元遞增和遞減語(yǔ)句會(huì)受到自動(dòng)插入分號(hào)的影響，并可能導(dǎo)致應(yīng)用程序中的值遞增或遞減，從而導(dǎo)致無(wú)提示錯(cuò)誤。使用像 num += 1 而不是 num++ 或 num ++ 這樣的語(yǔ)句來(lái)改變你的值也更具有表現(xiàn)力。不允許一元遞增和遞減語(yǔ)句也會(huì)阻止您無(wú)意中預(yù)先遞增/遞減值，這也會(huì)導(dǎo)致程序中的意外行為。
// 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;
比較運(yùn)算符 Comparison Operators 和 等號(hào) Equality
使用 === 和 !== 優(yōu)先于 == 和 !=。
eslint: eqeqeq
對(duì)于布爾值使用簡(jiǎn)寫(xiě)，但對(duì)于字符串和數(shù)字使用顯式比較。
// bad
if (isValid === true) {
// ...
}
// good
if (isValid) {
// ...
}
// bad
if (name) {
// ...
}
// good
if (name !== "") {
// ...
}
// bad
if (collection.length) {
// ...
}
// good
if (collection.length > 0) {
// ...
}
在 case 和 default 子句中，使用大括號(hào)來(lái)創(chuàng)建包含詞法聲明的語(yǔ)句塊(例如 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 {}
  }
}
三元表達(dá)式不應(yīng)該嵌套，通常寫(xiě)成單行表達(dá)式。
eslint: no-nested-ternary
// bad
const foo = maybe1 > maybe2
? "bar"
: value1 > value2 ? "baz" : null;
// 拆分成2個(gè)分離的三元表達(dá)式
const maybeNull = value1 > value2 ? "baz" : null;
// better
const foo = maybe1 > maybe2
? "bar"
: maybeNull;
// best
const foo = maybe1 > maybe2 ? "bar" : maybeNull;

避免不必要的三元表達(dá)式語(yǔ)句。
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;
當(dāng)運(yùn)算符混合在一個(gè)語(yǔ)句中時(shí)，請(qǐng)將其放在括號(hào)內(nèi)?；旌纤阈g(shù)運(yùn)算符時(shí)，不要將 *?和 % 與 + ， -，，/ 混合在一起。
eslint: no-mixed-operators
這可以提高可讀性，并清晰展現(xiàn)開(kāi)發(fā)者的意圖。
/ 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
使用大括號(hào)包裹所有的多行代碼塊。
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;
}
如果通過(guò) if 和 else 使用多行代碼塊，把 else 放在 if 代碼塊閉合括號(hào)的同一行。
eslint: brace-style
// bad
if (test) {
  thing1();
  thing2();
}
else {
  thing3();
}
// good
if (test) {
  thing1();
  thing2();
} else {
  thing3();
}

如果一個(gè) if 塊總是執(zhí)行一個(gè) return 語(yǔ)句，后面的 else 塊是不必要的。在 else if 塊中的 return，可以分成多個(gè) if 塊來(lái) 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;
  }
}
控制語(yǔ)句 Control Statements
如果您的控制語(yǔ)句(if, while 的)太長(zhǎng)或超過(guò)最大行長(zhǎng)度，那么每個(gè)（分組）條件可以放多帶帶一行。邏輯運(yùn)算符應(yīng)該放在每行起始處。
// 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(序號(hào))數(shù)組；從0開(kāi)始計(jì)數(shù)，序號(hào)也包含。
* @param {Boolean} isAllSome 是否2個(gè)tr的cols必須完成一樣才能進(jìn)行合并。true：完成一樣；false(默認(rèn))：不完全一樣
* @return void
* @author 單志永 2018/11/8
*/
function mergeCells(grid, cols, isAllSome) {
    // Do Something
}
單行注釋使用 // 。將單行注釋放在需注釋的語(yǔ)句上方。在注釋之前放置一個(gè)空行，除非它位于代碼塊的第一行。
// 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;
}
所有注釋符和注釋內(nèi)容用一個(gè)空格隔開(kāi)，讓它更容易閱讀。
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 的前綴，可以幫助其他開(kāi)發(fā)者快速了解這個(gè)是否是一個(gè)需要重新復(fù)查的問(wèn)題，或是你正在為需要解決的問(wèn)題提出解決方案。這將有別于常規(guī)注釋，因?yàn)樗鼈兪强刹僮鞯?。使?FIXME – need to figure this out 或者 TODO – need to implement。
使用 // FIXME: 來(lái)標(biāo)識(shí)需要修正的問(wèn)題。注：如果代碼中有該標(biāo)識(shí)，說(shuō)明標(biāo)識(shí)處代碼需要修正，甚至代碼是錯(cuò)誤的，不能工作，需要修復(fù)，如何修正會(huì)在說(shuō)明中簡(jiǎn)略說(shuō)明。
lass Calculator extends Abacus {
  constructor() {
    super();
    // FIXME: shouldn’t use a global here
    total = 0;
  }
}
使用 // TODO: 來(lái)標(biāo)識(shí)需要實(shí)現(xiàn)的問(wèn)題。注：如果代碼中有該標(biāo)識(shí)，說(shuō)明在標(biāo)識(shí)處有功能代碼待編寫(xiě)，待實(shí)現(xiàn)的功能在說(shuō)明中會(huì)簡(jiǎn)略說(shuō)明。
class Calculator extends Abacus {
  constructor() {
    super();
    // TODO: total should be configurable by an options param
    this.total = 0;
  }
}
空格 Whitespace
使用 2 個(gè)空格作為縮進(jìn)
// bad
function foo() {
????let name;
}
// bad
function bar() {
?let name;
}
// good
function baz() {
??let name;
}
在大括號(hào)前放置 1 個(gè)空格。
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",
});
在控制語(yǔ)句（if、while 等）的小括號(hào)前放一個(gè)空格。在函數(shù)調(diào)用及聲明中，不在函數(shù)的參數(shù)列表前加空格。
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!");
}
使用空格把運(yùn)算符隔開(kāi)。
eslint: space-infix-ops jscs: requireSpaceBeforeBinaryOperators, requireSpaceAfterBinaryOperators
// bad
const x=y+5;
// good
const x = y + 5;

在文件末尾插入一個(gè)空行。
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;
長(zhǎng)方法鏈?zhǔn)秸{(diào)用時(shí)使用縮進(jìn)（2個(gè)以上的方法鏈?zhǔn)秸{(diào)用）。使用一個(gè)點(diǎn) . 開(kāi)頭，強(qiáng)調(diào)該行是一個(gè)方法調(diào)用，不是一個(gè)新的聲明。
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);
不要在圓括號(hào)內(nèi)加空格。
// bad
function bar( foo ) {
  return foo;
}
// good
function bar(foo) {
  return foo;
}
// bad
if ( foo ) {
  console.log(foo);
}
// good
if (foo) {
  console.log(foo);
}
不要在中括號(hào)內(nèi)添加空格。
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]);
在大括號(hào)內(nèi)添加空格
// bad
const foo = {clark: "kent"};
// good
const foo = { clark: "kent" };
類型轉(zhuǎn)換 Type Casting & Coercion
在聲明語(yǔ)句的開(kāi)始處就執(zhí)行強(qiáng)制類型轉(zhuǎn)換.
字符串:
eslint: no-new-wrappers
// => this.reviewScore = 9;
// bad
const totalScore = new String(this.reviewScore); // typeof totalScore 是 "object" 而不是 "string"
// bad
const totalScore = this.reviewScore + ""; // 調(diào)用 this.reviewScore.valueOf()
// bad
const totalScore = this.reviewScore.toString(); // 不能保證返回一個(gè)字符串
// good
const totalScore = String(this.reviewScore);
使數(shù)字: 使用 Number 進(jìn)行轉(zhuǎn)換，而 parseInt 則始終以基數(shù)解析字串。
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;
命名規(guī)則 Naming Conventions
避免使用單字母名稱。使你的命名具有描述性。
eslint: id-length
// bad
function q() {
// ...
}
// good
function query() {
// ...
}
當(dāng)命名對(duì)象，函數(shù)和實(shí)例時(shí)使用駝峰式命名。
eslint: camelcase jscs: requireCamelCaseOrUpperCaseIdentifiers
// bad
const OBJEcttsssss = {};
const this_is_my_object = {};
function c() {}
// good
const thisIsMyObject = {};
function thisIsMyFunction() {}

當(dāng)命名構(gòu)造函數(shù)或類的時(shí)候使用 PascalCase 式命名，（注：即單詞首字母大寫(xiě)）。
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",
});
當(dāng) 導(dǎo)出(export) 一個(gè)默認(rèn)函數(shù)時(shí)使用駝峰式命名。你的文件名應(yīng)該和你的函數(shù)的名字一致。
function makeStyleGuide() {
// ...
}
export default makeStyleGuide;

當(dāng)導(dǎo)出一個(gè) 構(gòu)造函數(shù) / 類 / 單例 / 函數(shù)庫(kù) / 純對(duì)象時(shí)使用 PascalCase 式命名，（愚人碼頭注：即單詞首字母大寫(xiě)）。
const AirbnbStyleGuide = {
  es6: {
    },
};
export default AirbnbStyleGuide;

存取器 Accessors
屬性的存取器函數(shù)不是必須的。
別使用 JavaScript 的 getters/setters，因?yàn)樗鼈儠?huì)導(dǎo)致意想不到的副作用，而且很難測(cè)試，維護(hù)和理解。相反，如果要使用存取器函數(shù)，使用 getVal() 及 setVal(‘hello’)。
// bad
class Dragon {
  get age() {
    // ...
  }
  set age(value) {
    // ...
  }
}
// good
class Dragon {
  getAge() {
    // ...
  }
  setAge(value) {
    // ...
  }
}
如果屬性/方法是一個(gè) boolean, 使用 isVal() 或 hasVal() 方法。
// bad
if (!dragon.age()) {
  return false;
}
// good
if (!dragon.hasAge()) {
  return false;
}
)
更多前端資源請(qǐng)關(guān)注微信公眾號(hào)“前端陌上寒”