Add React specific rules

GH-3
svengreb · Jan 27, 2018 · a8ef00f · a8ef00f
1 parent dee0441
commit a8ef00f
Show file tree

Hide file tree

Showing 40 changed files with 1,473 additions and 311 deletions.
diff --git a/README.md b/README.md
@@ -15,7 +15,9 @@ A style guide establishes and enforces style to improve the intelligibility and
 ### Getting Started
 
 The [project documentation][docs] contains chapters to learn about
-the [comprehensive base rule set][docs-rules] including [ECMAScript +6 (ES 2015+) styles][docs-rules-ecmascript_6+_styles], the development [requirements][docs-dev-requirements] and [how to build][docs-dev-building] the style guide documentation.
+the [comprehensive base rule set][docs-rules] including [ECMAScript +6 (ES 2015+)][docs-rules-ecmascript_6+_styles] and [React][docs-rules-react] specific styles like e.g. [Higher-Order Components][docs-rules-react-hoc], the [component methods & properties ordering][docs-rules-react-ordering-methods_and_properties] and [props][docs-rules-react-props].
+
+The development chapters contain information about the [requirements][docs-dev-requirements] and [how to build][docs-dev-building] the style guide documentation.
 
 ### Contributing
 
@@ -42,5 +44,9 @@ The guide also includes information about [minimal, complete, and verifiable exa
 [docs-dev-contributing-styleguides]: https://arcticicestudio.github.io/styleguide-javascript/development/contributing.html#styleguides
 [docs-dev-contributing-versioning]: https://arcticicestudio.github.io/styleguide-javascript/development/contributing.html#versioning
 [docs-dev-requirements]: https://arcticicestudio.github.io/styleguide-javascript/development/requirements.html
-[docs-rules]: https://arcticicestudio.github.io/styleguide-javascript/rules/types.html
+[docs-rules]: https://arcticicestudio.github.io/styleguide-javascript/rules/index.html
 [docs-rules-ecmascript_6+_styles]: https://arcticicestudio.github.io/styleguide-javascript/rules/ecmascript_6+_styles.html
+[docs-rules-react]: https://arcticicestudio.github.io/styleguide-javascript/rules/react/index.html
+[docs-rules-react-hoc]: https://arcticicestudio.github.io/styleguide-javascript/rules/react/higher_order_components.html
+[docs-rules-react-ordering-methods_and_properties]: https://arcticicestudio.github.io/styleguide-javascript/rules/react/ordering.html#component-methods-and-properties
+[docs-rules-react-props]: https://arcticicestudio.github.io/styleguide-javascript/rules/react/props.html
diff --git a/src/README.md b/src/README.md
@@ -16,7 +16,7 @@ A style guide establishes and enforces style to improve the intelligibility and
 
 ### Getting Started
 
-This style guide provides the [comprehensive base rule set][rules] including [ECMAScript +6 (ES 2015+) styles][rules-ecmascript_6+_styles].
+This style guide provides the [comprehensive base rule set][rules] including [ECMAScript +6 (ES 2015+)][rules-ecmascript_6+_styles] and [React][rules-react] specific styles like e.g. [Higher-Order Components][rules-react-hoc], the [component methods & properties ordering][rules-react-ordering-methods_and_properties] and [props][rules-react-props].
 
 The development chapters contain information about the [requirements][dev-requirements] and [how to build][dev-building] this style guide documentation.
 
@@ -44,5 +44,9 @@ The guide also includes information about [minimal, complete, and verifiable exa
 [dev-contributing-styleguides]: development/contributing.md#styleguides
 [dev-contributing-versioning]: development/contributing.md#versioning
 [dev-requirements]: development/requirements.md
-[rules]: rules/types.md
+[rules]: rules/index.md
 [rules-ecmascript_6+_styles]: rules/ecmascript_6+_styles.md
+[rules-react]: rules/react/index.md
+[rules-react-hoc]: rules/react/higher_order_components.md
+[rules-react-ordering-methods_and_properties]: rules/react/ordering.md#component-methods-and-properties
+[rules-react-props]: rules/react/props.md
diff --git a/src/SUMMARY.md b/src/SUMMARY.md
diff --git a/src/assets/react-logo.png b/src/assets/react-logo.png
diff --git a/src/rules/arrays.md b/src/rules/arrays.md
@@ -88,7 +88,7 @@ const winter = ["snow", "frost"];
 const nodes = [...winter];
 ```
 
-## Prefer `from` over spreads for mapping of iterables
+## Mapping Over Iterables
 
 Use [`Array.from`][mdn-array-from] instead of spread `...` for mapping over iterables. This avoids creating an intermediate array.
 

diff --git a/src/rules/arrow_functions.md b/src/rules/arrow_functions.md
@@ -4,7 +4,7 @@ Use arrow function notation for anonymous functions e.g. when passing an inline
 
 When dealing with a fairly complicated function, it is recommended to move that logic out into its own named function expression.
 
-> ESLint: [prefer-arrow-callback][eslint-prefer-arrow-callback] and [arrow-spacing][eslint-arrow-spacing]
+> ESLint: [prefer-arrow-callback][eslint/prefer-arrow-callback] and [arrow-spacing][eslint/arrow-spacing]
 
 ###### Examples
 
@@ -30,7 +30,7 @@ When dealing with a fairly complicated function, it is recommended to move that
 
 If the function body consists of a single statement returning an [expression][mdn-expressions_and_operators] without side effects, omit the braces and use the implicit return. Otherwise use a `return` statement. This rule is syntactic sugar and significantly increases the readability when multiple functions are chained together.
 
-> ESLint: [arrow-parens][eslint-arrow-parens] and [arrow-body-style][eslint-arrow-body-style]
+> ESLint: [arrow-parens][eslint/arrow-parens] and [arrow-body-style][eslint/arrow-body-style]
 
 ###### Examples
 
@@ -117,7 +117,7 @@ In case the expression spans over multiple lines, wrap it in parentheses for bet
 
 If a function takes a single argument and doesn't use braces, omit the parentheses. Otherwise, always include parentheses around arguments for clarity and consistency.
 
-> ESLint: [arrow-parens][eslint-arrow-parens]
+> ESLint: [arrow-parens][eslint/arrow-parens]
 
 ###### Examples
 
@@ -150,7 +150,7 @@ If a function takes a single argument and doesn't use braces, omit the parenthes
 
 Avoid confusing arrow function syntax `=>` with comparison operators (`<=`, `>=`).
 
-> ESLint: [no-confusing-arrow][eslint-no-confusing-arrow]
+> ESLint: [no-confusing-arrow][eslint/no-confusing-arrow]
 
 ###### Examples
 
@@ -177,9 +177,9 @@ const elementDensity = element => {
 };
 ```
 
-[eslint-arrow-body-style]: https://eslint.org/docs/rules/arrow-body-style
-[eslint-arrow-parens]: https://eslint.org/docs/rules/arrow-parens
-[eslint-arrow-spacing]: https://eslint.org/docs/rules/arrow-spacing
-[eslint-no-confusing-arrow]: https://eslint.org/docs/rules/no-confusing-arrow
-[eslint-prefer-arrow-callback]: https://eslint.org/docs/rules/prefer-arrow-callback
+[eslint/arrow-body-style]: https://eslint.org/docs/rules/arrow-body-style
+[eslint/arrow-parens]: https://eslint.org/docs/rules/arrow-parens
+[eslint/arrow-spacing]: https://eslint.org/docs/rules/arrow-spacing
+[eslint/no-confusing-arrow]: https://eslint.org/docs/rules/no-confusing-arrow
+[eslint/prefer-arrow-callback]: https://eslint.org/docs/rules/prefer-arrow-callback
 [mdn-expressions_and_operators]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#Expressions
diff --git a/src/rules/blocks.md b/src/rules/blocks.md
@@ -2,7 +2,7 @@
 
 Use braces with all multi-line blocks.
 
-> ESLint: [nonblock-statement-body-position][eslint-nonblock-statement-body-position]
+> ESLint: [nonblock-statement-body-position][eslint/nonblock-statement-body-position]
 
 ###### Examples
 
@@ -39,7 +39,7 @@ function snow() {
 
 When using multi-line blocks with `if` and `else`, put the `else` on the same line as the `if` block's closing brace.
 
-> ESLint: [brace-style][eslint-brace-style]
+> ESLint: [brace-style][eslint/brace-style]
 
 ###### Examples
 
@@ -70,7 +70,7 @@ if (winter) {
 
 If an `if` block always executes a `return` statement, the subsequent `else` block is unnecessary. A `return` in an `else if` block following an `if` block that contains a `return` can be separated into multiple `if` blocks.
 
-> ESLint: [no-else-return][eslint-no-else-return]
+> ESLint: [no-else-return][eslint/no-else-return]
 
 ###### Examples
 
@@ -144,6 +144,6 @@ function winter(snow) {
 }
 ```
 
-[eslint-brace-style]: https://eslint.org/docs/rules/brace-style
-[eslint-no-else-return]: https://eslint.org/docs/rules/no-else-return
-[eslint-nonblock-statement-body-position]: https://eslint.org/docs/rules/nonblock-statement-body-position
+[eslint/brace-style]: https://eslint.org/docs/rules/brace-style
+[eslint/no-else-return]: https://eslint.org/docs/rules/no-else-return
+[eslint/nonblock-statement-body-position]: https://eslint.org/docs/rules/nonblock-statement-body-position
diff --git a/src/rules/classes_and_constructors.md b/src/rules/classes_and_constructors.md
@@ -134,7 +134,7 @@ class Snow {
 
 Classes have a default constructor if one is not specified. An empty constructor function or one that just delegates to a parent class is unnecessary.
 
-> ESLint: [no-useless-constructor][eslint-no-useless-constructor]
+> ESLint: [no-useless-constructor][eslint/no-useless-constructor]
 
 ###### Examples
 
@@ -173,7 +173,7 @@ class Snowball extends Snow {
 
 Avoid duplicate class members. Duplicate class member declarations will silently prefer the last one - having duplicates is almost certainly a bug.
 
-> ESLint: [no-dupe-class-members][eslint-no-dupe-class-members]
+> ESLint: [no-dupe-class-members][eslint/no-dupe-class-members]
 
 ###### Examples
 
@@ -200,5 +200,5 @@ class Snow {
 }
 ```
 
-[eslint-no-dupe-class-members]: https://eslint.org/docs/rules/no-dupe-class-members
-[eslint-no-useless-constructor]: https://eslint.org/docs/rules/no-useless-constructor
+[eslint/no-dupe-class-members]: https://eslint.org/docs/rules/no-dupe-class-members
+[eslint/no-useless-constructor]: https://eslint.org/docs/rules/no-useless-constructor
diff --git a/src/rules/commas.md b/src/rules/commas.md
@@ -12,7 +12,7 @@ function snow(...flakes,) {} // SyntaxError: parameter after rest parameter
 (...flakes,) => {} // SyntaxError: expected closing parenthesis, got ','
 ```
 
-> ESLint: [comma-style][eslint-comma-style] and [comma-dangle][eslint-comma-dangle]
+> ESLint: [comma-style][eslint/comma-style] and [comma-dangle][eslint/comma-dangle]
 
 ###### Examples
 
@@ -72,8 +72,8 @@ const winter = {
 ```
 
 
-[eslint-comma-dangle]: https://eslint.org/docs/rules/comma-dangle
-[eslint-comma-style]: https://eslint.org/docs/rules/comma-style
+[eslint/comma-dangle]: https://eslint.org/docs/rules/comma-dangle
+[eslint/comma-style]: https://eslint.org/docs/rules/comma-style
 [json-notation]: https://www.json.org
 [mdn-trailing_commas]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Trailing_commas
 [mdn-trailing_commas-illegal]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Trailing_commas#Illegal_trailing_commas

diff --git a/src/rules/comments.md b/src/rules/comments.md
@@ -85,7 +85,7 @@ function getWinterElement() {
 
 Start all comments with a space to make it easier to read.
 
-> ESLint: [spaced-comment][eslint-spaced-comment]
+> ESLint: [spaced-comment][eslint/spaced-comment]
 
 ###### Examples
 
@@ -131,4 +131,4 @@ function getElement(season) {
 
 ## 
 
-[eslint-spaced-comment]: https://eslint.org/docs/rules/spaced-comment
+[eslint/spaced-comment]: https://eslint.org/docs/rules/spaced-comment
diff --git a/src/rules/comparison_operators_and_equality.md b/src/rules/comparison_operators_and_equality.md
@@ -2,7 +2,7 @@
 
 Use `===` and `!==` instead of `==` and `!=`.
 
-> ESLint: [eqeqeq][eslint-eqeqeq]
+> ESLint: [eqeqeq][eslint/eqeqeq]
 
 ###### References
 
@@ -99,7 +99,7 @@ if (snowflakes.length > 0) {
 
 Use braces to create blocks in `case` and `default` clauses that contain lexical declarations like e.g. `let`, `const`, `function`, and `class`. Lexical declarations are visible in the entire `switch` block but only get initialized when assigned, which only happens when its `case` is reached. This causes problems when multiple `case` clauses attempt to define the same thing.
 
-> ESLint: [no-case-declarations][eslint-no-case-declarations]
+> ESLint: [no-case-declarations][eslint/no-case-declarations]
 
 ###### Examples
 
@@ -154,7 +154,7 @@ switch (winter) {
 
 Ternaries should not be nested and generally be single line expressions.
 
-> ESLint: [no-nested-ternary][eslint-no-nested-ternary]
+> ESLint: [no-nested-ternary][eslint/no-nested-ternary]
 
 ###### Examples
 
@@ -189,7 +189,7 @@ const winter = snow > frost ? "snow" : maybeIce;
 
 Avoid unneeded ternary statements.
 
-> ESLint: [no-unneeded-ternary][eslint-no-unneeded-ternary]
+> ESLint: [no-unneeded-ternary][eslint/no-unneeded-ternary]
 
 ###### Examples
 
@@ -213,7 +213,7 @@ const snow = !negativeTemperature;
 
 When mixing operators, enclose them in parentheses. The only exception is the standard arithmetic operators (`+`, `-`, `*`, `/`) since their precedence is broadly understood. This improves readability and clarifies the developer's intention.
 
-> ESLint: [no-mixed-operators][eslint-no-mixed-operators]
+> ESLint: [no-mixed-operators][eslint/no-mixed-operators]
 
 ###### Examples
 
@@ -254,9 +254,9 @@ if (winter || (frost && snow)) {
 const season = winter + frost / snow * ice;
 ```
 
-[eslint-eqeqeq]: https://eslint.org/docs/rules/eqeqeq
-[eslint-no-case-declarations]: https://eslint.org/docs/rules/no-case-declarations
-[eslint-no-mixed-operators]: https://eslint.org/docs/rules/no-mixed-operators
-[eslint-no-nested-ternary]: https://eslint.org/docs/rules/no-nested-ternary
-[eslint-no-unneeded-ternary]: https://eslint.org/docs/rules/no-unneeded-ternary
+[eslint/eqeqeq]: https://eslint.org/docs/rules/eqeqeq
+[eslint/no-case-declarations]: https://eslint.org/docs/rules/no-case-declarations
+[eslint/no-mixed-operators]: https://eslint.org/docs/rules/no-mixed-operators
+[eslint/no-nested-ternary]: https://eslint.org/docs/rules/no-nested-ternary
+[eslint/no-unneeded-ternary]: https://eslint.org/docs/rules/no-unneeded-ternary
 [ref-truth_equality_and_javascript]: https://javascriptweblog.wordpress.com/2011/02/07/truth-equality-and-javascript/#more-2108
diff --git a/src/rules/destructuring.md b/src/rules/destructuring.md
@@ -2,7 +2,7 @@
 
 Use object destructuring when accessing and using multiple properties of an object. Destructuring avoids the usage of temporary references for those properties.
 
-> ESLint: [prefer-destructuring][eslint-prefer-destructuring]
+> ESLint: [prefer-destructuring][eslint/prefer-destructuring]
 
 ###### Examples
 
@@ -38,7 +38,7 @@ function getSeasonElement({ name, element }) {
 
 Use array destructuring.
 
-> ESLint: [prefer-destructuring][eslint-prefer-destructuring]
+> ESLint: [prefer-destructuring][eslint/prefer-destructuring]
 
 ###### Examples
 
@@ -59,7 +59,7 @@ const winter = ["snow", "frost", "ice"];
 const [snow, frost] = winter;
 ```
 
-## Prefer object destructuring over array for multiple return values
+## Multiple Return Values
 
 Use object destructuring for multiple return values instead of array destructuring. New properties can not be added over time or the order of item can not be changed without breaking call sites.
 
@@ -89,4 +89,4 @@ function processElements(elements) {
 const { snow, ice } = processElements(elements);
 ```
 
-[eslint-prefer-destructuring]: https://eslint.org/docs/rules/prefer-destructuring
+[eslint/prefer-destructuring]: https://eslint.org/docs/rules/prefer-destructuring
diff --git a/src/rules/ecmascript_5_compatibility.md b/src/rules/ecmascript_5_compatibility.md
@@ -1,3 +1,3 @@
-Refer to the [ECMAScript 5 Compatibility Table][es_comp_table-5].
+Refer to the [ECMAScript 5 Compatibility Table][comp_table-es5].
 
-[es_comp_table-5]: http://kangax.github.io/compat-table/es5/
+[comp_table-es5]: http://kangax.github.io/compat-table/es5