Add jsx-first-prop-new-line rule (fixes #410)

Author: jseminck

README.md

@@ -102,6 +102,7 @@ The plugin has a [recommended configuration](#user-content-recommended-configura
 * [jsx-closing-bracket-location](docs/rules/jsx-closing-bracket-location.md): Validate closing bracket location in JSX (fixable)
 * [jsx-curly-spacing](docs/rules/jsx-curly-spacing.md): Enforce or disallow spaces inside of curly braces in JSX attributes (fixable)
 * [jsx-equals-spacing](docs/rules/jsx-equals-spacing.md): Enforce or disallow spaces around equal signs in JSX attributes (fixable)
+* [jsx-first-prop-new-line](docs/rules/jsx-first-prop-new-line.md): Enforce position of the first prop in JSX
 * [jsx-handler-names](docs/rules/jsx-handler-names.md): Enforce event handler naming conventions in JSX
 * [jsx-indent-props](docs/rules/jsx-indent-props.md): Validate props indentation in JSX (fixable)
 * [jsx-indent](docs/rules/jsx-indent.md): Validate JSX indentation

docs/rules/jsx-first-prop-new-line.md

@@ -0,0 +1,74 @@
+# Configure the position of the first property (jsx-first-prop-new-line)
+
+Ensure correct position of the first property.
+
+## Rule Details
+
+This rule checks whether the first property of all JSX elements is correctly placed. There are three possible configurations:
+* `always`: The first property should always be placed on a new line.
+* `never` : The first property should never be placed on a new line, e.g. should always be on the same line as the Component opening tag.
+* `multiline`: The first property should always be placed on a new line when the properties are spread over multiple lines.
+
+The following patterns are considered warnings when configured `"always"`:
+
+```js
+<Hello personal={true} />
+
+<Hello personal={true}
+    foo="bar"
+/>
+```
+
+The following patterns are not considered warnings when configured `"always"`:
+
+```js
+<Hello
+    personal />
+
+<Hello
+    personal
+/>
+```
+
+The following patterns are considered warnings when configured `"never"`:
+
+```js
+<Hello
+    personal />
+
+<Hello
+    personal
+/>
+```
+
+The following patterns are not considered warnings when configured `"never"`:
+
+```js
+<Hello personal={true} />
+
+<Hello personal={true}
+    foo="bar"
+/>
+```
+
+The following patterns are considered warnings when configured `"multiline"`:
+
+```js
+<Hello personal
+    prop />
+```
+
+The following patterns are not considered warnings when configured `"multiline"`:
+
+```js
+<Hello personal={true} />
+
+<Hello
+    personal={true}
+    foo="bar"
+/>
+```
+
+## When not to use
+
+If you are not using JSX then you can disable this rule.

index.js

@@ -42,7 +42,8 @@ module.exports = {
     'jsx-key': require('./lib/rules/jsx-key'),
     'no-string-refs': require('./lib/rules/no-string-refs'),
     'prefer-stateless-function': require('./lib/rules/prefer-stateless-function'),
-    'require-render-return': require('./lib/rules/require-render-return')
+    'require-render-return': require('./lib/rules/require-render-return'),
+    'jsx-first-prop-new-line': require('./lib/rules/jsx-first-prop-new-line')
   },
   configs: {
     recommended: {

lib/rules/jsx-first-prop-new-line.js

@@ -0,0 +1,46 @@
+/**
+ * @fileoverview Ensure proper position of the first property in JSX
+ * @author Joachim Seminck
+ */
+'use strict';
+
+// ------------------------------------------------------------------------------
+// Rule Definition
+// ------------------------------------------------------------------------------
+
+module.exports = function (context) {
+  var configuration = context.options[0];
+
+  function isMultilineJSX(jsxNode) {
+    return jsxNode.loc.start.line < jsxNode.loc.end.line;
+  }
+
+  return {
+    JSXOpeningElement: function (node) {
+      if ((configuration === 'multiline' && isMultilineJSX(node)) || (configuration === 'always')) {
+        node.attributes.forEach(function(decl) {
+          if (decl.loc.start.line === node.loc.start.line) {
+            context.report({
+              node: decl,
+              message: 'Property should be placed on a new line'
+            });
+          }
+        });
+      } else if (configuration === 'never' && node.attributes.length > 0) {
+        var firstNode = node.attributes[0];
+        if (node.loc.start.line < firstNode.loc.start.line) {
+          context.report({
+            node: firstNode,
+            message: 'Property should be placed on the same line as the component declaration'
+          });
+          return;
+        }
+      }
+      return;
+    }
+  };
+};
+
+module.exports.schema = [{
+  enum: ['always', 'never', 'multiline']
+}];

tests/lib/rules/jsx-first-prop-new-line.js

@@ -0,0 +1,149 @@
+/**
+ * @fileoverview Ensure proper position of the first property in JSX
+ * @author Joachim Seminck
+ */
+'use strict';
+
+// -----------------------------------------------------------------------------
+// Requirements
+// -----------------------------------------------------------------------------
+
+var rule = require('../../../lib/rules/jsx-first-prop-new-line');
+var RuleTester = require('eslint').RuleTester;
+
+var parserOptions = 'babel-eslint';
+
+// -----------------------------------------------------------------------------
+// Tests
+// -----------------------------------------------------------------------------
+
+var ruleTester = new RuleTester();
+ruleTester.run('jsx-first-prop-new-line', rule, {
+
+  valid: [
+    {
+      code: '<Foo />',
+      options: ['never'],
+      parser: parserOptions
+    },
+    {
+      code: '<Foo prop="bar" />',
+      options: ['never'],
+      parser: parserOptions
+    },
+    {
+      code: '<Foo {...this.props} />',
+      options: ['never'],
+      parser: parserOptions
+    },
+    {
+      code: '<Foo a a a />',
+      options: ['never'],
+      parser: parserOptions
+    },
+    {
+      code: [
+        '<Foo a',
+        '  b ',
+        '/>'
+      ].join('\n'),
+      options: ['never'],
+      parser: parserOptions
+    },
+    {
+      code: '<Foo />',
+      options: ['multiline'],
+      parser: parserOptions
+    },
+    {
+      code: '<Foo prop="one" />',
+      options: ['multiline'],
+      parser: parserOptions
+    },
+    {
+      code: '<Foo {...this.props} />',
+      options: ['multiline'],
+      parser: parserOptions
+    },
+    {
+      code: '<Foo a a a />',
+      options: ['multiline'],
+      parser: parserOptions
+    },
+    {
+      code: [
+        '<Foo',
+        '  propOne="one"',
+        '  propTwo="two"',
+        '/>'
+      ].join('\n'),
+      options: ['multiline'],
+      parser: parserOptions
+    },
+    {
+      code: [
+        '<Foo',
+        '  {...this.props}',
+        '  propTwo="two"',
+        '/>'
+      ].join('\n'),
+      options: ['multiline'],
+      parser: parserOptions
+    },
+    {
+      code: '<Foo />',
+      options: ['always'],
+      parser: parserOptions
+    },
+    {
+      code: [
+        '<Foo',
+        '  propOne="one"',
+        '  propTwo="two"',
+        '/>'
+      ].join('\n'),
+      options: ['always'],
+      parser: parserOptions
+    },
+    {
+      code: [
+        '<Foo',
+        '  {...this.props}',
+        '  propTwo="two"',
+        '/>'
+      ].join('\n'),
+      options: ['always'],
+      parser: parserOptions
+    }
+  ],
+
+  invalid: [
+    {
+      code: '<Foo prop="one" />',
+      options: ['always'],
+      errors: [{message: 'Property should be placed on a new line'}],
+      parser: parserOptions
+    },
+    {
+      code: [
+        '<Foo propOne="one"',
+        '  propTwo="two"',
+        '/>'
+      ].join('\n'),
+      options: ['always'],
+      errors: [{message: 'Property should be placed on a new line'}],
+      parser: parserOptions
+    },
+    {
+      code: [
+        '<Foo',
+        ' propOne="one"',
+        ' propTwo="two"',
+        '/>'
+      ].join('\n'),
+      options: ['never'],
+      errors: [{message: 'Property should be placed on the same line as the component declaration'}],
+      parser: parserOptions
+    }
+  ]
+});