[change] approved rules for react

merkle-open · Jul 22, 2016 · f4132e9 · f4132e9
1 parent bdcc7f5
commit f4132e9
Show file tree

Hide file tree

Showing 44 changed files with 1,598 additions and 76 deletions.
diff --git a/documentation/react.md b/documentation/react.md
diff --git a/rules/react.js b/rules/react.js
@@ -1,3 +1,5 @@
+/* global module */
+/* [22.07.2016] approved by skill group core team */
 module.exports = {
 	// View link below for react rules documentation
 	// https://github.com/yannickcr/eslint-plugin-react#list-of-supported-rules
@@ -8,7 +10,7 @@ module.exports = {
 
 		// Prevent missing displayName in a React component definition
 		// https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/display-name.md
-		'react/display-name': [0, { ignoreTranspilerName: false }],
+		'react/display-name': 2,
 
 		// Forbid certain propTypes (any, array, object)
 		// https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/forbid-prop-types.md
@@ -28,22 +30,26 @@ module.exports = {
 
 		// Enforce event handler naming conventions in JSX
 		// https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-handler-names.md
-		'react/jsx-handler-names': [0, {
+		'react/jsx-handler-names': [2, {
 			eventHandlerPrefix: 'handle',
 			eventHandlerPropPrefix: 'on'
 		}],
+		// [21.07.2016] enabled
 
 		// Validate props indentation in JSX
 		// https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-indent-props.md
 		'react/jsx-indent-props': [2, 'tab'],
+		// [11.07.2016] changed to tabs
 
 		// Validate JSX has key prop when in array or iterator
 		// https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-key.md
-		'react/jsx-key': 0,
+		'react/jsx-key': 2,
+		// [22.07.2016] enabled
 
 		// Limit maximum of props on a single line in JSX
 		// https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-max-props-per-line.md
-		'react/jsx-max-props-per-line': [0, { maximum: 1 }],
+		'react/jsx-max-props-per-line': [2, { maximum: 2 }],
+		// [22.07.2016] enabled max 2
 
 		// Prevent usage of .bind() in JSX props
 		// https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-no-bind.md
@@ -55,7 +61,7 @@ module.exports = {
 
 		// Prevent duplicate props in JSX
 		// https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-no-duplicate-props.md
-		'react/jsx-no-duplicate-props': [0, { ignoreCase: false }],
+		'react/jsx-no-duplicate-props': [2, { ignoreCase: false }],
 
 		// Prevent usage of unwrapped JSX strings
 		// https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-no-literals.md
@@ -105,7 +111,7 @@ module.exports = {
 
 		// Prevent usage of deprecated methods
 		// https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/no-deprecated.md
-		'react/no-deprecated': [1, { react: '0.15.0' }],
+		'react/no-deprecated': [2, { react: '0.15.0' }],
 
 		// Prevent usage of setState in componentDidMount
 		// https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/no-did-mount-set-state.md
@@ -117,7 +123,8 @@ module.exports = {
 
 		// Prevent direct mutation of this.state
 		// https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/no-direct-mutation-state.md
-		'react/no-direct-mutation-state': 0,
+		'react/no-direct-mutation-state': 2,
+		// [22.07.2016] enabled
 
 		// Prevent usage of isMounted
 		// https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/no-is-mounted.md
@@ -204,6 +211,7 @@ module.exports = {
 		// enforce JSX indentation
 		// https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-indent.md
 		'react/jsx-indent': [2, 'tab'],
+		// [11.07.2016] changed to tabs
 
 		// disallow target="_blank" on links
 		// https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-no-target-blank.md

diff --git a/test/es6-react/rules/react/display-name.js b/test/es6-react/rules/react/display-name.js
@@ -1,8 +1,27 @@
-
 // DESCRIPTION = Prevent missing displayName in a React component definition
-// STATUS = 0
+// STATUS = 2
 
+/* eslint require-jsdoc: 0*/
+/* eslint no-use-before-define: 0*/
+/* eslint no-undef: 0*/
+/* eslint no-unused-vars: 0*/
+/* eslint no-unreachable: 0*/
+/* eslint no-empty: 0*/
+/* eslint no-empty-function: 0*/
+/* eslint no-shadow: 0*/
+/* eslint no-redeclare: 0*/
+/* eslint react/react-in-jsx-scope: 0*/
+/* eslint react/prefer-stateless-function: 0*/
+/* eslint react/prefer-es6-class: 0*/
+/* eslint react/prop-types: 0*/
+/* eslint object-shorthand: 0*/
 // <!START
-
+// Bad
+/*
+const Hello = React.createClass({
+	render: function () {
+		return (<div>Hello {this.props.name}</div>);
+	}
+});
+*/
 // END!>
-document.window.append('', null);
diff --git a/test/es6-react/rules/react/jsx-boolean-value.js b/test/es6-react/rules/react/jsx-boolean-value.js
@@ -2,7 +2,27 @@
 // DESCRIPTION = Enforce boolean attributes notation in JSX
 // STATUS = 2
 
+/* eslint require-jsdoc: 0*/
+/* eslint no-use-before-define: 0*/
+/* eslint no-undef: 0*/
+/* eslint no-unused-vars: 0*/
+/* eslint no-unreachable: 0*/
+/* eslint no-empty: 0*/
+/* eslint no-empty-function: 0*/
+/* eslint no-shadow: 0*/
+/* eslint no-redeclare: 0*/
+/* eslint react/react-in-jsx-scope: 0*/
+/* eslint react/prefer-stateless-function: 0*/
+/* eslint react/prefer-es6-class: 0*/
+/* eslint react/prop-types: 0*/
+/* eslint object-shorthand: 0*/
 // <!START
+// Bad
+/*
+const Hello = <Hello personal={true} />;
+*/
 
+// Good
+const Hello = <Hello personal />;
 // END!>
-document.window.append('', null);
+
diff --git a/test/es6-react/rules/react/jsx-closing-bracket-location.js b/test/es6-react/rules/react/jsx-closing-bracket-location.js
@@ -2,7 +2,40 @@
 // DESCRIPTION = Validate closing bracket location in JSX
 // STATUS = 2
 
+/* eslint require-jsdoc: 0*/
+/* eslint no-use-before-define: 0*/
+/* eslint no-undef: 0*/
+/* eslint no-unused-vars: 0*/
+/* eslint no-unreachable: 0*/
+/* eslint no-empty: 0*/
+/* eslint no-empty-function: 0*/
+/* eslint no-shadow: 0*/
+/* eslint no-redeclare: 0*/
+/* eslint react/react-in-jsx-scope: 0*/
+/* eslint react/prefer-stateless-function: 0*/
+/* eslint react/prefer-es6-class: 0*/
+/* eslint react/prop-types: 0*/
+/* eslint react/jsx-no-undef: 0*/
+/* eslint react/no-multi-comp: 0*/
+/* eslint object-shorthand: 0*/
+/* eslint no-unused-expressions: 0*/
 // <!START
+// Bad
+/*
+<Hello
+	firstName="John"
+	lastName="Smith" />;
 
+<Hello
+	firstName="John"
+	lastName="Smith"
+	/>;
+*/
+
+// Good
+<Hello
+	firstName="John"
+	lastName="Smith"
+/>;
 // END!>
-document.window.append('', null);
+
diff --git a/test/es6-react/rules/react/jsx-curly-spacing.js b/test/es6-react/rules/react/jsx-curly-spacing.js
@@ -2,7 +2,36 @@
 // DESCRIPTION = Enforce or disallow spaces inside of curly braces in JSX attributes
 // STATUS = 2
 
+/* eslint require-jsdoc: 0*/
+/* eslint no-use-before-define: 0*/
+/* eslint no-undef: 0*/
+/* eslint no-unused-vars: 0*/
+/* eslint no-unreachable: 0*/
+/* eslint no-empty: 0*/
+/* eslint no-empty-function: 0*/
+/* eslint no-shadow: 0*/
+/* eslint no-redeclare: 0*/
+/* eslint react/react-in-jsx-scope: 0*/
+/* eslint react/prefer-stateless-function: 0*/
+/* eslint react/prefer-es6-class: 0*/
+/* eslint react/prop-types: 0*/
+/* eslint react/jsx-no-undef: 0*/
+/* eslint react/jsx-first-prop-new-line: 0*/
+/* eslint object-shorthand: 0*/
+/* eslint no-unused-expressions: 0*/
 // <!START
+// Bad
+/*
+<Hello name={ firstname } />;
+<Hello name={ firstname} />;
+<Hello name={firstname } />;
+*/
 
+// Good
+<Hello name={firstname} />;
+<Hello name={{ firstname: 'John', lastname: 'Doe' }} />;
+<Hello name={
+  firstname
+} />;
 // END!>
-document.window.append('', null);
+
diff --git a/test/es6-react/rules/react/jsx-equals-spacing.js b/test/es6-react/rules/react/jsx-equals-spacing.js
@@ -2,7 +2,33 @@
 // DESCRIPTION = enforce spacing around jsx equals signs
 // STATUS = 2
 
+/* eslint require-jsdoc: 0*/
+/* eslint no-use-before-define: 0*/
+/* eslint no-undef: 0*/
+/* eslint no-unused-vars: 0*/
+/* eslint no-unreachable: 0*/
+/* eslint no-empty: 0*/
+/* eslint no-empty-function: 0*/
+/* eslint no-shadow: 0*/
+/* eslint no-redeclare: 0*/
+/* eslint react/react-in-jsx-scope: 0*/
+/* eslint react/prefer-stateless-function: 0*/
+/* eslint react/prefer-es6-class: 0*/
+/* eslint react/prop-types: 0*/
+/* eslint react/jsx-no-undef: 0*/
+/* eslint object-shorthand: 0*/
+/* eslint no-unused-expressions: 0*/
 // <!START
+// Bad
+/*
+<Hello name = {firstname} />;
+<Hello name ={firstname} />;
+<Hello name= {firstname} />;
+*/
 
+// Good
+<Hello name={firstname} />;
+<Hello name />;
+<Hello {...props} />;
 // END!>
-document.window.append('', null);
+
diff --git a/test/es6-react/rules/react/jsx-first-prop-new-line.js b/test/es6-react/rules/react/jsx-first-prop-new-line.js
@@ -2,7 +2,35 @@
 // DESCRIPTION = Require that the first prop in a JSX element be on a new line when the element is multiline
 // STATUS = 2
 
+/* eslint require-jsdoc: 0*/
+/* eslint no-use-before-define: 0*/
+/* eslint no-undef: 0*/
+/* eslint no-unused-vars: 0*/
+/* eslint no-unreachable: 0*/
+/* eslint no-empty: 0*/
+/* eslint no-empty-function: 0*/
+/* eslint no-shadow: 0*/
+/* eslint no-redeclare: 0*/
+/* eslint react/react-in-jsx-scope: 0*/
+/* eslint react/prefer-stateless-function: 0*/
+/* eslint react/prefer-es6-class: 0*/
+/* eslint react/prop-types: 0*/
+/* eslint react/jsx-no-undef: 0*/
+/* eslint react/jsx-closing-bracket-location: 0*/
+/* eslint object-shorthand: 0*/
+/* eslint no-unused-expressions: 0*/
+
+
 // <!START
+// Bad
+/*
+<Hello personal
+	prop />;
+*/
 
+// Good
+<Hello
+	personal
+	prop
+/>;
 // END!>
-document.window.append('', null);
diff --git a/test/es6-react/rules/react/jsx-handler-names.js b/test/es6-react/rules/react/jsx-handler-names.js
@@ -1,8 +1,31 @@
 
 // DESCRIPTION = Enforce event handler naming conventions in JSX
-// STATUS = 0
+// STATUS = 2
 
+/* eslint require-jsdoc: 0*/
+/* eslint no-use-before-define: 0*/
+/* eslint no-undef: 0*/
+/* eslint no-unused-vars: 0*/
+/* eslint no-unreachable: 0*/
+/* eslint no-empty: 0*/
+/* eslint no-empty-function: 0*/
+/* eslint no-shadow: 0*/
+/* eslint no-redeclare: 0*/
+/* eslint react/react-in-jsx-scope: 0*/
+/* eslint react/prefer-stateless-function: 0*/
+/* eslint react/prefer-es6-class: 0*/
+/* eslint react/prop-types: 0*/
+/* eslint react/jsx-no-undef: 0*/
+/* eslint object-shorthand: 0*/
+/* eslint no-unused-expressions: 0*/
 // <!START
+// Bad
+/*
+<MyComponent handleChange={this.handleChange} />;
+<MyComponent onChange={this.componentChanged} />;
+*/
 
+// Good
+<MyComponent onChange={this.handleChange} />;
+<MyComponent onChange={this.props.onFoo} />;
 // END!>
-document.window.append('', null);
diff --git a/test/es6-react/rules/react/jsx-indent-props.js b/test/es6-react/rules/react/jsx-indent-props.js
@@ -2,7 +2,38 @@
 // DESCRIPTION = Validate props indentation in JSX
 // STATUS = 2
 
+/* eslint require-jsdoc: 0*/
+/* eslint no-use-before-define: 0*/
+/* eslint no-undef: 0*/
+/* eslint no-unused-vars: 0*/
+/* eslint no-unreachable: 0*/
+/* eslint no-empty: 0*/
+/* eslint no-empty-function: 0*/
+/* eslint no-shadow: 0*/
+/* eslint no-redeclare: 0*/
+/* eslint react/react-in-jsx-scope: 0*/
+/* eslint react/prefer-stateless-function: 0*/
+/* eslint react/prefer-es6-class: 0*/
+/* eslint react/prop-types: 0*/
+/* eslint react/jsx-no-undef: 0*/
+/* eslint object-shorthand: 0*/
+/* eslint no-unused-expressions: 0*/
 // <!START
+// Bad
+/*
+// 2 spaces indentation
+<Hello
+  firstName="John"
+/>;
 
+// no indentation
+<Hello
+firstName="John"
+/>;
+*/
+
+// Good
+<Hello
+	firstName="John"
+/>;
 // END!>
-document.window.append('', null);