Add multiline-multiprop option to jsx-first-prop-new-line (fixes #878)

Author: kentor

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

@@ -7,11 +7,12 @@ Ensure correct position of the first property.
 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.
+* `multiline`: The first property should always be placed on a new line when the JSX tag takes up multiple lines.
+* `multiline-multiprop`: The first property should always be placed on a new line if the JSX tag takes up multiple lines and there are multiple properties.
 
 The following patterns are considered warnings when configured `"always"`:
 
-```js
+```jsx
 <Hello personal={true} />
 
 <Hello personal={true}
@@ -21,7 +22,7 @@ The following patterns are considered warnings when configured `"always"`:
 
 The following patterns are not considered warnings when configured `"always"`:
 
-```js
+```jsx
 <Hello
     personal />
 
@@ -32,7 +33,7 @@ The following patterns are not considered warnings when configured `"always"`:
 
 The following patterns are considered warnings when configured `"never"`:
 
-```js
+```jsx
 <Hello
     personal />
 
@@ -43,7 +44,7 @@ The following patterns are considered warnings when configured `"never"`:
 
 The following patterns are not considered warnings when configured `"never"`:
 
-```js
+```jsx
 <Hello personal={true} />
 
 <Hello personal={true}
@@ -53,14 +54,19 @@ The following patterns are not considered warnings when configured `"never"`:
 
 The following patterns are considered warnings when configured `"multiline"`:
 
-```js
+```jsx
 <Hello personal
     prop />
 ```
 
+```jsx
+<Hello foo={{
+}} />
+```
+
 The following patterns are not considered warnings when configured `"multiline"`:
 
-```js
+```jsx
 <Hello personal={true} />
 
 <Hello
@@ -69,6 +75,27 @@ The following patterns are not considered warnings when configured `"multiline"`
 />
 ```
 
+The following patterns are considered warnings when configured `"multiline-multiprop"`:
+
+```jsx
+<Hello foo={{
+    }}
+    bar />
+```
+
+The following patterns are not considered warnings when configured `"multiline-multiprop"`:
+
+```jsx
+<Hello foo={{
+}} />
+
+<Hello
+    foo={{
+    }}
+    bar
+/>
+```
+
 ## When not to use
 
 If you are not using JSX then you can disable this rule.

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

@@ -17,7 +17,7 @@ module.exports = {
     },
 
     schema: [{
-      enum: ['always', 'never', 'multiline']
+      enum: ['always', 'never', 'multiline', 'multiline-multiprop']
     }]
   },
 
@@ -30,7 +30,11 @@ module.exports = {
 
     return {
       JSXOpeningElement: function (node) {
-        if ((configuration === 'multiline' && isMultilineJSX(node)) || (configuration === 'always')) {
+        if (
+          (configuration === 'multiline' && isMultilineJSX(node)) ||
+          (configuration === 'multiline-multiprop' && isMultilineJSX(node) && node.attributes.length > 1) ||
+          (configuration === 'always')
+        ) {
           node.attributes.forEach(function(decl) {
             if (decl.loc.start.line === node.loc.start.line) {
               context.report({

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

@@ -90,6 +90,39 @@ ruleTester.run('jsx-first-prop-new-line', rule, {
       options: ['multiline'],
       parser: parserOptions
     },
+    {
+      code: [
+        '<Foo bar />'
+      ].join('\n'),
+      options: ['multiline-multiprop'],
+      parser: parserOptions
+    },
+    {
+      code: [
+        '<Foo bar baz />'
+      ].join('\n'),
+      options: ['multiline-multiprop'],
+      parser: parserOptions
+    },
+    {
+      code: [
+        '<Foo prop={{',
+        '}} />'
+      ].join('\n'),
+      options: ['multiline-multiprop'],
+      parser: parserOptions
+    },
+    {
+      code: [
+        '<Foo ',
+        '  foo={{',
+        '  }}',
+        '  bar',
+        '/>'
+      ].join('\n'),
+      options: ['multiline-multiprop'],
+      parser: parserOptions
+    },
     {
       code: '<Foo />',
       options: ['always'],
@@ -144,6 +177,24 @@ ruleTester.run('jsx-first-prop-new-line', rule, {
       options: ['never'],
       errors: [{message: 'Property should be placed on the same line as the component declaration'}],
       parser: parserOptions
+    },
+    {
+      code: [
+        '<Foo prop={{',
+        '}} />'
+      ].join('\n'),
+      options: ['multiline'],
+      errors: [{message: 'Property should be placed on a new line'}],
+      parser: parserOptions
+    },
+    {
+      code: [
+        '<Foo bar={{',
+        '}} baz />'
+      ].join('\n'),
+      options: ['multiline-multiprop'],
+      errors: [{message: 'Property should be placed on a new line'}],
+      parser: parserOptions
     }
   ]
 });