diff --git a/README.md b/README.md index 775fc6fb07..fce0488c7f 100644 --- a/README.md +++ b/README.md @@ -1,16 +1,12 @@ -# Airbnb JavaScript Style Guide() { +# FreeAgent JavaScript Style Guide() { -*A mostly reasonable approach to JavaScript* +*A mostly reasonable approach to JavaScript, forked from [Airbnb](https://github.com/airbnb/javascript)* -[![Downloads](https://img.shields.io/npm/dm/eslint-config-airbnb.svg)](https://www.npmjs.com/package/eslint-config-airbnb) -[![Downloads](https://img.shields.io/npm/dm/eslint-config-airbnb-base.svg)](https://www.npmjs.com/package/eslint-config-airbnb-base) -[![Gitter](https://badges.gitter.im/Join Chat.svg)](https://gitter.im/airbnb/javascript?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge) +Slack: [#javascript](slack://channel?team=T0252T2FN&id=C0AKXB1RS) | [#frontend-engineering](slack://channel?team=T0252T2FN&id=C37K79GCA) Other Style Guides - - [ES5 (Deprecated)](https://github.com/airbnb/javascript/tree/es5-deprecated/es5) + - [ES5](https://github.com/fac/javascript/tree/es5-deprecated/es5) - [React](react/) - - [CSS-in-JavaScript](css-in-javascript/) - - [CSS & Sass](https://github.com/airbnb/css) - [Ruby](https://github.com/airbnb/ruby) ## Table of Contents @@ -170,13 +166,13 @@ Other Style Guides id: 5, name: 'San Francisco', }; - obj[getKey('enabled')] = true; + obj[getKey("enabled")] = true; // good const obj = { id: 5, name: 'San Francisco', - [getKey('enabled')]: true, + [getKey("enabled")]: true, }; ``` @@ -209,7 +205,7 @@ Other Style Guides > Why? It is shorter to write and descriptive. ```javascript - const lukeSkywalker = 'Luke Skywalker'; + const lukeSkywalker = "Luke Skywalker"; // bad const obj = { @@ -228,8 +224,8 @@ Other Style Guides > Why? It's easier to tell which properties are using the shorthand. ```javascript - const anakinSkywalker = 'Anakin Skywalker'; - const lukeSkywalker = 'Luke Skywalker'; + const anakinSkywalker = "Anakin Skywalker"; + const lukeSkywalker = "Luke Skywalker"; // bad const obj = { @@ -261,7 +257,7 @@ Other Style Guides // bad const bad = { 'foo': 3, - 'bar': 4, + "bar": 4, 'data-blah': 5, }; @@ -335,10 +331,10 @@ Other Style Guides const someStack = []; // bad - someStack[someStack.length] = 'abracadabra'; + someStack[someStack.length] = "abracadabra"; // good - someStack.push('abracadabra'); + someStack.push("abracadabra"); ``` @@ -362,7 +358,7 @@ Other Style Guides - [4.4](#arrays--from) To convert an array-like object to an array, use [Array.from](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/from). ```javascript - const foo = document.querySelectorAll('.foo'); + const foo = document.querySelectorAll(".foo"); const nodes = Array.from(foo); ``` @@ -397,8 +393,8 @@ Other Style Guides // bad inbox.filter((msg) => { const { subject, author } = msg; - if (subject === 'Mockingbird') { - return author === 'Harper Lee'; + if (subject === "Mockingbird") { + return author === "Harper Lee"; } else { return false; } @@ -407,8 +403,8 @@ Other Style Guides // good inbox.filter((msg) => { const { subject, author } = msg; - if (subject === 'Mockingbird') { - return author === 'Harper Lee'; + if (subject === "Mockingbird") { + return author === "Harper Lee"; } return false; @@ -490,17 +486,18 @@ Other Style Guides ## Strings - - [6.1](#strings--quotes) Use single quotes `''` for strings. eslint: [`quotes`](http://eslint.org/docs/rules/quotes.html) jscs: [`validateQuoteMarks`](http://jscs.info/rule/validateQuoteMarks) + - [6.1](#strings--quotes) Use double quotes `""` for strings. This is consistent + with our Ruby code. ```javascript // bad - const name = "Capt. Janeway"; + const name = 'Capt. Janeway'; // bad - template literals should contain interpolation or newlines const name = `Capt. Janeway`; // good - const name = 'Capt. Janeway'; + const name = "Capt. Janeway"; ``` @@ -510,18 +507,18 @@ Other Style Guides ```javascript // bad - const errorMessage = 'This is a super long error that was thrown because \ + const errorMessage = "This is a super long error that was thrown because \ of Batman. When you stop to think about how Batman had anything to do \ with this, you would get nowhere \ - fast.'; + fast."; // bad - const errorMessage = 'This is a super long error that was thrown because ' + - 'of Batman. When you stop to think about how Batman had anything to do ' + - 'with this, you would get nowhere fast.'; + const errorMessage = "This is a super long error that was thrown because " + + "of Batman. When you stop to think about how Batman had anything to do " + + "with this, you would get nowhere fast."; // good - const errorMessage = 'This is a super long error that was thrown because of Batman. When you stop to think about how Batman had anything to do with this, you would get nowhere fast.'; + const errorMessage = "This is a super long error that was thrown because of Batman. When you stop to think about how Batman had anything to do with this, you would get nowhere fast."; ``` @@ -532,12 +529,12 @@ Other Style Guides ```javascript // bad function sayHi(name) { - return 'How are you, ' + name + '?'; + return "How are you, " + name + "?"; } // bad function sayHi(name) { - return ['How are you, ', name, '?'].join(); + return ["How are you, ", name, "?"].join(); } // bad @@ -561,10 +558,10 @@ Other Style Guides ```javascript // bad - const foo = '\'this\' \i\s \"quoted\"'; + const foo = "\"this\" \i\s \'quoted\'"; // good - const foo = '\'this\' is "quoted"'; + const foo = "\"this\" is 'quoted'"; const foo = `my name is '${name}'`; ``` @@ -603,7 +600,7 @@ Other Style Guides ```javascript // immediately-invoked function expression (IIFE) (function () { - console.log('Welcome to the Internet. Please follow me.'); + console.log("Welcome to the Internet. Please follow me."); }()); ``` @@ -617,7 +614,7 @@ Other Style Guides // bad if (currentUser) { function test() { - console.log('Nope.'); + console.log("Nope."); } } @@ -625,7 +622,7 @@ Other Style Guides let test; if (currentUser) { test = () => { - console.log('Yup.'); + console.log("Yup."); }; } ``` @@ -654,12 +651,12 @@ Other Style Guides // bad function concatenateAll() { const args = Array.prototype.slice.call(arguments); - return args.join(''); + return args.join(""); } // good function concatenateAll(...args) { - return args.join(''); + return args.join(""); } ``` @@ -729,10 +726,10 @@ Other Style Guides ```javascript // bad - var add = new Function('a', 'b', 'return a + b'); + var add = new Function("a", "b", "return a + b"); // still bad - var subtract = Function('a', 'b', 'return a - b'); + var subtract = Function("a", "b", "return a - b"); ``` @@ -764,7 +761,7 @@ Other Style Guides // good function f2(obj) { - const key = Object.prototype.hasOwnProperty.call(obj, 'key') ? obj.key : 1; + const key = Object.prototype.hasOwnProperty.call(obj, "key") ? obj.key : 1; } ``` @@ -909,14 +906,14 @@ Other Style Guides ```javascript // bad - ['get', 'post', 'put'].map(httpMethod => Object.prototype.hasOwnProperty.call( + ["get", "post", "put"].map(httpMethod => Object.prototype.hasOwnProperty.call( httpMagicObjectWithAVeryLongName, httpMethod, ) ); // good - ['get', 'post', 'put'].map(httpMethod => ( + ["get", "post", "put"].map(httpMethod => ( Object.prototype.hasOwnProperty.call( httpMagicObjectWithAVeryLongName, httpMethod, @@ -1016,7 +1013,7 @@ Other Style Guides ```javascript // bad - const inherits = require('inherits'); + const inherits = require("inherits"); function PeekableQueue(contents) { Queue.apply(this, contents); } @@ -1077,7 +1074,7 @@ Other Style Guides ```javascript class Jedi { constructor(options = {}) { - this.name = options.name || 'no name'; + this.name = options.name || "no name"; } getName() { @@ -1114,7 +1111,7 @@ Other Style Guides class Rey extends Jedi { constructor(...args) { super(...args); - this.name = 'Rey'; + this.name = "Rey"; } } ``` @@ -1155,7 +1152,7 @@ Other Style Guides ```javascript // bad - const AirbnbStyleGuide = require('./AirbnbStyleGuide'); + const AirbnbStyleGuide = require("./AirbnbStyleGuide"); module.exports = AirbnbStyleGuide.es6; // ok @@ -1254,11 +1251,11 @@ Other Style Guides import foo from 'foo'; foo.init(); - import bar from 'bar'; + import bar from "bar"; // good import foo from 'foo'; - import bar from 'bar'; + import bar from "bar"; foo.init(); ``` @@ -1422,7 +1419,7 @@ Other Style Guides }; // bad - const isJedi = luke['jedi']; + const isJedi = luke["jedi"]; // good const isJedi = luke.jedi; @@ -1441,7 +1438,7 @@ Other Style Guides return luke[prop]; } - const isJedi = getProp('jedi'); + const isJedi = getProp("jedi"); ``` **[⬆ back to top](#table-of-contents)** @@ -1469,18 +1466,18 @@ Other Style Guides // bad const items = getItems(), goSportsTeam = true, - dragonball = 'z'; + dragonball = "z"; // bad // (compare to above, and try to spot the mistake) const items = getItems(), goSportsTeam = true; - dragonball = 'z'; + dragonball = "z"; // good const items = getItems(); const goSportsTeam = true; - const dragonball = 'z'; + const dragonball = "z"; ``` @@ -1519,12 +1516,12 @@ Other Style Guides function checkName(hasName) { const name = getName(); - if (hasName === 'test') { + if (hasName === "test") { return false; } - if (name === 'test') { - this.setName(''); + if (name === "test") { + this.setName(""); return false; } @@ -1533,14 +1530,14 @@ Other Style Guides // good function checkName(hasName) { - if (hasName === 'test') { + if (hasName === "test") { return false; } const name = getName(); - if (name === 'test') { - this.setName(''); + if (name === "test") { + this.setName(""); return false; } @@ -1665,7 +1662,7 @@ Other Style Guides anonymous(); // => TypeError anonymous is not a function var anonymous = function () { - console.log('anonymous function expression'); + console.log("anonymous function expression"); }; } ``` @@ -1682,7 +1679,7 @@ Other Style Guides superPower(); // => ReferenceError superPower is not defined var named = function superPower() { - console.log('Flying'); + console.log("Flying"); }; } @@ -1694,7 +1691,7 @@ Other Style Guides named(); // => TypeError named is not a function var named = function named() { - console.log('named'); + console.log("named"); }; } ``` @@ -1707,7 +1704,7 @@ Other Style Guides superPower(); // => Flying function superPower() { - console.log('Flying'); + console.log("Flying"); } } ``` @@ -1759,7 +1756,7 @@ Other Style Guides } // good - if (name !== '') { + if (name !== "") { // ... } @@ -1839,16 +1836,16 @@ Other Style Guides : value1 > value2 ? "baz" : null; // better - const maybeNull = value1 > value2 ? 'baz' : null; + const maybeNull = value1 > value2 ? "baz" : null; const foo = maybe1 > maybe2 - ? 'bar' + ? "bar" : maybeNull; // best - const maybeNull = value1 > value2 ? 'baz' : null; + const maybeNull = value1 > value2 ? "baz" : null; - const foo = maybe1 > maybe2 ? 'bar' : maybeNull; + const foo = maybe1 > maybe2 ? "bar" : maybeNull; ``` @@ -1969,27 +1966,27 @@ Other Style Guides // bad function getType() { - console.log('fetching type...'); - // set the default type to 'no type' - const type = this.type || 'no type'; + 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...'); + console.log("fetching type..."); - // set the default type to 'no type' - const type = this.type || 'no 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'; + // set the default type to "no type" + const type = this.type || "no type"; return type; } @@ -2093,24 +2090,24 @@ Other Style Guides ```javascript // bad function test(){ - console.log('test'); + console.log("test"); } // good function test() { - console.log('test'); + console.log("test"); } // bad - dog.set('attr',{ - age: '1 year', - breed: 'Bernese Mountain Dog', + dog.set("attr",{ + age: "1 year", + breed: "Bernese Mountain Dog", }); // good - dog.set('attr', { - age: '1 year', - breed: 'Bernese Mountain Dog', + dog.set("attr", { + age: "1 year", + breed: "Bernese Mountain Dog", }); ``` @@ -2130,12 +2127,12 @@ Other Style Guides // bad function fight () { - console.log ('Swooosh!'); + console.log ("Swooosh!"); } // good function fight() { - console.log('Swooosh!'); + console.log("Swooosh!"); } ``` @@ -2155,14 +2152,14 @@ Other Style Guides ```javascript // bad - import { es6 } from './AirbnbStyleGuide'; + import { es6 } from "./AirbnbStyleGuide"; // ... export default es6; ``` ```javascript // bad - import { es6 } from './AirbnbStyleGuide'; + import { es6 } from "./AirbnbStyleGuide"; // ... export default es6;↵ ↵ @@ -2170,7 +2167,7 @@ Other Style Guides ```javascript // good - import { es6 } from './AirbnbStyleGuide'; + import { es6 } from "./AirbnbStyleGuide"; // ... export default es6;↵ ``` @@ -2181,42 +2178,42 @@ Other Style Guides ```javascript // bad - $('#items').find('.selected').highlight().end().find('.open').updateCount(); + $("#items").find(".selected").highlight().end().find(".open").updateCount(); // bad - $('#items'). - find('.selected'). + $("#items"). + find(".selected"). highlight(). end(). - find('.open'). + find(".open"). updateCount(); // good - $('#items') - .find('.selected') + $("#items") + .find(".selected") .highlight() .end() - .find('.open') + .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})`) + 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') + 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})`) + .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); + const leds = stage.selectAll(".led").data(data); ``` @@ -2353,10 +2350,10 @@ Other Style Guides ```javascript // bad - const foo = {clark: 'kent'}; + const foo = {clark: "kent"}; // good - const foo = { clark: 'kent' }; + const foo = { clark: "kent" }; ``` @@ -2369,7 +2366,7 @@ Other Style Guides const foo = jsonData && jsonData.foo && jsonData.foo.bar && jsonData.foo.bar.baz && jsonData.foo.bar.baz.quux && jsonData.foo.bar.baz.quux.xyzzy; // bad - $.ajax({ method: 'POST', url: 'https://airbnb.com/', data: { name: 'John' } }).done(() => console.log('Congratulations!')).fail(() => console.log('You have failed this city.')); + $.ajax({ method: "POST", url: "https://airbnb.com/", data: { name: "John" } }).done(() => console.log("Congratulations!")).fail(() => console.log("You have failed this city.")); // good const foo = jsonData @@ -2381,12 +2378,12 @@ Other Style Guides // good $.ajax({ - method: 'POST', - url: 'https://airbnb.com/', - data: { name: 'John' }, + method: "POST", + url: "https://airbnb.com/", + data: { name: "John" }, }) - .done(() => console.log('Congratulations!')) - .fail(() => console.log('You have failed this city.')); + .done(() => console.log("Congratulations!")) + .fail(() => console.log("You have failed this city.")); ``` **[⬆ back to top](#table-of-contents)** @@ -2413,18 +2410,18 @@ Other Style Guides // bad const hero = { - firstName: 'Ada' - , lastName: 'Lovelace' + firstName: "Ada" + , lastName: "Lovelace" , birthYear: 1815 - , superPower: 'computers' + , superPower: "computers" }; // good const hero = { - firstName: 'Ada', - lastName: 'Lovelace', + firstName: "Ada", + lastName: "Lovelace", birthYear: 1815, - superPower: 'computers', + superPower: "computers", }; ``` @@ -2436,41 +2433,41 @@ Other Style Guides ```diff // bad - git diff without trailing comma const hero = { - firstName: 'Florence', - - lastName: 'Nightingale' - + lastName: 'Nightingale', - + inventorOf: ['coxcomb chart', 'modern nursing'] + firstName: "Florence", + - lastName: "Nightingale" + + lastName: "Nightingale", + + inventorOf: ["coxcomb chart", "modern nursing"] }; // good - git diff with trailing comma const hero = { - firstName: 'Florence', - lastName: 'Nightingale', - + inventorOf: ['coxcomb chart', 'modern nursing'], + firstName: "Florence", + lastName: "Nightingale", + + inventorOf: ["coxcomb chart", 'modern nursing"], }; ``` ```javascript // bad const hero = { - firstName: 'Dana', - lastName: 'Scully' + firstName: "Dana", + lastName: "Scully" }; const heroes = [ - 'Batman', - 'Superman' + "Batman", + "Superman" ]; // good const hero = { - firstName: 'Dana', - lastName: 'Scully', + firstName: "Dana", + lastName: "Scully", }; const heroes = [ - 'Batman', - 'Superman', + "Batman", + "Superman", ]; // bad @@ -2535,19 +2532,19 @@ Other Style Guides ```javascript // bad (function () { - const name = 'Skywalker' + const name = "Skywalker" return name })() // good (function () { - const name = 'Skywalker'; + const name = "Skywalker"; return name; }()); // good, but legacy (guards against the function becoming an argument when two files with IIFEs are concatenated) ;((() => { - const name = 'Skywalker'; + const name = "Skywalker"; return name; })()); ``` @@ -2569,7 +2566,7 @@ Other Style Guides // => this.reviewScore = 9; // bad - const totalScore = this.reviewScore + ''; // invokes this.reviewScore.valueOf() + const totalScore = this.reviewScore + ""; // invokes this.reviewScore.valueOf() // bad const totalScore = this.reviewScore.toString(); // isn't guaranteed to return a string @@ -2582,7 +2579,7 @@ Other Style Guides - [21.3](#coercion--numbers) Numbers: Use `Number` for type casting and `parseInt` always with a radix for parsing strings. eslint: [`radix`](http://eslint.org/docs/rules/radix) ```javascript - const inputValue = '4'; + const inputValue = "4"; // bad const val = new Number(inputValue); @@ -2685,7 +2682,7 @@ Other Style Guides } const bad = new user({ - name: 'nope', + name: "nope", }); // good @@ -2696,7 +2693,7 @@ Other Style Guides } const good = new User({ - name: 'yup', + name: "yup", }); ``` @@ -2761,21 +2758,21 @@ Other Style Guides // in some other file // bad - import CheckBox from './checkBox'; // PascalCase import/export, camelCase filename - import FortyTwo from './FortyTwo'; // PascalCase import/filename, camelCase export - import InsideDirectory from './InsideDirectory'; // PascalCase import/filename, camelCase export + import CheckBox from "./checkBox"; // PascalCase import/export, camelCase filename + import FortyTwo from "./FortyTwo"; // PascalCase import/filename, camelCase export + import InsideDirectory from "./InsideDirectory"; // PascalCase import/filename, camelCase export // bad - import CheckBox from './check_box'; // PascalCase import/export, snake_case filename - import forty_two from './forty_two'; // snake_case import/filename, camelCase export - import inside_directory from './inside_directory'; // snake_case import, camelCase export - import index from './inside_directory/index'; // requiring the index file explicitly - import insideDirectory from './insideDirectory/index'; // requiring the index file explicitly + import CheckBox from "./check_box"; // PascalCase import/export, snake_case filename + import forty_two from "./forty_two"; // snake_case import/filename, camelCase export + import inside_directory from "./inside_directory"; // snake_case import, camelCase export + import index from "./inside_directory/index"; // requiring the index file explicitly + import insideDirectory from "./insideDirectory/index"; // requiring the index file explicitly // good - import CheckBox from './CheckBox'; // PascalCase export/import/filename - import fortyTwo from './fortyTwo'; // camelCase export/import/filename - import insideDirectory from './insideDirectory'; // camelCase export/import/directory name/implicit "index" + import CheckBox from "./CheckBox"; // PascalCase export/import/filename + import fortyTwo from "./fortyTwo"; // camelCase export/import/filename + import insideDirectory from "./insideDirectory"; // camelCase export/import/directory name/implicit "index" // ^ supports both insideDirectory.js and insideDirectory/index.js ``` @@ -2809,7 +2806,7 @@ Other Style Guides ```javascript // bad - import SmsContainer from './containers/SmsContainer'; + import SmsContainer from "./containers/SmsContainer"; // bad const HttpRequests = [ @@ -2817,7 +2814,7 @@ Other Style Guides ]; // good - import SMSContainer from './containers/SMSContainer'; + import SMSContainer from "./containers/SMSContainer"; // good const HTTPRequests = [ @@ -2825,7 +2822,7 @@ Other Style Guides ]; // best - import TextMessageContainer from './containers/TextMessageContainer'; + import TextMessageContainer from "./containers/TextMessageContainer"; // best const Requests = [ @@ -2842,7 +2839,7 @@ Other Style Guides - [23.1](#accessors--not-required) Accessor functions for properties are not required. - - [23.2](#accessors--no-getters-setters) Do not use JavaScript getters/setters as they cause unexpected side effects and are harder to test, maintain, and reason about. Instead, if you do make accessor functions, use getVal() and setVal('hello'). + - [23.2](#accessors--no-getters-setters) Do not use JavaScript getters/setters as they cause unexpected side effects and are harder to test, maintain, and reason about. Instead, if you do make accessor functions, use getVal() and setVal("hello"). ```javascript // bad @@ -2889,8 +2886,8 @@ Other Style Guides ```javascript class Jedi { constructor(options = {}) { - const lightsaber = options.lightsaber || 'blue'; - this.set('lightsaber', lightsaber); + const lightsaber = options.lightsaber || "blue"; + this.set("lightsaber", lightsaber); } set(key, val) { @@ -2913,11 +2910,11 @@ Other Style Guides ```javascript // bad - $(this).trigger('listingUpdated', listing.id); + $(this).trigger("listingUpdated", listing.id); // ... - $(this).on('listingUpdated', (e, listingId) => { + $(this).on("listingUpdated", (e, listingId) => { // do something with listingId }); ``` @@ -2926,11 +2923,11 @@ Other Style Guides ```javascript // good - $(this).trigger('listingUpdated', { listingId: listing.id }); + $(this).trigger("listingUpdated", { listingId: listing.id }); // ... - $(this).on('listingUpdated', (e, data) => { + $(this).on("listingUpdated", (e, data) => { // do something with data.listingId }); ``` @@ -2945,13 +2942,13 @@ Other Style Guides ```javascript // bad - const sidebar = $('.sidebar'); + const sidebar = $(".sidebar"); // good - const $sidebar = $('.sidebar'); + const $sidebar = $(".sidebar"); // good - const $sidebarBtn = $('.sidebar-btn'); + const $sidebarBtn = $(".sidebar-btn"); ``` @@ -2960,49 +2957,49 @@ Other Style Guides ```javascript // bad function setSidebar() { - $('.sidebar').hide(); + $(".sidebar").hide(); // ... - $('.sidebar').css({ - 'background-color': 'pink', + $(".sidebar").css({ + "background-color": "pink", }); } // good function setSidebar() { - const $sidebar = $('.sidebar'); + const $sidebar = $(".sidebar"); $sidebar.hide(); // ... $sidebar.css({ - 'background-color': 'pink', + "background-color": "pink", }); } ``` - - [25.3](#jquery--queries) For DOM queries use Cascading `$('.sidebar ul')` or parent > child `$('.sidebar > ul')`. [jsPerf](http://jsperf.com/jquery-find-vs-context-sel/16) + - [25.3](#jquery--queries) For DOM queries use Cascading `$(".sidebar ul")` or parent > child `$(".sidebar > ul")`. [jsPerf](http://jsperf.com/jquery-find-vs-context-sel/16) - [25.4](#jquery--find) Use `find` with scoped jQuery object queries. ```javascript // bad - $('ul', '.sidebar').hide(); + $("ul", ".sidebar").hide(); // bad - $('.sidebar').find('ul').hide(); + $(".sidebar").find("ul").hide(); // good - $('.sidebar ul').hide(); + $(".sidebar ul").hide(); // good - $('.sidebar > ul').hide(); + $(".sidebar > ul").hide(); // good - $sidebar.find('ul').hide(); + $sidebar.find("ul").hide(); ``` **[⬆ back to top](#table-of-contents)** @@ -3058,7 +3055,7 @@ Other Style Guides - Whichever testing framework you use, you should be writing tests! - Strive to write many small pure functions, and minimize where mutations occur. - Be cautious about stubs and mocks - they can make your tests more brittle. - - We primarily use [`mocha`](https://www.npmjs.com/package/mocha) at Airbnb. [`tape`](https://www.npmjs.com/package/tape) is also used occasionally for small, separate modules. + - We primarily use [`Jasmine`](https://jasmine.github.io) at FreeAgent. [`Timecop.js`](https://github.com/jamesarosen/Timecop.js) can help with "time travel" in tests. - 100% test coverage is a good goal to strive for, even if it's not always practical to reach it. - Whenever you fix a bug, _write a regression test_. A bug fixed without a regression test is almost certainly going to break again in the future.