diff --git a/README.md b/README.md index a1a0cc57e4..60f3e0fc93 100644 --- a/README.md +++ b/README.md @@ -1,10 +1,8 @@ -# Airbnb JavaScript Style Guide() { +# Practice Fusion JavaScript Style Guide() { -*A mostly reasonable approach to JavaScript* +*A mostly reasonable approach to JavaScript, forked and modified from [Airbnb's JavaScript style guide](//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) +# Table of Contents Other Style Guides - [ES5 (Deprecated)](https://github.com/airbnb/javascript/tree/es5-deprecated/es5) @@ -328,6 +326,9 @@ Other Style Guides const items = []; ``` + *NOTE:* using an `Em.A()` or `Ember.A()` is discouraged and we should favor the literal syntax array creation. See [Em.A](http://emberjs.com/api/#method_A). + + - [4.2](#arrays--push) Use [Array#push](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/push) instead of direct assignment to add items to an array. @@ -1927,6 +1928,10 @@ Other Style Guides ## Comments + - [17.1](#comments--multiline) Use `/** ... */` for multi-line comments. + + + - [17.1](#comments--multiline) Use `/** ... */` for multi-line comments. ```javascript @@ -2068,22 +2073,22 @@ Other Style Guides ## Whitespace - - [18.1](#whitespace--spaces) Use soft tabs set to 2 spaces. eslint: [`indent`](http://eslint.org/docs/rules/indent.html) jscs: [`validateIndentation`](http://jscs.info/rule/validateIndentation) + - [18.1](#whitespace--spaces) Use soft tabs set to 4 spaces. eslint: [`indent`](http://eslint.org/docs/rules/indent.html) jscs: [`validateIndentation`](http://jscs.info/rule/validateIndentation) ```javascript - // bad + // good function foo() { - ∙∙∙∙let name; + ∙∙∙∙const name; } // bad function bar() { - ∙let name; + ∙const name; } - // good + // bad function baz() { - ∙∙let name; + ∙∙const name; } ``` @@ -2360,7 +2365,7 @@ Other Style Guides ``` - - [18.12](#whitespace--max-len) Avoid having lines of code that are longer than 100 characters (including whitespace). Note: per [above](#strings--line-length), long strings are exempt from this rule, and should not be broken up. eslint: [`max-len`](http://eslint.org/docs/rules/max-len.html) jscs: [`maximumLineLength`](http://jscs.info/rule/maximumLineLength) + - [18.12](#whitespace--max-len) Avoid having lines of code that are longer than 200 characters (including whitespace). Note: per [above](#strings--line-length), long strings are exempt from this rule, and should not be broken up. eslint: [`max-len`](http://eslint.org/docs/rules/max-len.html) jscs: [`maximumLineLength`](http://jscs.info/rule/maximumLineLength) > Why? This ensures readability and maintainability. @@ -2429,29 +2434,10 @@ Other Style Guides ``` - - [19.2](#commas--dangling) Additional trailing comma: **Yup.** eslint: [`comma-dangle`](http://eslint.org/docs/rules/comma-dangle.html) jscs: [`requireTrailingComma`](http://jscs.info/rule/requireTrailingComma) - - > Why? This leads to cleaner git diffs. Also, transpilers like Babel will remove the additional trailing comma in the transpiled code which means you don't have to worry about the [trailing comma problem](https://github.com/airbnb/javascript/blob/es5-deprecated/es5/README.md#commas) in legacy browsers. - - ```diff - // bad - git diff without trailing comma - const hero = { - firstName: 'Florence', - - lastName: 'Nightingale' - + lastName: 'Nightingale', - + inventorOf: ['coxcomb chart', 'modern nursing'] - }; + - [19.2](#commas--dangling) Additional trailing comma: **No.** eslint: [`comma-dangle`](http://eslint.org/docs/rules/comma-dangle.html) jscs: [`disallowTrailingComma`](http://jscs.info/rule/disallowTrailingComma) - // good - git diff with trailing comma - const hero = { - firstName: 'Florence', - lastName: 'Nightingale', - + inventorOf: ['coxcomb chart', 'modern nursing'], - }; ``` - - ```javascript - // bad + // good const hero = { firstName: 'Dana', lastName: 'Scully' @@ -2462,7 +2448,7 @@ Other Style Guides 'Superman' ]; - // good + // bad const hero = { firstName: 'Dana', lastName: 'Scully', @@ -2744,7 +2730,7 @@ Other Style Guides ``` - - [22.6](#naming--filename-matches-export) A base filename should exactly match the name of its default export. + - [22.6](#naming--filename-matches-export) A base filename should match the dashed name of its default export. ```javascript // file 1 contents @@ -2773,18 +2759,16 @@ Other Style Guides 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" - // ^ supports both insideDirectory.js and insideDirectory/index.js + import CheckBox from './check-box'; // PascalCase export/import, dashed filename + import fortyTwo from './forty-two'; // camelCase export/import, dashed filename + import insideDirectory from './inside-directory'; // camelCase export/import, dashed filename ``` - - [22.7](#naming--camelCase-default-export) Use camelCase when you export-default a function. Your filename should be identical to your function's name. + - [22.7](#naming--camelCase-default-export) Use camelCase when you export-default a function. Your filename should be the dashed equivalent of your function's name. ```javascript function makeStyleGuide() { - // ... } export default makeStyleGuide; @@ -2796,42 +2780,12 @@ Other Style Guides ```javascript const AirbnbStyleGuide = { es6: { - }, + } }; export default AirbnbStyleGuide; ``` - - - [22.9](#naming--Acronyms-and-Initialisms) Acronyms and initialisms should always be all capitalized, or all lowercased. - - > Why? Names are for readability, not to appease a computer algorithm. - - ```javascript - // bad - import SmsContainer from './containers/SmsContainer'; - - // bad - const HttpRequests = [ - // ... - ]; - - // good - import SMSContainer from './containers/SMSContainer'; - - // good - const HTTPRequests = [ - // ... - ]; - - // best - import TextMessageContainer from './containers/TextMessageContainer'; - - // best - const Requests = [ - // ... - ]; - ``` **[⬆ back to top](#table-of-contents)** @@ -2938,6 +2892,14 @@ Other Style Guides **[⬆ back to top](#table-of-contents)** +## File Names + +** Note: ** this section isn't part of the original AirBnB guide. + +- We use file-names-with-dashes because that is the required format for Ember templates and components, and the default for all files generated with ember-cli. + +**[⬆ back to top](#table-of-contents)** + ## jQuery