Javascript中編碼規范是什么

發布時間：2020-12-03 10:16:34 來源：億速云閱讀：149 作者：小新欄目：web開發

這篇文章主要介紹了Javascript中編碼規范是什么，具有一定借鑒價值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。

命名規范

標準變量采用駝峰式命名
‘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,
};

用對象展開操作符淺復制對象，優先于Object.assign 。使用對象剩余操作符來獲得一個省略某些屬性的新對象。

// very bad
const original = { a: 1, b: 2 };
const copy = Object.assign(original, { c: 3 }); //  `original` 是可變的 ?_?
delete copy.a; // so does this
// bad
const original = { a: 1, b: 2 };
const copy = Object.assign({}, original, { c: 3 }); // copy => { a: 1, b: 2, c: 3 }
// good
const original = { a: 1, b: 2 };
const copy = { ...original, c: 3 }; // copy => { a: 1, b: 2, c: 3 }
const { a, ...noA } = copy; // noA => { b: 2, c: 3 }

數組 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);

布爾值: