Add jsx-max-props-per-line rule (fixes #13)

Author: yannickcr

README.md

@@ -44,6 +44,8 @@ Finally, enable all of the rules that you would like to use.
   "rules": {
     "react/display-name": 1,
     "react/jsx-boolean-value": 1,
+    "react/jsx-curly-spacing": 1,
+    "react/jsx-max-props-per-line": 1,
     "react/jsx-no-duplicate-props": 1,
     "react/jsx-no-undef": 1,
     "react/jsx-quotes": 1,
@@ -71,6 +73,7 @@ Finally, enable all of the rules that you would like to use.
 * [display-name](docs/rules/display-name.md): Prevent missing displayName in a React component definition
 * [jsx-boolean-value](docs/rules/jsx-boolean-value.md): Enforce boolean attributes notation in JSX
 * [jsx-curly-spacing](docs/rules/jsx-curly-spacing.md): Enforce or disallow spaces inside of curly braces in JSX attributes
+* [jsx-max-props-per-line](docs/rules/jsx-max-props-per-line.md): Limit maximum of props on a single line in JSX
 * [jsx-no-duplicate-props](docs/rules/jsx-no-duplicate-props.md): Prevent duplicate props in JSX
 * [jsx-no-undef](docs/rules/jsx-no-undef.md): Disallow undeclared variables in JSX
 * [jsx-quotes](docs/rules/jsx-quotes.md): Enforce quote style for JSX attributes

docs/rules/jsx-max-props-per-line.md

@@ -0,0 +1,61 @@
+# Limit maximum of props on a single line in JSX (jsx-max-props-per-line)
+
+Limiting the maximum of props on a single line can improve readability.
+
+## Rule Details
+
+This rule checks all JSX elements and verifies that the number of props per line do not exceed the maximum allowed. A spread attribute count as one prop. This rule is off by default and when on the default maximum of props on one line is `1`.
+
+The following patterns are considered warnings:
+
+```jsx
+<Hello lastName="Smith" firstName="John" />;
+```
+
+The following patterns are not considered warnings:
+
+```jsx
+<Hello
+  firstName="John"
+  lastName="Smith"
+/>;
+
+<Hello
+  {...this.props}
+  firstName="John"
+  lastName="Smith"
+/>;
+```
+
+## Rule Options
+
+```js
+...
+"jsx-max-props-per-line": [<enabled>, { "maximum": <number> }]
+...
+```
+
+### `maximum`
+
+Maximum number of props allowed on a single line. Default to `1`.
+
+The following patterns are considered warnings:
+
+```jsx
+// [1, {maximum: 2}]
+<Hello firstName="John" lastName="Smith" tel={5555555} />;
+```
+
+The following patterns are not considered warnings:
+
+```jsx
+// [1, {maximum: 2}]
+<Hello
+  firstName="John" lastName="Smith"
+  tel={5555555}
+/>;
+```
+
+## When not to use
+
+If you are not using JSX then you can disable this rule.

index.js

@@ -22,7 +22,8 @@ module.exports = {
     'jsx-boolean-value': require('./lib/rules/jsx-boolean-value'),
     'sort-comp': require('./lib/rules/sort-comp'),
     'require-extension': require('./lib/rules/require-extension'),
-    'jsx-no-duplicate-props': require('./lib/rules/jsx-no-duplicate-props')
+    'jsx-no-duplicate-props': require('./lib/rules/jsx-no-duplicate-props'),
+    'jsx-max-props-per-line': require('./lib/rules/jsx-max-props-per-line')
   },
   rulesConfig: {
     'jsx-uses-react': 0,
@@ -45,6 +46,7 @@ module.exports = {
     'jsx-boolean-value': 0,
     'sort-comp': 0,
     'require-extension': 0,
-    'jsx-no-duplicate-props': 0
+    'jsx-no-duplicate-props': 0,
+    'jsx-max-props-per-line': 0
   }
 };

lib/rules/jsx-max-props-per-line.js

@@ -0,0 +1,59 @@
+/**
+ * @fileoverview Limit maximum of props on a single line in JSX
+ * @author Yannick Croissant
+ */
+
+'use strict';
+
+// ------------------------------------------------------------------------------
+// Rule Definition
+// ------------------------------------------------------------------------------
+
+module.exports = function (context) {
+
+  var configuration = context.options[0] || {};
+  var maximum = configuration.maximum || 1;
+
+  function getPropName(propNode) {
+    if (propNode.type === 'JSXSpreadAttribute') {
+      return context.getSource(propNode.argument);
+    }
+    return propNode.name.name;
+  }
+
+  return {
+    JSXOpeningElement: function (node) {
+      var props = {};
+
+      node.attributes.forEach(function(decl) {
+        var line = decl.loc.start.line;
+        if (props[line]) {
+          props[line].push(decl);
+        } else {
+          props[line] = [decl];
+        }
+      });
+
+      for (var line in props) {
+        if (!props.hasOwnProperty(line)) {
+          continue;
+        }
+        if (props[line].length > maximum) {
+          var name = getPropName(props[line][maximum]);
+          context.report(props[line][maximum], 'Prop `' + name + '` must be placed on a new line');
+          break;
+        }
+      }
+    }
+  };
+};
+
+module.exports.schema = [{
+  type: 'object',
+  properties: {
+    maximum: {
+      type: 'integer',
+      minimum: 1
+    }
+  }
+}];

tests/lib/rules/jsx-max-props-per-line.js

@@ -0,0 +1,86 @@
+/**
+ * @fileoverview Limit maximum of props on a single line in JSX
+ * @author Yannick Croissant
+ */
+'use strict';
+
+// ------------------------------------------------------------------------------
+// Requirements
+// ------------------------------------------------------------------------------
+
+var eslint = require('eslint').linter;
+var ESLintTester = require('eslint').ESLintTester;
+
+// ------------------------------------------------------------------------------
+// Tests
+// ------------------------------------------------------------------------------
+
+var eslintTester = new ESLintTester(eslint);
+eslintTester.addRuleTest('lib/rules/jsx-max-props-per-line', {
+  valid: [{
+    code: '<App foo />',
+    ecmaFeatures: {jsx: true}
+  }, {
+    code: '<App foo bar />',
+    options: [{maximum: 2}],
+    ecmaFeatures: {jsx: true}
+  }, {
+    code: '<App {...this.props} bar />',
+    options: [{maximum: 2}],
+    ecmaFeatures: {jsx: true}
+  }, {
+    code: [
+      '<App',
+      '  foo',
+      '  bar',
+      '/>'
+    ].join('\n'),
+    ecmaFeatures: {jsx: true}
+  }, {
+    code: [
+      '<App',
+      '  foo bar',
+      '  baz',
+      '/>'
+    ].join('\n'),
+    options: [{maximum: 2}],
+    ecmaFeatures: {jsx: true}
+  }],
+
+  invalid: [{
+    code: '<App foo bar baz />;',
+    errors: [{message: 'Prop `bar` must be placed on a new line'}],
+    ecmaFeatures: {jsx: true}
+  }, {
+    code: '<App foo bar baz />;',
+    options: [{maximum: 2}],
+    errors: [{message: 'Prop `baz` must be placed on a new line'}],
+    ecmaFeatures: {jsx: true}
+  }, {
+    code: '<App {...this.props} bar />;',
+    errors: [{message: 'Prop `bar` must be placed on a new line'}],
+    ecmaFeatures: {jsx: true}
+  }, {
+    code: '<App bar {...this.props} />;',
+    errors: [{message: 'Prop `this.props` must be placed on a new line'}],
+    ecmaFeatures: {jsx: true}
+  }, {
+    code: [
+      '<App',
+      '  foo bar',
+      '  baz',
+      '/>'
+    ].join('\n'),
+    errors: [{message: 'Prop `bar` must be placed on a new line'}],
+    ecmaFeatures: {jsx: true}
+  }, {
+    code: [
+      '<App',
+      '  foo {...this.props}',
+      '  baz',
+      '/>'
+    ].join('\n'),
+    errors: [{message: 'Prop `this.props` must be placed on a new line'}],
+    ecmaFeatures: {jsx: true}
+  }]
+});