原文链接命名规范标准变量采用驼峰式命名‘ID’在变量名中全大写常量全大写，用下划线连接构造函数，大写第一个字母jquery对象必须以’$’开头命名let thisIsMyName;let goodID;let reportURL;let AndroidVersion;let iOSVersion;let MAX_COUNT = 10;function Person(name) {this.name = name;}// not goodlet body = $(‘body’);// goodlet $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 和难以理解的代码。// badvar a = 1;var b = 2;// goodconst a = 1;const b = 2;如果你一定需要可变动的引用，使用 let 代替 var 。eslint: no-var jscs: disallowVar// badvar count = 1;if (true) {count += 1;}// good, 使用 let.let count = 1;if (true) {count += 1;}对象Objects使用字面量语法创建对象。eslint: no-new-object// badconst item = new Object();// goodconst item = {};当创建带有动态属性名称的对象时使用计算的属性名称。它们允许你在一个地方定义一个对象的所有属性。function getKey(k) { return a key named k;}// badconst obj = {id: 5,name: ‘San Francisco’,};obj[getKey(’enabled’)] = true;// goodconst obj = { id: 5, name: ‘San Francisco’, [getKey(’enabled’)]: true,};使用对象方法速记语法。eslint: object-shorthand jscs: requireEnhancedObjectLiterals// badconst atom = {value: 1,addValue: function (value) { return atom.value + value; },};// goodconst atom = {value: 1,addValue(value) { return atom.value + value; },};使用对象属性速记语法。eslint: object-shorthand jscs: requireEnhancedObjectLiteralsconst lukeSkywalker = ‘Luke Skywalker’;// badconst obj = { lukeSkywalker: lukeSkywalker,};// goodconst obj = { lukeSkywalker,};将速记属性分组写在对象声明的开始处更容易看出哪些属性在使用速记语法const anakinSkywalker = ‘Anakin Skywalker’;const lukeSkywalker = ‘Luke Skywalker’;// badconst obj = {episodeOne: 1,twoJediWalkIntoACantina: 2,lukeSkywalker,episodeThree: 3,mayTheFourth: 4,anakinSkywalker,};// goodconst obj = {lukeSkywalker,anakinSkywalker,episodeOne: 1,twoJediWalkIntoACantina: 2,episodeThree: 3,mayTheFourth: 4,};只用引号引无效标识符的属性。eslint: quote-props jscs: disallowQuotedKeysInObjects一般来说，我们认为比较容易阅读。它改进了语法高亮显示，并且更容易被许多JS引擎优化。// badconst bad = {‘foo’: 3,‘bar’: 4,‘data-blah’: 5,};// goodconst good = {foo: 3,bar: 4,‘data-blah’: 5,};用对象展开操作符浅复制对象，优先于Object.assign 。使用对象剩余操作符来获得一个省略某些属性的新对象。// very badconst original = { a: 1, b: 2 };const copy = Object.assign(original, { c: 3 }); // original 是可变的 _delete copy.a; // so does this// badconst original = { a: 1, b: 2 };const copy = Object.assign({}, original, { c: 3 }); // copy => { a: 1, b: 2, c: 3 }// goodconst 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// badconst items = new Array();// goodconst items = [];使用数组展开操作符 … 复制数组。// badconst len = items.length;const itemsCopy = [];let i;for (i = 0; i < len; i += 1) {itemsCopy[i] = items[i];}// goodconst itemsCopy = […items];使用展开操作符 … 代替 Array.from，来将一个类数组(array-like) 对象转换成数组。const foo = document.querySelectorAll(’.foo’);// goodconst nodes = Array.from(foo);// bestconst nodes = […foo];实用 Array.from 代替展开操作符 … 来映射迭代，因为它避免了创建媒介数组。// badconst baz = […foo].map(bar);// goodconst baz = Array.from(foo, bar);解构 Destructuring当访问和使用对象的多个属性时，请使用对象解构。eslint: prefer-destructuring jscs: requireObjectDestructuring// badfunction getFullName(user) { const firstName = user.firstName; const lastName = user.lastName; return firstName lastName;}// goodfunction getFullName(user) { const { firstName, lastName } = user; return firstName lastName;}// bestfunction getFullName({ firstName, lastName }) { return firstName lastName;}使用数组解构。eslint: prefer-destructuring jscs: requireArrayDestructuringconst arr = [1, 2, 3, 4];// badconst first = arr[0];const second = arr[1];// goodconst [first, second] = arr;使用对象解构来实现多个返回值，而不是数组解构。jscs: disallowArrayDestructuringReturn您可以随着时间的推移添加新的属性或更改排序，而不会改变调用时的位置。// badfunction processInput(input) { return [left, right, top, bottom];}// 调用者需要考虑返回数据的顺序const [left, __, top] = processInput(input);// goodfunction processInput(input) { return { left, right, top, bottom };}// 调用者只选择他们需要的数据const { left, top } = processInput(input);字符串 Strings字符串使用单引号 ‘’。eslint: quotes jscs: validateQuoteMarks// badconst name = “Capt. Janeway”;// bad - 模板字面量应该包含插值或换行符const name = Capt. Janeway;// goodconst name = ‘Capt. Janeway’;以编程方式构建字符串时，请使用模板字符串而不是字符串连接。eslint: prefer-template template-curly-spacing jscs: requireTemplateStrings/ badfunction sayHi(name) { return ‘How are you, ’ + name + ‘?’;}// badfunction sayHi(name) { return [‘How are you, ‘, name, ‘?’].join();}// badfunction sayHi(name) { return How are you, ${ name }?;}// goodfunction sayHi(name) { return How are you, name?;}永远不要在字符串上使用 eval() ，它会打开太多的漏洞。eslint: no-eval函数 Functions使用命名函数表达式而不是函数声明。eslint: func-style jscs: disallowFunctionDeclarations函数声明很容易被提升（Hoisting）,这对可读性和可维护性来说都是不利的;/ badfunction foo() { // …}// badconst 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）。// badfunction concatenateAll() { const args = Array.prototype.slice.call(arguments); return args.join(’’);}// goodfunction concatenateAll(…args) { return args.join(’’);}使用默认参数语法，而不要使用一个变化的函数参数// really badfunction handleThings(opts) { // 更加糟糕: 如果参数 opts 是 falsy(假值) 的话，它将被设置为一个对象， // 这可能是你想要的，但它可以引起一些小的错误。 opts = opts || {}; // …}// still badfunction handleThings(opts) { if (opts === void 0) { opts = {};}// …}// goodfunction handleThings(opts = {}) { // …}始终将默认参数放在最后。// badfunction handleThings(opts = {}, name) {// …}// goodfunction handleThings(name, opts = {}) {// …}隔开函数签名，括号两边用空格隔开。// badconst f = function(){};const g = function (){};const h = function() {};// goodconst x = function () {};const y = function a() {};不要改变参数。eslint: no-param-reassign操作作为参数传入的对象，可能会在调用原始对象时造成不必要的变量副作用。（对象是引用类型）// badfunction f1(obj) {obj.key = 1;}// goodfunction 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;});避免使用比较运算符(< =, >=)时，混淆箭头函数语法(=>)。// badconst itemHeight = item => item.height > 256 ? item.largeSize : item.smallSize;// badconst itemHeight = (item) => item.height > 256 ? item.largeSize : item.smallSize;// goodconst itemHeight = item => (item.height > 256 ? item.largeSize : item.smallSize);// goodconst itemHeight = (item) => { const { height, largeSize, smallSize } = item; return height > 256 ? largeSize : smallSize;};类 Classes & 构造函数 Constructors总是使用 class。避免直接操作 prototype 。// badfunction Queue(contents = []) { this.queue = […contents];}Queue.prototype.pop = function () { const value = this.queue[0]; this.queue.splice(0, 1); return value;};// goodclass Queue { constructor(contents = []) { this.queue = […contents]; } pop() { const value = this.queue[0]; this.queue.splice(0, 1); return value; }}使用 extends 继承。因为 extends 是一个内置的原型继承方法并且不会破坏 instanceof。// badconst inherits = require(‘inherits’); function PeekableQueue(contents) { Queue.apply(this, contents);}inherits(PeekableQueue, Queue); PeekableQueue.prototype.peek = function () { return this.queue[0];};// goodclass PeekableQueue extends Queue { peek() { return this.queue[0]; }}如果没有指定，类有一个默认的构造函数。一个空的构造函数或者只是委托给父类则不是必须的。eslint: no-useless-constructor// badclass Jedi { constructor() {} getName() { return this.name; }}// badclass Rey extends Jedi { constructor(…args) { super(…args); }}// goodclass Rey extends Jedi { constructor(…args) { super(…args); this.name = ‘Rey’; }}避免重复类成员。eslint: no-dupe-class-members// badclass Foo { bar() { return 1; } bar() { return 2; }}// goodclass Foo { bar() { return 1; }}// goodclass Foo { bar() { return 2; }}模块 Modules总是使用模块 (import/export) 而不是其他非标准模块系统。// badconst AirbnbStyleGuide = require(’./AirbnbStyleGuide’);module.exports = AirbnbStyleGuide.es6;// okimport AirbnbStyleGuide from ‘./AirbnbStyleGuide’;export default AirbnbStyleGuide.es6;// bestimport { es6 } from ‘./AirbnbStyleGuide’;export default es6;不要使用通配符 import(导入)。这样能确保你只有一个默认 export(导出)。// badimport * as AirbnbStyleGuide from ‘./AirbnbStyleGuide’;// goodimport AirbnbStyleGuide from ‘./AirbnbStyleGuide’;不要从 import(导入) 中直接 export(导出)。虽然一行代码简洁明了，但有一个明确的 import(导入) 方法和一个明确的 export(导出) 方法，使事情能保持一致。// bad// filename es6.jsexport { es6 as default } from ‘./AirbnbStyleGuide’;// good// filename es6.jsimport { es6 } from ‘./AirbnbStyleGuide’;export default es6;一个地方只在一个路径中 import(导入) 。// badimport foo from ‘foo’;// … 其他一些 imports … //import { named1, named2 } from ‘foo’;// goodimport foo, { named1, named2 } from ‘foo’;// goodimport foo, { named1, named2,} from ‘foo’;不要 export(导出) 可变绑定。eslint: import/no-mutable-exports一般应该避免可变性，特别是在导出可变绑定时。虽然一些特殊情况下，可能需要这种技术，但是一般而言，只应该导出常量引用。// badlet foo = 3;export { foo };// goodconst foo = 3;export { foo };在只有单个导出的模块中，默认 export(导出) 优于命名 export(导出)。eslint: import/prefer-default-export为了鼓励更多的文件只有一个 export(导出)，这有利于模块的可读性和可维护性。// badexport function foo() {}// goodexport default function foo() {}将所有 import 导入放在非导入语句的上面。eslint: import/first由于 import 被提升，保持他们在顶部，防止意外的行为。// badimport foo from ‘foo’;foo.init();import bar from ‘bar’;// goodimport foo from ‘foo’;import bar from ‘bar’;foo.init();多行导入应该像多行数组和对象字面量一样进行缩进。// badimport {longNameA, longNameB, longNameC, longNameD, longNameE} from ‘path’;// goodimport {longNameA,longNameB,longNameC,longNameD,longNameE,} from ‘path’;属性 Properties使用 点语法(.) 来访问对象的属性。eslint: dot-notation jscs: requireDotNotationconst luke = {jedi: true,age: 28,};// badconst isJedi = luke[‘jedi’];// goodconst isJedi = luke.jedi;当通过变量访问属性时使用中括号 []。const luke = {jedi: true,age: 28,};function getProp(prop) {return luke[prop];}const isJedi = getProp(‘jedi’);求幂时使用求幂运算符 ** 。eslint: no-restricted-properties.// badconst binary = Math.pow(2, 10);// goodconst binary = 2 ** 10;变量 Variables总是使用 const 或 let 来声明变量。 不这样做会导致产生全局变量。 我们希望避免污染全局命名空间。eslint: no-undef prefer-const// badsuperPower = new SuperPower();// goodconst superPower = new SuperPower();将所有的 const 和 let 分组 。当你需要把已分配的变量分配给一个变量时非常有用// badlet i, len, dragonball,items = getItems(),goSportsTeam = true;// badlet i;const items = getItems();let dragonball;const goSportsTeam = true;let len;// goodconst 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); // 1console.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 ++ 这样的语句来改变你的值也更具有表现力。不允许一元递增和递减语句也会阻止您无意中预先递增/递减值，这也会导致程序中的意外行为。// badconst 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对于布尔值使用简写，但对于字符串和数字使用显式比较。// badif (isValid === true) {// …}// goodif (isValid) {// …}// badif (name) {// …}// goodif (name !== ‘’) {// …}// badif (collection.length) {// …}// goodif (collection.length > 0) {// …}在 case 和 default 子句中，使用大括号来创建包含词法声明的语句块(例如 let, const, function, 和 class).eslint: no-case-declarations// badswitch (foo) { case 1: let x = 1; break; case 2: const y = 2; break; case 3: function f() { // … } break;default: class C {}}// goodswitch (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// badconst foo = maybe1 > maybe2? “bar”: value1 > value2 ? “baz” : null;// 拆分成2个分离的三元表达式const maybeNull = value1 > value2 ? ‘baz’ : null;// betterconst foo = maybe1 > maybe2? ‘bar’: maybeNull;// bestconst foo = maybe1 > maybe2 ? ‘bar’ : maybeNull;避免不必要的三元表达式语句。eslint: no-unneeded-ternary/ badconst foo = a ? a : b;const bar = c ? true : false;const baz = c ? false : true;// goodconst foo = a || b;const bar = !!c;const baz = !c;当运算符混合在一个语句中时，请将其放在括号内。混合算术运算符时，不要将 和 % 与 + ， -，，/ 混合在一起。eslint: no-mixed-operators这可以提高可读性，并清晰展现开发者的意图。/ badconst foo = a && b < 0 || c > 0 || d + 1 === 0;// badconst bar = a ** b - 5 % d;// badif (a || b && c) {return d;}// goodconst foo = (a && b < 0) || c > 0 || (d + 1 === 0);// goodconst bar = (a ** b) - (5 % d);// goodif ((a || b) && c) {return d;}// goodconst bar = a + b / c * d;代码块 Blocks使用大括号包裹所有的多行代码块。eslint: nonblock-statement-body-position// badif (test) return false;// goodif (test) return false;// goodif (test) { return false;}// badfunction foo() { return false; }// goodfunction bar() { return false;}如果通过 if 和 else 使用多行代码块，把 else 放在 if 代码块闭合括号的同一行。eslint: brace-style// badif (test) { thing1(); thing2();}else { thing3();}// goodif (test) { thing1(); thing2();} else { thing3();}如果一个 if 块总是执行一个 return 语句，后面的 else 块是不必要的。在 else if 块中的 return，可以分成多个 if 块来 return 。eslint: no-else-return// badfunction foo() { if (x) { return x; } else { return y; }}// badfunction cats() { if (x) { return x; } else if (y) { return y; }}// badfunction dogs() { if (x) { return x; } else { if (y) { return y; }}}// goodfunction foo() { if (x) { return x; }return y;}// goodfunction cats() { if (x) { return x; } if (y) { return y; }}//goodfunction dogs(x) { if (x) { if (z) { return y; }} else { return z; }}控制语句 Control Statements如果您的控制语句(if, while 的)太长或超过最大行长度，那么每个（分组）条件可以放单独一行。逻辑运算符应该放在每行起始处。// badif ((foo === 123 || bar === ‘abc’) && doesItLookGoodWhenItBecomesThatLong() && isThisReallyHappening()) { thing1();}// badif (foo === 123 && bar === ‘abc’) { thing1();}// badif (foo === 123 && bar === ‘abc’) { thing1();}// badif ( foo === 123 && bar === ‘abc’) { thing1();}// goodif ( foo === 123 && bar === ‘abc’) { thing1();}// goodif ( (foo === 123 || bar === “abc”) && doesItLookGoodWhenItBecomesThatLong() && isThisReallyHappening()) { thing1();}// goodif (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}单行注释使用 // 。将单行注释放在续注释的语句上方。在注释之前放置一个空行，除非它位于代码块的第一行。// badconst active = true; // is current tab// good// is current tabconst active = true;// badfunction getType() { console.log(‘fetching type…’); // set the default type to ’no type’ const type = this.type || ’no type’; return type;}// goodfunction getType() { console.log(‘fetching type…’); // set the default type to ’no type’ const type = this.type || ’no type’; return type;}// also goodfunction getType() { // set the default type to ’no type’ const type = this.type || ’no type’; return type;}所有注释符和注释内容用一个空格隔开，让它更容易阅读。eslint: spaced-comment// bad//is current tabconst active = true;// good// is current tabconst active = true;// bad/make() returns a new elementbased 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 个空格作为缩进// badfunction foo() {∙∙∙∙let name;}// badfunction bar() {∙let name;}// goodfunction baz() {∙∙let name;}在大括号前放置 1 个空格。eslint: space-before-blocks jscs: requireSpaceBeforeBlockStatements// badfunction test(){ console.log(’test’);}// goodfunction test() { console.log(’test’);}// baddog.set(‘attr’,{ age: ‘1 year’, breed: ‘Bernese Mountain Dog’,});// gooddog.set(‘attr’, { age: ‘1 year’, breed: ‘Bernese Mountain Dog’,});在控制语句（if、while 等）的小括号前放一个空格。在函数调用及声明中，不在函数的参数列表前加空格。eslint: keyword-spacing jscs: requireSpaceAfterKeywords// badif(isJedi) { fight ();}// goodif (isJedi) { fight();}// badfunction fight () { console.log (‘Swooosh!’);}// goodfunction fight() { console.log(‘Swooosh!’);}使用空格把运算符隔开。eslint: space-infix-ops jscs: requireSpaceBeforeBinaryOperators, requireSpaceAfterBinaryOperators// badconst x=y+5;// goodconst x = y + 5;在文件末尾插入一个空行。eslint: eol-last// badimport { es6 } from ‘./AirbnbStyleGuide’;// …export default es6;// badimport { es6 } from ‘./AirbnbStyleGuide’;// …export default es6;// goodimport { 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();// badconst 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);// goodconst 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);// goodconst leds = stage.selectAll(’.led’).data(data);不要在圆括号内加空格。// badfunction bar( foo ) { return foo;}// goodfunction bar(foo) { return foo;}// badif ( foo ) { console.log(foo);}// goodif (foo) { console.log(foo);}不要在中括号内添加空格。eslint: array-bracket-spacing jscs: disallowSpacesInsideArrayBrackets// badconst foo = [ 1, 2, 3 ];console.log(foo[ 0 ]);// goodconst foo = [1, 2, 3];console.log(foo[0]);在大括号内添加空格// badconst foo = {clark: ‘kent’};// goodconst foo = { clark: ‘kent’ };类型转换 Type Casting & Coercion在声明语句的开始处就执行强制类型转换.字符串:eslint: no-new-wrappers// => this.reviewScore = 9;// badconst totalScore = new String(this.reviewScore); // typeof totalScore 是 “object” 而不是 “string”// badconst totalScore = this.reviewScore + ‘’; // 调用 this.reviewScore.valueOf()// badconst totalScore = this.reviewScore.toString(); // 不能保证返回一个字符串// goodconst totalScore = String(this.reviewScore);使数字: 使用 Number 进行转换，而 parseInt 则始终以基数解析字串。eslint: radix no-new-wrappersconst inputValue = ‘4’;// badconst val = new Number(inputValue);// badconst val = +inputValue;// badconst val = inputValue >> 0;// badconst val = parseInt(inputValue);// goodconst val = Number(inputValue);// goodconst val = parseInt(inputValue, 10);布尔值:eslint: no-new-wrappersconst age = 0;// badconst hasAge = new Boolean(age);// goodconst hasAge = Boolean(age);// bestconst hasAge = !!age;命名规则 Naming Conventions避免使用单字母名称。使你的命名具有描述性。eslint: id-length// badfunction q() {// …}// goodfunction query() {// …}当命名对象，函数和实例时使用驼峰式命名。eslint: camelcase jscs: requireCamelCaseOrUpperCaseIdentifiers// badconst OBJEcttsssss = {};const this_is_my_object = {};function c() {}// goodconst thisIsMyObject = {};function thisIsMyFunction() {}当命名构造函数或类的时候使用 PascalCase 式命名，（注：即单词首字母大写）。eslint: new-cap// badfunction user(options) { this.name = options.name;}const bad = new user({ name: ’nope’,});// goodclass 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’)。// badclass Dragon { get age() { // … } set age(value) { // … }}// goodclass Dragon { getAge() { // … } setAge(value) { // … }}如果属性/方法是一个 boolean, 使用 isVal() 或 hasVal() 方法。// badif (!dragon.age()) { return false;}// goodif (!dragon.hasAge()) { return false;})
...