From 2c06d87d86d7a52d8807c9fc045f9966ef433cc4 Mon Sep 17 00:00:00 2001 From: Harrison Shoff Date: Mon, 25 Jan 2016 21:46:23 -0800 Subject: [PATCH 1/4] [rule links] reduce visual clutter --- README.md | 238 +++++++++++------------------------------------------- 1 file changed, 46 insertions(+), 192 deletions(-) diff --git a/README.md b/README.md index e26f871164..bb371499ad 100644 --- a/README.md +++ b/README.md @@ -87,12 +87,10 @@ Other Style Guides ## References - - [2.1](#2.1) Use `const` for all of your references; avoid using `var`. + - [2.1](#2.1) Use `const` for all of your references; avoid using `var`. [`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) If you must reassign references, use `let` instead of `var`. + - [2.2](#2.2) If you must reassign references, use `let` instead of `var`. [`no-var`](http://eslint.org/docs/rules/no-var.html), [`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) 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) Use the literal syntax for object creation. [`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) 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) 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. [`disallowIdentiferNames`](http://jscs.info/rule/disallowIdentifierNames) ```javascript // bad @@ -171,9 +161,7 @@ Other Style Guides }; ``` - - [3.3](#3.3) Use readable synonyms in place of reserved words. - - jscs rules: [`disallowIdentiferNames`](http://jscs.info/rule/disallowIdentifierNames). + - [3.3](#3.3) Use readable synonyms in place of reserved words. [`disallowIdentiferNames`](http://jscs.info/rule/disallowIdentifierNames) ```javascript // bad @@ -219,11 +207,7 @@ Other Style Guides ``` - - [3.5](#3.5) 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) Use object method shorthand. [`object-shorthand`](http://eslint.org/docs/rules/object-shorthand.html), [`requireEnhancedObjectLiterals`](http://jscs.info/rule/requireEnhancedObjectLiterals) ```javascript // bad @@ -246,14 +230,10 @@ Other Style Guides ``` - - [3.6](#3.6) Use property value shorthand. + - [3.6](#3.6) Use property value shorthand. [`object-shorthand`](http://eslint.org/docs/rules/object-shorthand.html), [`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) Only quote properties that are invalid identifiers. + - [3.8](#3.8) Only quote properties that are invalid identifiers. [`quote-props`](http://eslint.org/docs/rules/quote-props.html), [`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) 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) Use the literal syntax for array creation. [`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) Use object destructuring when accessing and using multiple properties of an object. + - [5.1](#5.1) Use object destructuring when accessing and using multiple properties of an object. [`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) Use array destructuring. - - jscs rules: [`requireArrayDestructuring`](http://jscs.info/rule/requireArrayDestructuring). + - [5.2](#5.2) Use array destructuring. [`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) 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) Use single quotes `''` for strings. [`quotes`](http://eslint.org/docs/rules/quotes.html), [`validateQuoteMarks`](http://jscs.info/rule/validateQuoteMarks) ```javascript // bad @@ -481,14 +447,10 @@ Other Style Guides ``` - - [6.4](#6.4) When programmatically building up strings, use template strings instead of concatenation. + - [6.4](#6.4) When programmatically building up strings, use template strings instead of concatenation. [`prefer-template`](http://eslint.org/docs/rules/prefer-template.html), [`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) Use function declarations instead of function expressions. + - [7.1](#7.1) Use function declarations instead of function expressions. [`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) Immediately invoked function expressions: + - [7.2](#7.2) Immediately invoked function expressions: [`wrap-iife`](http://eslint.org/docs/rules/wrap-iife.html), [`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) 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) 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. [`no-loop-func`](http://eslint.org/docs/rules/no-loop-func.html) - [7.4](#7.4) **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) Never mutate parameters. + - [7.12](#7.12) Never mutate parameters. [`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) Never reassign parameters. + - [7.13](#7.13) Never reassign parameters. [`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) When you must use function expressions (as when passing an anonymous function), use arrow function notation. + - [8.1](#8.1) When you must use function expressions (as when passing an anonymous function), use arrow function notation. [`prefer-arrow-callback`](http://eslint.org/docs/rules/prefer-arrow-callback.html), [`arrow-spacing`](http://eslint.org/docs/rules/arrow-spacing.html), [`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) 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) 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. [`arrow-parens`](http://eslint.org/docs/rules/arrow-parens.html), [`arrow-body-style`](http://eslint.org/docs/rules/arrow-body-style.html), [`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) 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) If your function takes a single argument and doesn’t use braces, omit the parentheses. Otherwise, always include parentheses around arguments. [`arrow-parens`](http://eslint.org/docs/rules/arrow-parens.html), [`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) Don't use iterators. Prefer JavaScript's higher-order functions like `map()` and `reduce()` instead of loops like `for-of`. + - [11.1](#11.1) Don't use iterators. Prefer JavaScript's higher-order functions like `map()` and `reduce()` instead of loops like `for-of`. [`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) 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) Use dot notation when accessing properties. [`dot-notation`](http://eslint.org/docs/rules/dot-notation.html), [`requireDotNotation`](http://jscs.info/rule/requireDotNotation) ```javascript const luke = { @@ -1084,14 +1016,10 @@ Other Style Guides const superPower = new SuperPower(); ``` - - [13.2](#13.2) Use one `const` declaration per variable. + - [13.2](#13.2) Use one `const` declaration per variable. [`one-var`](http://eslint.org/docs/rules/one-var.html), [`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) Use `===` and `!==` over `==` and `!=`. + - [15.1](#15.1) Use `===` and `!==` over `==` and `!=`. [`eqeqeq`](http://eslint.org/docs/rules/eqeqeq.html) - [15.2](#15.2) 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) 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. [`brace-style`](http://eslint.org/docs/rules/brace-style.html), [`disallowNewlineBeforeBlockStatements`](http://jscs.info/rule/disallowNewlineBeforeBlockStatements) ```javascript // bad @@ -1484,11 +1406,7 @@ Other Style Guides ## Whitespace - - [18.1](#18.1) 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) Use soft tabs set to 2 spaces. [`indent`](http://eslint.org/docs/rules/indent.html), [`validateIndentation`](http://jscs.info/rule/validateIndentation) ```javascript // bad @@ -1507,11 +1425,7 @@ Other Style Guides } ``` - - [18.2](#18.2) 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) Place 1 space before the leading brace. [`space-before-blocks`](http://eslint.org/docs/rules/space-before-blocks.html), [`requireSpaceBeforeBlockStatements`](http://jscs.info/rule/requireSpaceBeforeBlockStatements). ```javascript // bad @@ -1537,11 +1451,7 @@ Other Style Guides }); ``` - - [18.3](#18.3) 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) 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. [`space-after-keywords`](http://eslint.org/docs/rules/space-after-keywords.html), [`space-before-keywords`](http://eslint.org/docs/rules/space-before-keywords.html), [`requireSpaceAfterKeywords`](http://jscs.info/rule/requireSpaceAfterKeywords) ```javascript // bad @@ -1565,11 +1475,7 @@ Other Style Guides } ``` - - [18.4](#18.4) 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) Set off operators with spaces. [`space-infix-ops`](http://eslint.org/docs/rules/space-infix-ops.html), [`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) Leave a blank line after blocks and before the next statement. - - jscs rules: [`requirePaddingNewLinesAfterBlocks`](http://jscs.info/rule/requirePaddingNewLinesAfterBlocks). + - [18.7](#18.7) Leave a blank line after blocks and before the next statement. [`requirePaddingNewLinesAfterBlocks`](http://jscs.info/rule/requirePaddingNewLinesAfterBlocks) ```javascript // bad @@ -1702,11 +1606,7 @@ Other Style Guides return arr; ``` - - [18.8](#18.8) 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) Do not pad your blocks with blank lines. [`padded-blocks`](http://eslint.org/docs/rules/padded-blocks.html), [`disallowPaddingNewlinesInBlocks`](http://jscs.info/rule/disallowPaddingNewlinesInBlocks) ```javascript // bad @@ -1738,11 +1638,7 @@ Other Style Guides } ``` - - [18.9](#18.9) 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) Do not add spaces inside parentheses. [`space-in-parens`](http://eslint.org/docs/rules/space-in-parens.html), [`disallowSpacesInsideParentheses`](http://jscs.info/rule/disallowSpacesInsideParentheses) ```javascript // bad @@ -1766,11 +1662,7 @@ Other Style Guides } ``` - - [18.10](#18.10) 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) Do not add spaces inside brackets. [`array-bracket-spacing`](http://eslint.org/docs/rules/array-bracket-spacing.html), [`disallowSpacesInsideArrayBrackets`](http://jscs.info/rule/disallowSpacesInsideArrayBrackets). ```javascript // bad @@ -1782,11 +1674,7 @@ Other Style Guides console.log(foo[0]); ``` - - [18.11](#18.11) 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) Add spaces inside curly braces. [`object-curly-spacing`](http://eslint.org/docs/rules/object-curly-spacing.html), [`disallowSpacesInsideObjectBrackets`](http://jscs.info/rule/disallowSpacesInsideObjectBrackets) ```javascript // bad @@ -1796,14 +1684,10 @@ Other Style Guides const foo = { clark: 'kent' }; ``` - - [18.12](#18.12) Avoid having lines of code that are longer than 100 characters (including whitespace). + - [18.12](#18.12) Avoid having lines of code that are longer than 100 characters (including whitespace). [`max-len`](http://eslint.org/docs/rules/max-len.html), [`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) 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) Leading commas: **Nope.** [`comma-style`](http://eslint.org/docs/rules/comma-style.html), [`requireCommaBeforeLineBreak`](http://jscs.info/rule/requireCommaBeforeLineBreak) ```javascript // bad @@ -1867,11 +1747,7 @@ Other Style Guides }; ``` - - [19.2](#19.2) 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) Additional trailing comma: **Yup.** [`comma-dangle`](http://eslint.org/docs/rules/comma-dangle.html), [`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) **Yup.** - - eslint rules: [`semi`](http://eslint.org/docs/rules/semi.html). - - jscs rules: [`requireSemicolons`](http://jscs.info/rule/requireSemicolons). + - [20.1](#20.1) **Yup.** [`semi`](http://eslint.org/docs/rules/semi.html), [`requireSemicolons`](http://jscs.info/rule/requireSemicolons) ```javascript // bad @@ -1965,9 +1837,7 @@ Other Style Guides const totalScore = String(this.reviewScore); ``` - - [21.3](#21.3) 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) Numbers: Use `Number` for type casting and `parseInt` always with a radix for parsing strings. [`radix`](http://eslint.org/docs/rules/radix) ```javascript const inputValue = '4'; @@ -2045,11 +1915,7 @@ Other Style Guides } ``` - - [22.2](#22.2) 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) Use camelCase when naming objects, functions, and instances. [`camelcase`](http://eslint.org/docs/rules/camelcase.html), `requireCamelCaseOrUpperCaseIdentifiers`](http://jscs.info/rule/requireCamelCaseOrUpperCaseIdentifiers) ```javascript // bad @@ -2062,11 +1928,7 @@ Other Style Guides function thisIsMyFunction() {} ``` - - [22.3](#22.3) 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) Use PascalCase when naming constructors or classes. [`new-cap`](http://eslint.org/docs/rules/new-cap.html), [`requireCapitalizedConstructors`](http://jscs.info/rule/requireCapitalizedConstructors) ```javascript // bad @@ -2090,11 +1952,7 @@ Other Style Guides }); ``` - - [22.4](#22.4) 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) Use a leading underscore `_` when naming private properties. [`no-underscore-dangle`](http://eslint.org/docs/rules/no-underscore-dangle.html), [`disallowDanglingUnderscores`](http://jscs.info/rule/disallowDanglingUnderscores) ```javascript // bad @@ -2105,9 +1963,7 @@ Other Style Guides this._firstName = 'Panda'; ``` - - [22.5](#22.5) Don't save references to `this`. Use arrow functions or Function#bind. - - jscs rules: [`disallowNodeTypes`](http://jscs.info/rule/disallowNodeTypes). + - [22.5](#22.5) Don't save references to `this`. Use arrow functions or Function#bind. [`disallowNodeTypes`](http://jscs.info/rule/disallowNodeTypes) ```javascript // bad @@ -2266,9 +2122,7 @@ Other Style Guides ## jQuery - - [25.1](#25.1) Prefix jQuery object variables with a `$`. - - jscs rules: [`requireDollarBeforejQueryAssignment`](http://jscs.info/rule/requireDollarBeforejQueryAssignment). + - [25.1](#25.1) Prefix jQuery object variables with a `$`. [`requireDollarBeforejQueryAssignment`](http://jscs.info/rule/requireDollarBeforejQueryAssignment) ```javascript // bad From d852f5190eaf9e5a06e5463723249816583511d8 Mon Sep 17 00:00:00 2001 From: Harrison Shoff Date: Mon, 25 Jan 2016 22:19:01 -0800 Subject: [PATCH 2/4] [react][rule links] condense lines --- react/README.md | 50 ++++++++++++++----------------------------------- 1 file changed, 14 insertions(+), 36 deletions(-) diff --git a/react/README.md b/react/README.md index e551172952..8da5cdc7ce 100644 --- a/react/README.md +++ b/react/README.md @@ -27,9 +27,7 @@ ## 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. [`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
{this.props.hello}
; } } - + // good function Listing({ hello }) { return
{hello}
; @@ -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. [`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. [`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. [`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 @@ -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`. [`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. [`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. [`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 @@ ``` - - 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. [`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. [`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`: [`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`. [`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)** From 992a9cea58ddde54354d6e53800de97b93bfe9f4 Mon Sep 17 00:00:00 2001 From: Harrison Shoff Date: Mon, 25 Jan 2016 22:23:16 -0800 Subject: [PATCH 3/4] [react][rule links] add eslint labels back --- react/README.md | 24 ++++++++++++------------ 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/react/README.md b/react/README.md index 8da5cdc7ce..96edd521e3 100644 --- a/react/README.md +++ b/react/README.md @@ -21,13 +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. [`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 @@ -68,7 +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. [`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 @@ -115,7 +115,7 @@ ## Alignment - - Follow these alignment styles for JSX syntax. [`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 @@ -142,7 +142,7 @@ ## Quotes - - Always use double quotes (`"`) for JSX attributes, but single quotes for all other JS. [`jsx-quotes`](http://eslint.org/docs/rules/jsx-quotes) + - 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. @@ -198,7 +198,7 @@ /> ``` - - Omit the value of the prop when it is explicitly `true`. [`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 @@ -214,7 +214,7 @@ ## Parentheses - - Wrap JSX tags in parentheses when they span more than one line. [`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 @@ -242,7 +242,7 @@ ## Tags - - Always self-close tags that have no children. [`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 @@ -252,7 +252,7 @@ ``` - - If your component has multi-line properties, close its tag on a new line. [`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 @@ -269,7 +269,7 @@ ## Methods - - Bind event handlers for the render method in the constructor. [`react/jsx-no-bind`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-no-bind.md) + - 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. @@ -375,7 +375,7 @@ export default Link; ``` - - Ordering for `React.createClass`: [`react/sort-comp`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/sort-comp.md) + - 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` @@ -401,7 +401,7 @@ ## `isMounted` - - Do not use `isMounted`. [`react/no-is-mounted`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/no-is-mounted.md) + - 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. From 7293a0f02dd0d9b35e9fb1e927be568157bbf7af Mon Sep 17 00:00:00 2001 From: Harrison Shoff Date: Mon, 25 Jan 2016 22:34:39 -0800 Subject: [PATCH 4/4] [rule links] add labels back --- README.md | 90 +++++++++++++++++++++++++++---------------------------- 1 file changed, 45 insertions(+), 45 deletions(-) diff --git a/README.md b/README.md index bb371499ad..3abec0b1e9 100644 --- a/README.md +++ b/README.md @@ -87,7 +87,7 @@ Other Style Guides ## References - - [2.1](#2.1) Use `const` for all of your references; avoid using `var`. [`prefer-const`](http://eslint.org/docs/rules/prefer-const.html), [`no-const-assign`](http://eslint.org/docs/rules/no-const-assign.html) + - [2.1](#2.1) 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. @@ -101,7 +101,7 @@ Other Style Guides const b = 2; ``` - - [2.2](#2.2) If you must reassign references, use `let` instead of `var`. [`no-var`](http://eslint.org/docs/rules/no-var.html), [`disallowVar`](http://jscs.info/rule/disallowVar) + - [2.2](#2.2) 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`. @@ -135,7 +135,7 @@ Other Style Guides ## Objects - - [3.1](#3.1) Use the literal syntax for object creation. [`no-new-object`](http://eslint.org/docs/rules/no-new-object.html) + - [3.1](#3.1) Use the literal syntax for object creation. eslint: [`no-new-object`](http://eslint.org/docs/rules/no-new-object.html) ```javascript // bad @@ -145,7 +145,7 @@ Other Style Guides const item = {}; ``` - - [3.2](#3.2) 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. [`disallowIdentiferNames`](http://jscs.info/rule/disallowIdentifierNames) + - [3.2](#3.2) 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 @@ -161,7 +161,7 @@ Other Style Guides }; ``` - - [3.3](#3.3) Use readable synonyms in place of reserved words. [`disallowIdentiferNames`](http://jscs.info/rule/disallowIdentifierNames) + - [3.3](#3.3) Use readable synonyms in place of reserved words. jscs: [`disallowIdentiferNames`](http://jscs.info/rule/disallowIdentifierNames) ```javascript // bad @@ -207,7 +207,7 @@ Other Style Guides ``` - - [3.5](#3.5) Use object method shorthand. [`object-shorthand`](http://eslint.org/docs/rules/object-shorthand.html), [`requireEnhancedObjectLiterals`](http://jscs.info/rule/requireEnhancedObjectLiterals) + - [3.5](#3.5) Use object method shorthand. eslint: [`object-shorthand`](http://eslint.org/docs/rules/object-shorthand.html) jscs: [`requireEnhancedObjectLiterals`](http://jscs.info/rule/requireEnhancedObjectLiterals) ```javascript // bad @@ -230,7 +230,7 @@ Other Style Guides ``` - - [3.6](#3.6) Use property value shorthand. [`object-shorthand`](http://eslint.org/docs/rules/object-shorthand.html), [`requireEnhancedObjectLiterals`](http://jscs.info/rule/requireEnhancedObjectLiterals) + - [3.6](#3.6) 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. @@ -277,7 +277,7 @@ Other Style Guides }; ``` - - [3.8](#3.8) Only quote properties that are invalid identifiers. [`quote-props`](http://eslint.org/docs/rules/quote-props.html), [`disallowQuotedKeysInObjects`](http://jscs.info/rule/disallowQuotedKeysInObjects) + - [3.8](#3.8) 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. @@ -301,7 +301,7 @@ Other Style Guides ## Arrays - - [4.1](#4.1) Use the literal syntax for array creation. [`no-array-constructor`](http://eslint.org/docs/rules/no-array-constructor.html) + - [4.1](#4.1) Use the literal syntax for array creation. eslint: [`no-array-constructor`](http://eslint.org/docs/rules/no-array-constructor.html) ```javascript // bad @@ -350,7 +350,7 @@ Other Style Guides ## Destructuring - - [5.1](#5.1) Use object destructuring when accessing and using multiple properties of an object. [`requireObjectDestructuring`](http://jscs.info/rule/requireObjectDestructuring) + - [5.1](#5.1) 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. @@ -375,7 +375,7 @@ Other Style Guides } ``` - - [5.2](#5.2) Use array destructuring. [`requireArrayDestructuring`](http://jscs.info/rule/requireArrayDestructuring) + - [5.2](#5.2) Use array destructuring. jscs: [`requireArrayDestructuring`](http://jscs.info/rule/requireArrayDestructuring) ```javascript const arr = [1, 2, 3, 4]; @@ -417,7 +417,7 @@ Other Style Guides ## Strings - - [6.1](#6.1) Use single quotes `''` for strings. [`quotes`](http://eslint.org/docs/rules/quotes.html), [`validateQuoteMarks`](http://jscs.info/rule/validateQuoteMarks) + - [6.1](#6.1) Use single quotes `''` for strings. eslint: [`quotes`](http://eslint.org/docs/rules/quotes.html) jscs: [`validateQuoteMarks`](http://jscs.info/rule/validateQuoteMarks) ```javascript // bad @@ -447,7 +447,7 @@ Other Style Guides ``` - - [6.4](#6.4) When programmatically building up strings, use template strings instead of concatenation. [`prefer-template`](http://eslint.org/docs/rules/prefer-template.html), [`requireTemplateStrings`](http://jscs.info/rule/requireTemplateStrings) + - [6.4](#6.4) 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. @@ -474,7 +474,7 @@ Other Style Guides ## Functions - - [7.1](#7.1) Use function declarations instead of function expressions. [`requireFunctionDeclarations`](http://jscs.info/rule/requireFunctionDeclarations) + - [7.1](#7.1) 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. @@ -488,7 +488,7 @@ Other Style Guides } ``` - - [7.2](#7.2) Immediately invoked function expressions: [`wrap-iife`](http://eslint.org/docs/rules/wrap-iife.html), [`requireParenthesesAroundIIFE`](http://jscs.info/rule/requireParenthesesAroundIIFE) + - [7.2](#7.2) 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. @@ -499,7 +499,7 @@ Other Style Guides }()); ``` - - [7.3](#7.3) 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. [`no-loop-func`](http://eslint.org/docs/rules/no-loop-func.html) + - [7.3](#7.3) 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) **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). @@ -636,7 +636,7 @@ Other Style Guides const y = function a() {}; ``` - - [7.12](#7.12) Never mutate parameters. [`no-param-reassign`](http://eslint.org/docs/rules/no-param-reassign.html) + - [7.12](#7.12) 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. @@ -652,7 +652,7 @@ Other Style Guides }; ``` - - [7.13](#7.13) Never reassign parameters. [`no-param-reassign`](http://eslint.org/docs/rules/no-param-reassign.html) + - [7.13](#7.13) 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. @@ -679,7 +679,7 @@ Other Style Guides ## Arrow Functions - - [8.1](#8.1) When you must use function expressions (as when passing an anonymous function), use arrow function notation. [`prefer-arrow-callback`](http://eslint.org/docs/rules/prefer-arrow-callback.html), [`arrow-spacing`](http://eslint.org/docs/rules/arrow-spacing.html), [`requireArrowFunctions`](http://jscs.info/rule/requireArrowFunctions) + - [8.1](#8.1) 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. @@ -699,7 +699,7 @@ Other Style Guides }); ``` - - [8.2](#8.2) 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. [`arrow-parens`](http://eslint.org/docs/rules/arrow-parens.html), [`arrow-body-style`](http://eslint.org/docs/rules/arrow-body-style.html), [`disallowParenthesesAroundArrowParam`](http://jscs.info/rule/disallowParenthesesAroundArrowParam), [`requireShorthandArrowFunctions`](http://jscs.info/rule/requireShorthandArrowFunctions) + - [8.2](#8.2) 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. @@ -741,7 +741,7 @@ Other Style Guides ``` - - [8.4](#8.4) If your function takes a single argument and doesn’t use braces, omit the parentheses. Otherwise, always include parentheses around arguments. [`arrow-parens`](http://eslint.org/docs/rules/arrow-parens.html), [`disallowParenthesesAroundArrowParam`](http://jscs.info/rule/disallowParenthesesAroundArrowParam) + - [8.4](#8.4) 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. @@ -937,7 +937,7 @@ Other Style Guides ## Iterators and Generators - - [11.1](#11.1) Don't use iterators. Prefer JavaScript's higher-order functions like `map()` and `reduce()` instead of loops like `for-of`. [`no-iterator`](http://eslint.org/docs/rules/no-iterator.html) + - [11.1](#11.1) 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. @@ -971,7 +971,7 @@ Other Style Guides ## Properties - - [12.1](#12.1) Use dot notation when accessing properties. [`dot-notation`](http://eslint.org/docs/rules/dot-notation.html), [`requireDotNotation`](http://jscs.info/rule/requireDotNotation) + - [12.1](#12.1) 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 = { @@ -1016,7 +1016,7 @@ Other Style Guides const superPower = new SuperPower(); ``` - - [13.2](#13.2) Use one `const` declaration per variable. [`one-var`](http://eslint.org/docs/rules/one-var.html), [`disallowMultipleVarDecl`](http://jscs.info/rule/disallowMultipleVarDecl) + - [13.2](#13.2) 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. @@ -1202,7 +1202,7 @@ Other Style Guides ## Comparison Operators & Equality - - [15.1](#15.1) Use `===` and `!==` over `==` and `!=`. [`eqeqeq`](http://eslint.org/docs/rules/eqeqeq.html) + - [15.1](#15.1) Use `===` and `!==` over `==` and `!=`. eslint: [`eqeqeq`](http://eslint.org/docs/rules/eqeqeq.html) - [15.2](#15.2) Conditional statements such as the `if` statement evaluate their expression using coercion with the `ToBoolean` abstract method and always follow these simple rules: @@ -1276,7 +1276,7 @@ Other Style Guides ``` - [16.2](#16.2) If you're using multi-line blocks with `if` and `else`, put `else` on the same line as your - `if` block's closing brace. [`brace-style`](http://eslint.org/docs/rules/brace-style.html), [`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 @@ -1406,7 +1406,7 @@ Other Style Guides ## Whitespace - - [18.1](#18.1) Use soft tabs set to 2 spaces. [`indent`](http://eslint.org/docs/rules/indent.html), [`validateIndentation`](http://jscs.info/rule/validateIndentation) + - [18.1](#18.1) 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 @@ -1425,7 +1425,7 @@ Other Style Guides } ``` - - [18.2](#18.2) Place 1 space before the leading brace. [`space-before-blocks`](http://eslint.org/docs/rules/space-before-blocks.html), [`requireSpaceBeforeBlockStatements`](http://jscs.info/rule/requireSpaceBeforeBlockStatements). + - [18.2](#18.2) 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 @@ -1451,7 +1451,7 @@ Other Style Guides }); ``` - - [18.3](#18.3) 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. [`space-after-keywords`](http://eslint.org/docs/rules/space-after-keywords.html), [`space-before-keywords`](http://eslint.org/docs/rules/space-before-keywords.html), [`requireSpaceAfterKeywords`](http://jscs.info/rule/requireSpaceAfterKeywords) + - [18.3](#18.3) 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 @@ -1475,7 +1475,7 @@ Other Style Guides } ``` - - [18.4](#18.4) Set off operators with spaces. [`space-infix-ops`](http://eslint.org/docs/rules/space-infix-ops.html), [`requireSpaceBeforeBinaryOperators`](http://jscs.info/rule/requireSpaceBeforeBinaryOperators), [`requireSpaceAfterBinaryOperators`](http://jscs.info/rule/requireSpaceAfterBinaryOperators) + - [18.4](#18.4) 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 @@ -1549,7 +1549,7 @@ Other Style Guides .call(tron.led); ``` - - [18.7](#18.7) Leave a blank line after blocks and before the next statement. [`requirePaddingNewLinesAfterBlocks`](http://jscs.info/rule/requirePaddingNewLinesAfterBlocks) + - [18.7](#18.7) Leave a blank line after blocks and before the next statement. jscs: [`requirePaddingNewLinesAfterBlocks`](http://jscs.info/rule/requirePaddingNewLinesAfterBlocks) ```javascript // bad @@ -1606,7 +1606,7 @@ Other Style Guides return arr; ``` - - [18.8](#18.8) Do not pad your blocks with blank lines. [`padded-blocks`](http://eslint.org/docs/rules/padded-blocks.html), [`disallowPaddingNewlinesInBlocks`](http://jscs.info/rule/disallowPaddingNewlinesInBlocks) + - [18.8](#18.8) 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 @@ -1638,7 +1638,7 @@ Other Style Guides } ``` - - [18.9](#18.9) Do not add spaces inside parentheses. [`space-in-parens`](http://eslint.org/docs/rules/space-in-parens.html), [`disallowSpacesInsideParentheses`](http://jscs.info/rule/disallowSpacesInsideParentheses) + - [18.9](#18.9) 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 @@ -1662,7 +1662,7 @@ Other Style Guides } ``` - - [18.10](#18.10) Do not add spaces inside brackets. [`array-bracket-spacing`](http://eslint.org/docs/rules/array-bracket-spacing.html), [`disallowSpacesInsideArrayBrackets`](http://jscs.info/rule/disallowSpacesInsideArrayBrackets). + - [18.10](#18.10) 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 @@ -1674,7 +1674,7 @@ Other Style Guides console.log(foo[0]); ``` - - [18.11](#18.11) Add spaces inside curly braces. [`object-curly-spacing`](http://eslint.org/docs/rules/object-curly-spacing.html), [`disallowSpacesInsideObjectBrackets`](http://jscs.info/rule/disallowSpacesInsideObjectBrackets) + - [18.11](#18.11) 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 @@ -1684,7 +1684,7 @@ Other Style Guides const foo = { clark: 'kent' }; ``` - - [18.12](#18.12) Avoid having lines of code that are longer than 100 characters (including whitespace). [`max-len`](http://eslint.org/docs/rules/max-len.html), [`maximumLineLength`](http://jscs.info/rule/maximumLineLength) + - [18.12](#18.12) 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. @@ -1713,7 +1713,7 @@ Other Style Guides ## Commas - - [19.1](#19.1) Leading commas: **Nope.** [`comma-style`](http://eslint.org/docs/rules/comma-style.html), [`requireCommaBeforeLineBreak`](http://jscs.info/rule/requireCommaBeforeLineBreak) + - [19.1](#19.1) Leading commas: **Nope.** eslint: [`comma-style`](http://eslint.org/docs/rules/comma-style.html) jscs: [`requireCommaBeforeLineBreak`](http://jscs.info/rule/requireCommaBeforeLineBreak) ```javascript // bad @@ -1747,7 +1747,7 @@ Other Style Guides }; ``` - - [19.2](#19.2) Additional trailing comma: **Yup.** [`comma-dangle`](http://eslint.org/docs/rules/comma-dangle.html), [`requireTrailingComma`](http://jscs.info/rule/requireTrailingComma) + - [19.2](#19.2) 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. @@ -1795,7 +1795,7 @@ Other Style Guides ## Semicolons - - [20.1](#20.1) **Yup.** [`semi`](http://eslint.org/docs/rules/semi.html), [`requireSemicolons`](http://jscs.info/rule/requireSemicolons) + - [20.1](#20.1) **Yup.** eslint: [`semi`](http://eslint.org/docs/rules/semi.html) jscs: [`requireSemicolons`](http://jscs.info/rule/requireSemicolons) ```javascript // bad @@ -1837,7 +1837,7 @@ Other Style Guides const totalScore = String(this.reviewScore); ``` - - [21.3](#21.3) Numbers: Use `Number` for type casting and `parseInt` always with a radix for parsing strings. [`radix`](http://eslint.org/docs/rules/radix) + - [21.3](#21.3) 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'; @@ -1915,7 +1915,7 @@ Other Style Guides } ``` - - [22.2](#22.2) Use camelCase when naming objects, functions, and instances. [`camelcase`](http://eslint.org/docs/rules/camelcase.html), `requireCamelCaseOrUpperCaseIdentifiers`](http://jscs.info/rule/requireCamelCaseOrUpperCaseIdentifiers) + - [22.2](#22.2) 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 @@ -1928,7 +1928,7 @@ Other Style Guides function thisIsMyFunction() {} ``` - - [22.3](#22.3) Use PascalCase when naming constructors or classes. [`new-cap`](http://eslint.org/docs/rules/new-cap.html), [`requireCapitalizedConstructors`](http://jscs.info/rule/requireCapitalizedConstructors) + - [22.3](#22.3) 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 @@ -1952,7 +1952,7 @@ Other Style Guides }); ``` - - [22.4](#22.4) Use a leading underscore `_` when naming private properties. [`no-underscore-dangle`](http://eslint.org/docs/rules/no-underscore-dangle.html), [`disallowDanglingUnderscores`](http://jscs.info/rule/disallowDanglingUnderscores) + - [22.4](#22.4) 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 @@ -1963,7 +1963,7 @@ Other Style Guides this._firstName = 'Panda'; ``` - - [22.5](#22.5) Don't save references to `this`. Use arrow functions or Function#bind. [`disallowNodeTypes`](http://jscs.info/rule/disallowNodeTypes) + - [22.5](#22.5) Don't save references to `this`. Use arrow functions or Function#bind. jscs: [`disallowNodeTypes`](http://jscs.info/rule/disallowNodeTypes) ```javascript // bad @@ -2122,7 +2122,7 @@ Other Style Guides ## jQuery - - [25.1](#25.1) Prefix jQuery object variables with a `$`. [`requireDollarBeforejQueryAssignment`](http://jscs.info/rule/requireDollarBeforejQueryAssignment) + - [25.1](#25.1) Prefix jQuery object variables with a `$`. jscs: [`requireDollarBeforejQueryAssignment`](http://jscs.info/rule/requireDollarBeforejQueryAssignment) ```javascript // bad