github/javascript
1
1
Fork 0
mirror of https://github.com/airbnb/javascript.git synced 2026-01-14 22:38:16 -05:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #695 from airbnb/move-rules

Browse Source 
[rule links] reduce visual clutter
This commit is contained in:
Harrison Shoff
2016-01-25 22:40:20 -08:00
parent 02e1b4e395 7293a0f02d
commit 2a7e19a191
2 changed files with 61 additions and 229 deletions
Download Patch File Download Diff File Expand all files Collapse all files

238
README.md
View File

@@ -87,12 +87,10 @@ Other Style Guides
## References
- [2.1](#2.1) <a name='2.1'></a> Use `const` for all of your references; avoid using `var`.
- [2.1](#2.1) <a name='2.1'></a> Use `const` for all of your references; avoid using `var`. eslint: [`prefer-const`](http://eslint.org/docs/rules/prefer-const.html), [`no-const-assign`](http://eslint.org/docs/rules/no-const-assign.html)
> Why? This ensures that you can't reassign your references, which can lead to bugs and difficult to comprehend code.
eslint rules: [`prefer-const`](http://eslint.org/docs/rules/prefer-const.html), [`no-const-assign`](http://eslint.org/docs/rules/no-const-assign.html).
```javascript
// bad
var a = 1;
@@ -103,14 +101,10 @@ Other Style Guides
const b = 2;
```
- [2.2](#2.2) <a name='2.2'></a> If you must reassign references, use `let` instead of `var`.
- [2.2](#2.2) <a name='2.2'></a> If you must reassign references, use `let` instead of `var`. eslint: [`no-var`](http://eslint.org/docs/rules/no-var.html) jscs: [`disallowVar`](http://jscs.info/rule/disallowVar)
> Why? `let` is block-scoped rather than function-scoped like `var`.
eslint rules: [`no-var`](http://eslint.org/docs/rules/no-var.html).
jscs rules: [`disallowVar`](http://jscs.info/rule/disallowVar).
```javascript
// bad
var count = 1;
@@ -141,9 +135,7 @@ Other Style Guides
## Objects
- [3.1](#3.1) <a name='3.1'></a> Use the literal syntax for object creation.
eslint rules: [`no-new-object`](http://eslint.org/docs/rules/no-new-object.html).
- [3.1](#3.1) <a name='3.1'></a> Use the literal syntax for object creation. eslint: [`no-new-object`](http://eslint.org/docs/rules/no-new-object.html)
```javascript
// bad
@@ -153,9 +145,7 @@ Other Style Guides
const item = {};
```
- [3.2](#3.2) <a name='3.2'></a> If your code will be executed in browsers in script context, don't use [reserved words](http://es5.github.io/#x7.6.1) as keys. It won't work in IE8. [More info](https://github.com/airbnb/javascript/issues/61). It’s OK to use them in ES6 modules and server-side code.
jscs rules: [`disallowIdentiferNames`](http://jscs.info/rule/disallowIdentifierNames).
- [3.2](#3.2) <a name='3.2'></a> If your code will be executed in browsers in script context, don't use [reserved words](http://es5.github.io/#x7.6.1) as keys. It won't work in IE8. [More info](https://github.com/airbnb/javascript/issues/61). It’s OK to use them in ES6 modules and server-side code. jscs: [`disallowIdentiferNames`](http://jscs.info/rule/disallowIdentifierNames)
```javascript
// bad
@@ -171,9 +161,7 @@ Other Style Guides
};
```
- [3.3](#3.3) <a name='3.3'></a> Use readable synonyms in place of reserved words.
jscs rules: [`disallowIdentiferNames`](http://jscs.info/rule/disallowIdentifierNames).
- [3.3](#3.3) <a name='3.3'></a> Use readable synonyms in place of reserved words. jscs: [`disallowIdentiferNames`](http://jscs.info/rule/disallowIdentifierNames)
```javascript
// bad
@@ -219,11 +207,7 @@ Other Style Guides
```
<a name="es6-object-shorthand"></a>
- [3.5](#3.5) <a name='3.5'></a> Use object method shorthand.
eslint rules: [`object-shorthand`](http://eslint.org/docs/rules/object-shorthand.html).
jscs rules: [`requireEnhancedObjectLiterals`](http://jscs.info/rule/requireEnhancedObjectLiterals).
- [3.5](#3.5) <a name='3.5'></a> Use object method shorthand. eslint: [`object-shorthand`](http://eslint.org/docs/rules/object-shorthand.html) jscs: [`requireEnhancedObjectLiterals`](http://jscs.info/rule/requireEnhancedObjectLiterals)
```javascript
// bad
@@ -246,14 +230,10 @@ Other Style Guides
```
<a name="es6-object-concise"></a>
- [3.6](#3.6) <a name='3.6'></a> Use property value shorthand.
- [3.6](#3.6) <a name='3.6'></a> Use property value shorthand. eslint: [`object-shorthand`](http://eslint.org/docs/rules/object-shorthand.html) jscs: [`requireEnhancedObjectLiterals`](http://jscs.info/rule/requireEnhancedObjectLiterals)
> Why? It is shorter to write and descriptive.
eslint rules: [`object-shorthand`](http://eslint.org/docs/rules/object-shorthand.html).
jscs rules: [`requireEnhancedObjectLiterals`](http://jscs.info/rule/requireEnhancedObjectLiterals).
```javascript
const lukeSkywalker = 'Luke Skywalker';
@@ -297,14 +277,10 @@ Other Style Guides
};
```
- [3.8](#3.8) <a name="3.8"></a> Only quote properties that are invalid identifiers.
- [3.8](#3.8) <a name="3.8"></a> Only quote properties that are invalid identifiers. eslint: [`quote-props`](http://eslint.org/docs/rules/quote-props.html) jscs: [`disallowQuotedKeysInObjects`](http://jscs.info/rule/disallowQuotedKeysInObjects)
> Why? In general we consider it subjectively easier to read. It improves syntax highlighting, and is also more easily optimized by many JS engines.
eslint rules: [`quote-props`](http://eslint.org/docs/rules/quote-props.html).
jscs rules: [`disallowQuotedKeysInObjects`](http://jscs.info/rule/disallowQuotedKeysInObjects).
```javascript
// bad
const bad = {
@@ -325,9 +301,7 @@ Other Style Guides
## Arrays
- [4.1](#4.1) <a name='4.1'></a> Use the literal syntax for array creation.
eslint rules: [`no-array-constructor`](http://eslint.org/docs/rules/no-array-constructor.html).
- [4.1](#4.1) <a name='4.1'></a> Use the literal syntax for array creation. eslint: [`no-array-constructor`](http://eslint.org/docs/rules/no-array-constructor.html)
```javascript
// bad
@@ -376,12 +350,10 @@ Other Style Guides
## Destructuring
- [5.1](#5.1) <a name='5.1'></a> Use object destructuring when accessing and using multiple properties of an object.
- [5.1](#5.1) <a name='5.1'></a> Use object destructuring when accessing and using multiple properties of an object. jscs: [`requireObjectDestructuring`](http://jscs.info/rule/requireObjectDestructuring)
> Why? Destructuring saves you from creating temporary references for those properties.
jscs rules: [`requireObjectDestructuring`](http://jscs.info/rule/requireObjectDestructuring).
```javascript
// bad
function getFullName(user) {
@@ -403,9 +375,7 @@ Other Style Guides
}
```
- [5.2](#5.2) <a name='5.2'></a> Use array destructuring.
jscs rules: [`requireArrayDestructuring`](http://jscs.info/rule/requireArrayDestructuring).
- [5.2](#5.2) <a name='5.2'></a> Use array destructuring. jscs: [`requireArrayDestructuring`](http://jscs.info/rule/requireArrayDestructuring)
```javascript
const arr = [1, 2, 3, 4];
@@ -447,11 +417,7 @@ Other Style Guides
## Strings
- [6.1](#6.1) <a name='6.1'></a> Use single quotes `''` for strings.
eslint rules: [`quotes`](http://eslint.org/docs/rules/quotes.html).
jscs rules: [`validateQuoteMarks`](http://jscs.info/rule/validateQuoteMarks).
- [6.1](#6.1) <a name='6.1'></a> Use single quotes `''` for strings. eslint: [`quotes`](http://eslint.org/docs/rules/quotes.html) jscs: [`validateQuoteMarks`](http://jscs.info/rule/validateQuoteMarks)
```javascript
// bad
@@ -481,14 +447,10 @@ Other Style Guides
```
<a name="es6-template-literals"></a>
- [6.4](#6.4) <a name='6.4'></a> When programmatically building up strings, use template strings instead of concatenation.
- [6.4](#6.4) <a name='6.4'></a> When programmatically building up strings, use template strings instead of concatenation. eslint: [`prefer-template`](http://eslint.org/docs/rules/prefer-template.html) jscs: [`requireTemplateStrings`](http://jscs.info/rule/requireTemplateStrings)
> Why? Template strings give you a readable, concise syntax with proper newlines and string interpolation features.
eslint rules: [`prefer-template`](http://eslint.org/docs/rules/prefer-template.html).
jscs rules: [`requireTemplateStrings`](http://jscs.info/rule/requireTemplateStrings).
```javascript
// bad
function sayHi(name) {
@@ -512,12 +474,10 @@ Other Style Guides
## Functions
- [7.1](#7.1) <a name='7.1'></a> Use function declarations instead of function expressions.
- [7.1](#7.1) <a name='7.1'></a> Use function declarations instead of function expressions. jscs: [`requireFunctionDeclarations`](http://jscs.info/rule/requireFunctionDeclarations)
> Why? Function declarations are named, so they're easier to identify in call stacks. Also, the whole body of a function declaration is hoisted, whereas only the reference of a function expression is hoisted. This rule makes it possible to always use [Arrow Functions](#arrow-functions) in place of function expressions.
jscs rules: [`requireFunctionDeclarations`](http://jscs.info/rule/requireFunctionDeclarations).
```javascript
// bad
const foo = function () {
@@ -528,14 +488,10 @@ Other Style Guides
}
```
- [7.2](#7.2) <a name='7.2'></a> Immediately invoked function expressions:
- [7.2](#7.2) <a name='7.2'></a> Immediately invoked function expressions: eslint: [`wrap-iife`](http://eslint.org/docs/rules/wrap-iife.html) jscs: [`requireParenthesesAroundIIFE`](http://jscs.info/rule/requireParenthesesAroundIIFE)
> Why? An immediately invoked function expression is a single unit - wrapping both it, and its invocation parens, in parens, cleanly expresses this. Note that in a world with modules everywhere, you almost never need an IIFE.
eslint rules: [`wrap-iife`](http://eslint.org/docs/rules/wrap-iife.html).
jscs rules: [`requireParenthesesAroundIIFE`](http://jscs.info/rule/requireParenthesesAroundIIFE).
```javascript
// immediately-invoked function expression (IIFE)
(function () {
@@ -543,9 +499,7 @@ Other Style Guides
}());
```
- [7.3](#7.3) <a name='7.3'></a> Never declare a function in a non-function block (if, while, etc). Assign the function to a variable instead. Browsers will allow you to do it, but they all interpret it differently, which is bad news bears.
eslint rules: [`no-loop-func`](http://eslint.org/docs/rules/no-loop-func.html).
- [7.3](#7.3) <a name='7.3'></a> Never declare a function in a non-function block (if, while, etc). Assign the function to a variable instead. Browsers will allow you to do it, but they all interpret it differently, which is bad news bears. eslint: [`no-loop-func`](http://eslint.org/docs/rules/no-loop-func.html)
- [7.4](#7.4) <a name='7.4'></a> **Note:** ECMA-262 defines a `block` as a list of statements. A function declaration is not a statement. [Read ECMA-262's note on this issue](http://www.ecma-international.org/publications/files/ECMA-ST/Ecma-262.pdf#page=97).
@@ -682,12 +636,10 @@ Other Style Guides
const y = function a() {};
```
- [7.12](#7.12) <a name="7.12"></a> Never mutate parameters.
- [7.12](#7.12) <a name="7.12"></a> Never mutate parameters. eslint: [`no-param-reassign`](http://eslint.org/docs/rules/no-param-reassign.html)
> Why? Manipulating objects passed in as parameters can cause unwanted variable side effects in the original caller.
eslint rules: [`no-param-reassign`](http://eslint.org/docs/rules/no-param-reassign.html).
```javascript
// bad
function f1(obj) {
@@ -700,12 +652,10 @@ Other Style Guides
};
```
- [7.13](#7.13) <a name="7.13"></a> Never reassign parameters.
- [7.13](#7.13) <a name="7.13"></a> Never reassign parameters. eslint: [`no-param-reassign`](http://eslint.org/docs/rules/no-param-reassign.html)
> Why? Reassigning parameters can lead to unexpected behavior, especially when accessing the `arguments` object. It can also cause optimization issues, especially in V8.
eslint rules: [`no-param-reassign`](http://eslint.org/docs/rules/no-param-reassign.html).
```javascript
// bad
function f1(a) {
@@ -729,15 +679,11 @@ Other Style Guides
## Arrow Functions
- [8.1](#8.1) <a name='8.1'></a> When you must use function expressions (as when passing an anonymous function), use arrow function notation.
- [8.1](#8.1) <a name='8.1'></a> When you must use function expressions (as when passing an anonymous function), use arrow function notation. eslint: [`prefer-arrow-callback`](http://eslint.org/docs/rules/prefer-arrow-callback.html), [`arrow-spacing`](http://eslint.org/docs/rules/arrow-spacing.html) jscs: [`requireArrowFunctions`](http://jscs.info/rule/requireArrowFunctions)
> Why? It creates a version of the function that executes in the context of `this`, which is usually what you want, and is a more concise syntax.
> Why not? If you have a fairly complicated function, you might move that logic out into its own function declaration.
eslint rules: [`prefer-arrow-callback`](http://eslint.org/docs/rules/prefer-arrow-callback.html), [`arrow-spacing`](http://eslint.org/docs/rules/arrow-spacing.html).
jscs rules: [`requireArrowFunctions`](http://jscs.info/rule/requireArrowFunctions).
> Why not? If you have a fairly complicated function, you might move that logic out into its own function declaration..
```javascript
// bad
@@ -753,16 +699,12 @@ Other Style Guides
});
```
- [8.2](#8.2) <a name='8.2'></a> If the function body consists of a single expression, omit the braces and use the implicit return. Otherwise, keep the braces and use a `return` statement.
- [8.2](#8.2) <a name='8.2'></a> If the function body consists of a single expression, omit the braces and use the implicit return. Otherwise, keep the braces and use a `return` statement. eslint: [`arrow-parens`](http://eslint.org/docs/rules/arrow-parens.html), [`arrow-body-style`](http://eslint.org/docs/rules/arrow-body-style.html) jscs: [`disallowParenthesesAroundArrowParam`](http://jscs.info/rule/disallowParenthesesAroundArrowParam), [`requireShorthandArrowFunctions`](http://jscs.info/rule/requireShorthandArrowFunctions)
> Why? Syntactic sugar. It reads well when multiple functions are chained together.
> Why not? If you plan on returning an object.
eslint rules: [`arrow-parens`](http://eslint.org/docs/rules/arrow-parens.html), [`arrow-body-style`](http://eslint.org/docs/rules/arrow-body-style.html).
jscs rules: [`disallowParenthesesAroundArrowParam`](http://jscs.info/rule/disallowParenthesesAroundArrowParam), [`requireShorthandArrowFunctions`](http://jscs.info/rule/requireShorthandArrowFunctions).
```javascript
// good
[1, 2, 3].map(number => `A string containing the ${number}.`);
@@ -799,14 +741,10 @@ Other Style Guides
```
- [8.4](#8.4) <a name='8.4'></a> If your function takes a single argument and doesn’t use braces, omit the parentheses. Otherwise, always include parentheses around arguments.
- [8.4](#8.4) <a name='8.4'></a> 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)
> Why? Less visual clutter.
eslint rules: [`arrow-parens`](http://eslint.org/docs/rules/arrow-parens.html).
jscs rules: [`disallowParenthesesAroundArrowParam`](http://jscs.info/rule/disallowParenthesesAroundArrowParam).
```js
// bad
[1, 2, 3].map((x) => x * x);
@@ -999,12 +937,10 @@ Other Style Guides
## Iterators and Generators
- [11.1](#11.1) <a name='11.1'></a> Don't use iterators. Prefer JavaScript's higher-order functions like `map()` and `reduce()` instead of loops like `for-of`.
- [11.1](#11.1) <a name='11.1'></a> Don't use iterators. Prefer JavaScript's higher-order functions like `map()` and `reduce()` instead of loops like `for-of`. eslint: [`no-iterator`](http://eslint.org/docs/rules/no-iterator.html)
> Why? This enforces our immutable rule. Dealing with pure functions that return values is easier to reason about than side-effects.
eslint rules: [`no-iterator`](http://eslint.org/docs/rules/no-iterator.html).
```javascript
const numbers = [1, 2, 3, 4, 5];
@@ -1035,11 +971,7 @@ Other Style Guides
## Properties
- [12.1](#12.1) <a name='12.1'></a> Use dot notation when accessing properties.
eslint rules: [`dot-notation`](http://eslint.org/docs/rules/dot-notation.html).
jscs rules: [`requireDotNotation`](http://jscs.info/rule/requireDotNotation).
- [12.1](#12.1) <a name='12.1'></a> Use dot notation when accessing properties. eslint: [`dot-notation`](http://eslint.org/docs/rules/dot-notation.html) jscs: [`requireDotNotation`](http://jscs.info/rule/requireDotNotation)
```javascript
const luke = {
@@ -1084,14 +1016,10 @@ Other Style Guides
const superPower = new SuperPower();
```
- [13.2](#13.2) <a name='13.2'></a> Use one `const` declaration per variable.
- [13.2](#13.2) <a name='13.2'></a> Use one `const` declaration per variable. eslint: [`one-var`](http://eslint.org/docs/rules/one-var.html) jscs: [`disallowMultipleVarDecl`](http://jscs.info/rule/disallowMultipleVarDecl)
> Why? It's easier to add new variable declarations this way, and you never have to worry about swapping out a `;` for a `,` or introducing punctuation-only diffs.
eslint rules: [`one-var`](http://eslint.org/docs/rules/one-var.html).
jscs rules: [`disallowMultipleVarDecl`](http://jscs.info/rule/disallowMultipleVarDecl).
```javascript
// bad
const items = getItems(),
@@ -1274,12 +1202,10 @@ Other Style Guides
## Comparison Operators & Equality
- [15.1](#15.1) <a name='15.1'></a> Use `===` and `!==` over `==` and `!=`.
- [15.1](#15.1) <a name='15.1'></a> Use `===` and `!==` over `==` and `!=`. eslint: [`eqeqeq`](http://eslint.org/docs/rules/eqeqeq.html)
- [15.2](#15.2) <a name='15.2'></a> Conditional statements such as the `if` statement evaluate their expression using coercion with the `ToBoolean` abstract method and always follow these simple rules:
eslint rules: [`eqeqeq`](http://eslint.org/docs/rules/eqeqeq.html).
+ **Objects** evaluate to **true**
+ **Undefined** evaluates to **false**
+ **Null** evaluates to **false**
@@ -1350,11 +1276,7 @@ Other Style Guides
```
- [16.2](#16.2) <a name='16.2'></a> If you're using multi-line blocks with `if` and `else`, put `else` on the same line as your
`if` block's closing brace.
eslint rules: [`brace-style`](http://eslint.org/docs/rules/brace-style.html).
jscs rules: [`disallowNewlineBeforeBlockStatements`](http://jscs.info/rule/disallowNewlineBeforeBlockStatements).
`if` block's closing brace. eslint: [`brace-style`](http://eslint.org/docs/rules/brace-style.html) jscs: [`disallowNewlineBeforeBlockStatements`](http://jscs.info/rule/disallowNewlineBeforeBlockStatements)
```javascript
// bad
@@ -1484,11 +1406,7 @@ Other Style Guides
## Whitespace
- [18.1](#18.1) <a name='18.1'></a> Use soft tabs set to 2 spaces.
eslint rules: [`indent`](http://eslint.org/docs/rules/indent.html).
jscs rules: [`validateIndentation`](http://jscs.info/rule/validateIndentation).
- [18.1](#18.1) <a name='18.1'></a> Use soft tabs set to 2 spaces. eslint: [`indent`](http://eslint.org/docs/rules/indent.html) jscs: [`validateIndentation`](http://jscs.info/rule/validateIndentation)
```javascript
// bad
@@ -1507,11 +1425,7 @@ Other Style Guides
}
```
- [18.2](#18.2) <a name='18.2'></a> Place 1 space before the leading brace.
eslint rules: [`space-before-blocks`](http://eslint.org/docs/rules/space-before-blocks.html).
jscs rules: [`requireSpaceBeforeBlockStatements`](http://jscs.info/rule/requireSpaceBeforeBlockStatements).
- [18.2](#18.2) <a name='18.2'></a> Place 1 space before the leading brace. eslint: [`space-before-blocks`](http://eslint.org/docs/rules/space-before-blocks.html) jscs: [`requireSpaceBeforeBlockStatements`](http://jscs.info/rule/requireSpaceBeforeBlockStatements)
```javascript
// bad
@@ -1537,11 +1451,7 @@ Other Style Guides
});
```
- [18.3](#18.3) <a name='18.3'></a> Place 1 space before the opening parenthesis in control statements (`if`, `while` etc.). Place no space between the argument list and the function name in function calls and declarations.
eslint rules: [`space-after-keywords`](http://eslint.org/docs/rules/space-after-keywords.html), [`space-before-keywords`](http://eslint.org/docs/rules/space-before-keywords.html).
jscs rules: [`requireSpaceAfterKeywords`](http://jscs.info/rule/requireSpaceAfterKeywords).
- [18.3](#18.3) <a name='18.3'></a> Place 1 space before the opening parenthesis in control statements (`if`, `while` etc.). Place no space between the argument list and the function name in function calls and declarations. eslint: [`space-after-keywords`](http://eslint.org/docs/rules/space-after-keywords.html), [`space-before-keywords`](http://eslint.org/docs/rules/space-before-keywords.html) jscs: [`requireSpaceAfterKeywords`](http://jscs.info/rule/requireSpaceAfterKeywords)
```javascript
// bad
@@ -1565,11 +1475,7 @@ Other Style Guides
}
```
- [18.4](#18.4) <a name='18.4'></a> Set off operators with spaces.
eslint rules: [`space-infix-ops`](http://eslint.org/docs/rules/space-infix-ops.html).
jscs rules: [`requireSpaceBeforeBinaryOperators`](http://jscs.info/rule/requireSpaceBeforeBinaryOperators), [`requireSpaceAfterBinaryOperators`](http://jscs.info/rule/requireSpaceAfterBinaryOperators).
- [18.4](#18.4) <a name='18.4'></a> Set off operators with spaces. eslint: [`space-infix-ops`](http://eslint.org/docs/rules/space-infix-ops.html) jscs: [`requireSpaceBeforeBinaryOperators`](http://jscs.info/rule/requireSpaceBeforeBinaryOperators), [`requireSpaceAfterBinaryOperators`](http://jscs.info/rule/requireSpaceAfterBinaryOperators)
```javascript
// bad
@@ -1643,9 +1549,7 @@ Other Style Guides
.call(tron.led);
```
- [18.7](#18.7) <a name='18.7'></a> Leave a blank line after blocks and before the next statement.
jscs rules: [`requirePaddingNewLinesAfterBlocks`](http://jscs.info/rule/requirePaddingNewLinesAfterBlocks).
- [18.7](#18.7) <a name='18.7'></a> Leave a blank line after blocks and before the next statement. jscs: [`requirePaddingNewLinesAfterBlocks`](http://jscs.info/rule/requirePaddingNewLinesAfterBlocks)
```javascript
// bad
@@ -1702,11 +1606,7 @@ Other Style Guides
return arr;
```
- [18.8](#18.8) <a name='18.8'></a> Do not pad your blocks with blank lines.
eslint rules: [`padded-blocks`](http://eslint.org/docs/rules/padded-blocks.html).
jscs rules: [`disallowPaddingNewlinesInBlocks`](http://jscs.info/rule/disallowPaddingNewlinesInBlocks).
- [18.8](#18.8) <a name='18.8'></a> Do not pad your blocks with blank lines. eslint: [`padded-blocks`](http://eslint.org/docs/rules/padded-blocks.html) jscs: [`disallowPaddingNewlinesInBlocks`](http://jscs.info/rule/disallowPaddingNewlinesInBlocks)
```javascript
// bad
@@ -1738,11 +1638,7 @@ Other Style Guides
}
```
- [18.9](#18.9) <a name='18.9'></a> Do not add spaces inside parentheses.
eslint rules: [`space-in-parens`](http://eslint.org/docs/rules/space-in-parens.html).
jscs rules: [`disallowSpacesInsideParentheses`](http://jscs.info/rule/disallowSpacesInsideParentheses).
- [18.9](#18.9) <a name='18.9'></a> Do not add spaces inside parentheses. eslint: [`space-in-parens`](http://eslint.org/docs/rules/space-in-parens.html) jscs: [`disallowSpacesInsideParentheses`](http://jscs.info/rule/disallowSpacesInsideParentheses)
```javascript
// bad
@@ -1766,11 +1662,7 @@ Other Style Guides
}
```
- [18.10](#18.10) <a name='18.10'></a> Do not add spaces inside brackets.
eslint rules: [`array-bracket-spacing`](http://eslint.org/docs/rules/array-bracket-spacing.html).
jscs rules: [`disallowSpacesInsideArrayBrackets`](http://jscs.info/rule/disallowSpacesInsideArrayBrackets).
- [18.10](#18.10) <a name='18.10'></a> Do not add spaces inside brackets. eslint: [`array-bracket-spacing`](http://eslint.org/docs/rules/array-bracket-spacing.html) jscs: [`disallowSpacesInsideArrayBrackets`](http://jscs.info/rule/disallowSpacesInsideArrayBrackets)
```javascript
// bad
@@ -1782,11 +1674,7 @@ Other Style Guides
console.log(foo[0]);
```
- [18.11](#18.11) <a name='18.11'></a> Add spaces inside curly braces.
eslint rules: [`object-curly-spacing`](http://eslint.org/docs/rules/object-curly-spacing.html).
jscs rules: [`disallowSpacesInsideObjectBrackets`](http://jscs.info/rule/disallowSpacesInsideObjectBrackets).
- [18.11](#18.11) <a name='18.11'></a> 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)
```javascript
// bad
@@ -1796,14 +1684,10 @@ Other Style Guides
const foo = { clark: 'kent' };
```
- [18.12](#18.12) <a name='18.12'></a> Avoid having lines of code that are longer than 100 characters (including whitespace).
- [18.12](#18.12) <a name='18.12'></a> Avoid having lines of code that are longer than 100 characters (including whitespace). eslint: [`max-len`](http://eslint.org/docs/rules/max-len.html) jscs: [`maximumLineLength`](http://jscs.info/rule/maximumLineLength)
> Why? This ensures readability and maintainability.
eslint rules: [`max-len`](http://eslint.org/docs/rules/max-len.html).
jscs rules: [`maximumLineLength`](http://jscs.info/rule/maximumLineLength).
```javascript
// bad
const foo = 'Whatever national crop flips the window. The cartoon reverts within the screw. Whatever wizard constrains a helpful ally. The counterpart ascends!';
@@ -1829,11 +1713,7 @@ Other Style Guides
## Commas
- [19.1](#19.1) <a name='19.1'></a> Leading commas: **Nope.**
eslint rules: [`comma-style`](http://eslint.org/docs/rules/comma-style.html).
jscs rules: [`requireCommaBeforeLineBreak`](http://jscs.info/rule/requireCommaBeforeLineBreak).
- [19.1](#19.1) <a name='19.1'></a> Leading commas: **Nope.** eslint: [`comma-style`](http://eslint.org/docs/rules/comma-style.html) jscs: [`requireCommaBeforeLineBreak`](http://jscs.info/rule/requireCommaBeforeLineBreak)
```javascript
// bad
@@ -1867,11 +1747,7 @@ Other Style Guides
};
```
- [19.2](#19.2) <a name='19.2'></a> Additional trailing comma: **Yup.**
eslint rules: [`comma-dangle`](http://eslint.org/docs/rules/comma-dangle.html).
jscs rules: [`requireTrailingComma`](http://jscs.info/rule/requireTrailingComma).
- [19.2](#19.2) <a name='19.2'></a> 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](es5/README.md#commas) in legacy browsers.
@@ -1919,11 +1795,7 @@ Other Style Guides
## Semicolons
- [20.1](#20.1) <a name='20.1'></a> **Yup.**
eslint rules: [`semi`](http://eslint.org/docs/rules/semi.html).
jscs rules: [`requireSemicolons`](http://jscs.info/rule/requireSemicolons).
- [20.1](#20.1) <a name='20.1'></a> **Yup.** eslint: [`semi`](http://eslint.org/docs/rules/semi.html) jscs: [`requireSemicolons`](http://jscs.info/rule/requireSemicolons)
```javascript
// bad
@@ -1965,9 +1837,7 @@ Other Style Guides
const totalScore = String(this.reviewScore);
```
- [21.3](#21.3) <a name='21.3'></a> Numbers: Use `Number` for type casting and `parseInt` always with a radix for parsing strings.
eslint rules: [`radix`](http://eslint.org/docs/rules/radix).
- [21.3](#21.3) <a name='21.3'></a> 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';
@@ -2045,11 +1915,7 @@ Other Style Guides
}
```
- [22.2](#22.2) <a name='22.2'></a> Use camelCase when naming objects, functions, and instances.
eslint rules: [`camelcase`](http://eslint.org/docs/rules/camelcase.html).
jscs rules: [`requireCamelCaseOrUpperCaseIdentifiers`](http://jscs.info/rule/requireCamelCaseOrUpperCaseIdentifiers).
- [22.2](#22.2) <a name='22.2'></a> Use camelCase when naming objects, functions, and instances. eslint: [`camelcase`](http://eslint.org/docs/rules/camelcase.html) jscs: [`requireCamelCaseOrUpperCaseIdentifiers`](http://jscs.info/rule/requireCamelCaseOrUpperCaseIdentifiers)
```javascript
// bad
@@ -2062,11 +1928,7 @@ Other Style Guides
function thisIsMyFunction() {}
```
- [22.3](#22.3) <a name='22.3'></a> Use PascalCase when naming constructors or classes.
eslint rules: [`new-cap`](http://eslint.org/docs/rules/new-cap.html).
jscs rules: [`requireCapitalizedConstructors`](http://jscs.info/rule/requireCapitalizedConstructors).
- [22.3](#22.3) <a name='22.3'></a> Use PascalCase when naming constructors or classes. eslint: [`new-cap`](http://eslint.org/docs/rules/new-cap.html) jscs: [`requireCapitalizedConstructors`](http://jscs.info/rule/requireCapitalizedConstructors)
```javascript
// bad
@@ -2090,11 +1952,7 @@ Other Style Guides
});
```
- [22.4](#22.4) <a name='22.4'></a> Use a leading underscore `_` when naming private properties.
eslint rules: [`no-underscore-dangle`](http://eslint.org/docs/rules/no-underscore-dangle.html).
jscs rules: [`disallowDanglingUnderscores`](http://jscs.info/rule/disallowDanglingUnderscores).
- [22.4](#22.4) <a name='22.4'></a> Use a leading underscore `_` when naming private properties. eslint: [`no-underscore-dangle`](http://eslint.org/docs/rules/no-underscore-dangle.html) jscs: [`disallowDanglingUnderscores`](http://jscs.info/rule/disallowDanglingUnderscores)
```javascript
// bad
@@ -2105,9 +1963,7 @@ Other Style Guides
this._firstName = 'Panda';
```
- [22.5](#22.5) <a name='22.5'></a> Don't save references to `this`. Use arrow functions or Function#bind.
jscs rules: [`disallowNodeTypes`](http://jscs.info/rule/disallowNodeTypes).
- [22.5](#22.5) <a name='22.5'></a> Don't save references to `this`. Use arrow functions or Function#bind. jscs: [`disallowNodeTypes`](http://jscs.info/rule/disallowNodeTypes)
```javascript
// bad
@@ -2266,9 +2122,7 @@ Other Style Guides
## jQuery
- [25.1](#25.1) <a name='25.1'></a> Prefix jQuery object variables with a `$`.
jscs rules: [`requireDollarBeforejQueryAssignment`](http://jscs.info/rule/requireDollarBeforejQueryAssignment).
- [25.1](#25.1) <a name='25.1'></a> Prefix jQuery object variables with a `$`. jscs: [`requireDollarBeforejQueryAssignment`](http://jscs.info/rule/requireDollarBeforejQueryAssignment)
```javascript
// bad

52
react/README.md
View File

@@ -21,15 +21,13 @@
## Basic Rules
- Only include one React component per file.
- However, multiple [Stateless, or Pure, Components](https://facebook.github.io/react/docs/reusable-components.html#stateless-functions) are allowed per file. eslint rule: [`react/no-multi-comp`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/no-multi-comp.md#ignorestateless).
- However, multiple [Stateless, or Pure, Components](https://facebook.github.io/react/docs/reusable-components.html#stateless-functions) are allowed per file. eslint: [`react/no-multi-comp`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/no-multi-comp.md#ignorestateless).
- Always use JSX syntax.
- Do not use `React.createElement` unless you're initializing the app from a file that is not JSX.
## Class vs `React.createClass` vs stateless
- If you have internal state and/or refs, prefer `class extends React.Component` over `React.createClass` unless you have a very good reason to use mixins.
eslint rules: [`react/prefer-es6-class`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/prefer-es6-class.md).
- If you have internal state and/or refs, prefer `class extends React.Component` over `React.createClass` unless you have a very good reason to use mixins. eslint: [`react/prefer-es6-class`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/prefer-es6-class.md)
```javascript
// bad
@@ -48,9 +46,9 @@
}
}
```
And if you don't have state or refs, prefer functions over classes:
```javascript
// bad
@@ -59,7 +57,7 @@
return <div>{this.props.hello}</div>;
}
}
// good
function Listing({ hello }) {
return <div>{hello}</div>;
@@ -70,9 +68,7 @@
- **Extensions**: Use `.jsx` extension for React components.
- **Filename**: Use PascalCase for filenames. E.g., `ReservationCard.jsx`.
- **Reference Naming**: Use PascalCase for React components and camelCase for their instances.
eslint rules: [`react/jsx-pascal-case`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-pascal-case.md).
- **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)
```javascript
// bad
@@ -119,9 +115,7 @@
## Alignment
- Follow these alignment styles for JSX syntax
eslint rules: [`react/jsx-closing-bracket-location`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-closing-bracket-location.md).
- Follow these alignment styles for JSX syntax. eslint: [`react/jsx-closing-bracket-location`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-closing-bracket-location.md)
```javascript
// bad
@@ -148,13 +142,11 @@
## Quotes
- Always use double quotes (`"`) for JSX attributes, but single quotes for all other JS.
- Always use double quotes (`"`) for JSX attributes, but single quotes for all other JS. eslint: [`jsx-quotes`](http://eslint.org/docs/rules/jsx-quotes)
> Why? JSX attributes [can't contain escaped quotes](http://eslint.org/docs/rules/jsx-quotes), so double quotes make conjunctions like `"don't"` easier to type.
> Regular HTML attributes also typically use double quotes instead of single, so JSX attributes mirror this convention.
eslint rules: [`jsx-quotes`](http://eslint.org/docs/rules/jsx-quotes).
```javascript
// bad
<Foo bar='bar' />
@@ -206,9 +198,7 @@
/>
```
- Omit the value of the prop when it is explicitly `true`.
eslint rules: [`react/jsx-boolean-value`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-boolean-value.md).
- Omit the value of the prop when it is explicitly `true`. eslint: [`react/jsx-boolean-value`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-boolean-value.md)
```javascript
// bad
@@ -224,9 +214,7 @@
## Parentheses
- Wrap JSX tags in parentheses when they span more than one line.
eslint rules: [`react/wrap-multilines`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/wrap-multilines.md).
- Wrap JSX tags in parentheses when they span more than one line. eslint: [`react/wrap-multilines`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/wrap-multilines.md)
```javascript
// bad
@@ -254,9 +242,7 @@
## Tags
- Always self-close tags that have no children.
eslint rules: [`react/self-closing-comp`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/self-closing-comp.md).
- Always self-close tags that have no children. eslint: [`react/self-closing-comp`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/self-closing-comp.md)
```javascript
// bad
@@ -266,9 +252,7 @@
<Foo className="stuff" />
```
- If your component has multi-line properties, close its tag on a new line.
eslint rules: [`react/jsx-closing-bracket-location`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-closing-bracket-location.md).
- If your component has multi-line properties, close its tag on a new line. eslint: [`react/jsx-closing-bracket-location`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-closing-bracket-location.md)
```javascript
// bad
@@ -285,12 +269,10 @@
## Methods
- Bind event handlers for the render method in the constructor.
- Bind event handlers for the render method in the constructor. eslint: [`react/jsx-no-bind`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-no-bind.md)
> Why? A bind call in the render path creates a brand new function on every single render.
eslint rules: [`react/jsx-no-bind`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-no-bind.md).
```javascript
// bad
class extends React.Component {
@@ -393,7 +375,7 @@
export default Link;
```
- Ordering for `React.createClass`:
- Ordering for `React.createClass`: eslint: [`react/sort-comp`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/sort-comp.md)
1. `displayName`
1. `propTypes`
@@ -417,16 +399,12 @@
1. *Optional render methods* like `renderNavigation()` or `renderProfilePicture()`
1. `render`
eslint rules: [`react/sort-comp`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/sort-comp.md).
## `isMounted`
- Do not use `isMounted`.
- Do not use `isMounted`. eslint: [`react/no-is-mounted`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/no-is-mounted.md)
> Why? [`isMounted` is an anti-pattern][anti-pattern], is not available when using ES6 classes, and is on its way to being officially deprecated.
[anti-pattern]: https://facebook.github.io/react/blog/2015/12/16/ismounted-antipattern.html
eslint rules: [`react/no-is-mounted`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/no-is-mounted.md).
**[⬆ back to top](#table-of-contents)**