diff --git a/.gitignore b/.gitignore index 3c3629e647..34977ee7df 100644 --- a/.gitignore +++ b/.gitignore @@ -1 +1,2 @@ node_modules +.idea \ No newline at end of file diff --git a/README.md b/README.md index 39ce51f1ed..d7a4c3768b 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -# Airbnb JavaScript Style Guide() { +# EvozonJs JavaScript Style Guide() { *A mostly reasonable approach to JavaScript* @@ -9,7 +9,6 @@ Other Style Guides - [ES5](es5/) - [React](react/) - [CSS & Sass](https://github.com/airbnb/css) - - [Ruby](https://github.com/airbnb/ruby) ## Table of Contents @@ -375,17 +374,13 @@ Other Style Guides [1, 2, 3].map(x => x + 1); // bad - const flat = {}; [[0, 1], [2, 3], [4, 5]].reduce((memo, item, index) => { const flatten = memo.concat(item); - flat[index] = memo.concat(item); }); // good - const flat = {}; - [[0, 1], [2, 3], [4, 5]].reduce((memo, item, index) => { + [[0, 1], [2, 3], [4, 5]].reduce((memo, item, index) => { const flatten = memo.concat(item); - flat[index] = flatten; return flatten; }); @@ -399,7 +394,7 @@ Other Style Guides } }); - // good + // good - use a 'default' return statement inbox.filter((msg) => { const { subject, author } = msg; if (subject === 'Mockingbird') { @@ -476,6 +471,7 @@ Other Style Guides } // the caller selects only the data they need + // the name of the destructured variables should be the same as the ones returned by the function const { left, top } = processInput(input); ``` @@ -496,7 +492,7 @@ Other Style Guides ``` - - [6.2](#strings--line-length) Strings that cause the line to go over 100 characters should be written across multiple lines using string concatenation. + - [6.2](#strings--line-length) Strings that cause the line to go over 80 characters should be written across multiple lines using string concatenation. - [6.3](#strings--concat-perf) Note: If overused, long strings with concatenation could impact performance. [jsPerf](http://jsperf.com/ya-string-concat) & [Discussion](https://github.com/airbnb/javascript/issues/40). @@ -778,6 +774,26 @@ Other Style Guides } ``` + + - [7.14](#functions--default-value-destructuring) Always use a default value for an argument when destructuring it. + + > Why? Destructuring an undefined/null argument will result in an error. + + ```javascript + + // bad + function getFullName({ firstName, lastName }) { + return `${firstName} ${lastName}`; + } + + // good, defaults to an empty object + function getFullName({ firstName, lastName } = {}) { + return `${firstName} ${lastName}`; + } + ``` + + + **[⬆ back to top](#table-of-contents)** ## Arrow Functions @@ -818,7 +834,7 @@ Other Style Guides }); // good - [1, 2, 3].map(number => `A string containing the ${number}.`); + [1, 2, 3].map((number) => `A string containing the ${number}.`); // good [1, 2, 3].map((number) => { @@ -847,18 +863,15 @@ Other Style Guides ``` - - [8.4](#arrows--one-arg-parens) If your function takes a single argument and doesn’t use braces, omit the parentheses. Otherwise, always include parentheses around arguments. eslint: [`arrow-parens`](http://eslint.org/docs/rules/arrow-parens.html) jscs: [`disallowParenthesesAroundArrowParam`](http://jscs.info/rule/disallowParenthesesAroundArrowParam) + - [8.4](#arrows--one-arg-parens) Always include parentheses around arguments. eslint: [`arrow-parens`](http://eslint.org/docs/rules/arrow-parens.html) jscs: [`disallowParenthesesAroundArrowParam`](http://jscs.info/rule/disallowParenthesesAroundArrowParam) > Why? Less visual clutter. ```js // bad - [1, 2, 3].map((x) => x * x); - - // good [1, 2, 3].map(x => x * x); - // good + // bad [1, 2, 3].map(number => ( `A long string with the ${number}. It’s so long that we’ve broken it ` + 'over multiple lines!' @@ -869,6 +882,9 @@ Other Style Guides const y = x + 1; return x * y; }); + + // good + [1, 2, 3].map((x) => x * x); // good [1, 2, 3].map((x) => { @@ -1011,7 +1027,7 @@ Other Style Guides - [9.5](#constructors--no-useless) Classes have a default constructor if one is not specified. An empty constructor function or one that just delegates to a parent class is unnecessary. eslint: [`no-useless-constructor`](http://eslint.org/docs/rules/no-useless-constructor) ```javascript - // bad + // bad - constructor does nothing class Jedi { constructor() {} @@ -1020,7 +1036,7 @@ Other Style Guides } } - // bad + // bad - constructor just passes the arguments class Rey extends Jedi { constructor(...args) { super(...args); @@ -1085,16 +1101,16 @@ Other Style Guides ``` - - [10.2](#modules--no-wildcard) Do not use wildcard imports. + - [10.2](#modules--no-wildcard) Do not use wildcard imports unless you need all exports from that specific module. - > Why? This makes sure you have a single default export. + > Why? This makes sure you only import what you need from a module. ```javascript // bad import * as AirbnbStyleGuide from './AirbnbStyleGuide'; // good - import AirbnbStyleGuide from './AirbnbStyleGuide'; + import { importA, importB } from './AirbnbStyleGuide'; ``` @@ -1212,14 +1228,18 @@ Other Style Guides ## Variables - - [13.1](#variables--const) Always use `const` to declare variables. Not doing so will result in global variables. We want to avoid polluting the global namespace. Captain Planet warned us of that. + - [13.1](#variables--const) Always use `const` to declare variables. Not doing so will result in global variables. We want to avoid polluting the global namespace. Captain Planet warned us of that. If you need a primitive that will change its value, use `let`. ```javascript // bad superPower = new SuperPower(); + // bad + var primitiveValue = 0; // good const superPower = new SuperPower(); + // good + let primitiveValue = 0; ``` @@ -1293,12 +1313,12 @@ Other Style Guides return name; } - // good + // good function checkName(hasName) { if (hasName === 'test') { return false; } - + // we only need to call the function if hasName !== 'test' const name = getName(); if (name === 'test') { @@ -1563,19 +1583,14 @@ Other Style Guides if (test) return false; - // good + // bad if (test) return false; - - // good - if (test) { - return false; - } - + // bad function foo() { return false; } // good - function bar() { + if (test) { return false; } ``` @@ -1998,7 +2013,8 @@ Other Style Guides ``` - - [18.11](#whitespace--in-braces) Add spaces inside curly braces. eslint: [`object-curly-spacing`](http://eslint.org/docs/rules/object-curly-spacing.html) jscs: [`disallowSpacesInsideObjectBrackets`](http://jscs.info/rule/disallowSpacesInsideObjectBrackets) + - [18.11](#whitespace--in-braces) Add spaces inside curly braces, for object declaration and destructuring + - eslint: [`object-curly-spacing`](http://eslint.org/docs/rules/object-curly-spacing.html) jscs: [`disallowSpacesInsideObjectBrackets`](http://jscs.info/rule/disallowSpacesInsideObjectBrackets) ```javascript // bad @@ -2006,6 +2022,18 @@ Other Style Guides // good const foo = { clark: 'kent' }; + + // bad + const {foo, bar} = fooBar; + + // good + const { foo, bar } = fooBar; + + // bad + function({foo, bar}) {...} + + // good + function({ foo, bar }) {...} ``` @@ -2039,7 +2067,8 @@ Other Style Guides ## Commas - - [19.1](#commas--leading-trailing) Leading commas: **Nope.** eslint: [`comma-style`](http://eslint.org/docs/rules/comma-style.html) jscs: [`requireCommaBeforeLineBreak`](http://jscs.info/rule/requireCommaBeforeLineBreak) + - [19.1](#commas--leading-trailing) Leading commas: **Nope.** Use coma after last element if they are on multiple lines. + - eslint: [`comma-style`](http://eslint.org/docs/rules/comma-style.html) jscs: [`requireCommaBeforeLineBreak`](http://jscs.info/rule/requireCommaBeforeLineBreak) ```javascript // bad @@ -2210,7 +2239,7 @@ Other Style Guides ``` - - [21.5](#coercion--bitwise) **Note:** Be careful when using bitshift operations. Numbers are represented as [64-bit values](http://es5.github.io/#x4.3.19), but bitshift operations always return a 32-bit integer ([source](http://es5.github.io/#x11.7)). Bitshift can lead to unexpected behavior for integer values larger than 32 bits. [Discussion](https://github.com/airbnb/javascript/issues/109). Largest signed 32-bit Int is 2,147,483,647: + - [21.5](#coercion--bitwise) **Note:** Use it only if you know what you're doing! Be careful when using bitshift operations. Numbers are represented as [64-bit values](http://es5.github.io/#x4.3.19), but bitshift operations always return a 32-bit integer ([source](http://es5.github.io/#x11.7)). Bitshift can lead to unexpected behavior for integer values larger than 32 bits. [Discussion](https://github.com/airbnb/javascript/issues/109). Largest signed 32-bit Int is 2,147,483,647: ```javascript 2147483647 >> 0 //=> 2147483647 diff --git a/linters/.eslintrc b/linters/.eslintrc index 9e203a5473..3ca1b9b138 100644 --- a/linters/.eslintrc +++ b/linters/.eslintrc @@ -1,5 +1,5 @@ // Use this file as a starting point for your project's .eslintrc. // Copy this file, and add rule overrides as needed. { - "extends": "airbnb" + "extends": "evozonjs", } diff --git a/linters/README.md b/linters/README.md index 1deac701c7..d6e1c40157 100644 --- a/linters/README.md +++ b/linters/README.md @@ -4,7 +4,7 @@ Our `.eslintrc` requires the following NPM packages: ``` npm install --save-dev \ - eslint-config-airbnb \ + eslint-config-evozonjs \ eslint \ babel-eslint \ eslint-plugin-react diff --git a/package.json b/package.json index dc0225dc08..ea82887f3a 100644 --- a/package.json +++ b/package.json @@ -1,14 +1,14 @@ { - "name": "airbnb-style", - "version": "2.0.0", - "description": "A mostly reasonable approach to JavaScript.", + "name": "evozonjs-style", + "version": "1.0.0", + "description": "A mostly reasonable approach to JavaScript forked from airbnb-style", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "publish-all": "npm publish && cd ./packages/eslint-config-airbnb && npm publish" }, "repository": { "type": "git", - "url": "https://github.com/airbnb/javascript.git" + "url": "https://github.com/evozonjs/javascript.git" }, "keywords": [ "style guide", @@ -20,9 +20,19 @@ "jsx" ], "author": "Harrison Shoff (https://twitter.com/hshoff)", + "contributors": [ + { + "name": "Alex Pausan", + "url": "https://github.com/alexpausan" + }, + { + "name": "Robert Richter", + "url": "https://github.com/robi-richter" + } + ], "license": "MIT", "bugs": { - "url": "https://github.com/airbnb/javascript/issues" + "url": "https://github.com/evozonjs/javascript/issues" }, - "homepage": "https://github.com/airbnb/javascript" + "homepage": "https://github.com/evozonjs/javascript" } diff --git a/packages/eslint-config-airbnb/package.json b/packages/eslint-config-airbnb/package.json index 6c8a89d24f..79a2e0195e 100644 --- a/packages/eslint-config-airbnb/package.json +++ b/packages/eslint-config-airbnb/package.json @@ -10,7 +10,7 @@ }, "repository": { "type": "git", - "url": "https://github.com/airbnb/javascript" + "url": "https://github.com/evozonjs/javascript" }, "keywords": [ "eslint", @@ -38,9 +38,9 @@ ], "license": "MIT", "bugs": { - "url": "https://github.com/airbnb/javascript/issues" + "url": "https://github.com/evozonjs/javascript/issues" }, - "homepage": "https://github.com/airbnb/javascript", + "homepage": "https://github.com/evozonjs/javascript", "devDependencies": { "babel-tape-runner": "^1.3.1", "eslint": "^2.7.0", diff --git a/react/README.md b/react/README.md index bdbd27eb11..442ba5381c 100644 --- a/react/README.md +++ b/react/README.md @@ -70,8 +70,8 @@ ## Naming - - **Extensions**: Use `.jsx` extension for React components. - - **Filename**: Use PascalCase for filenames. E.g., `ReservationCard.jsx`. + - **Extensions**: Use `.js` extension for React components. + - **Filename**: Use PascalCase for filenames. E.g., `ReservationCard.js`. - **Reference Naming**: Use PascalCase for React components and camelCase for their instances. eslint: [`react/jsx-pascal-case`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-pascal-case.md) ```jsx @@ -88,7 +88,7 @@ const reservationItem = ; ``` - - **Component Naming**: Use the filename as the component name. For example, `ReservationCard.jsx` should have a reference name of `ReservationCard`. However, for root components of a directory, use `index.jsx` as the filename and use the directory name as the component name: + - **Component Naming**: Use the filename as the component name. For example, `ReservationCard.js` should have a reference name of `ReservationCard`. However, for root components of a directory, use `index.js` as the filename and use the directory name as the component name: ```jsx // bad @@ -115,6 +115,10 @@ // good export default class ReservationCard extends React.Component { } + + // good + export default function DummyComponent () { + } ``` ## Alignment