diff --git a/docs/rules/jsx-first-prop-new-line.md b/docs/rules/jsx-first-prop-new-line.md
index 0a6a6213b8..309efb967d 100644
--- a/docs/rules/jsx-first-prop-new-line.md
+++ b/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
@@ -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
@@ -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
```
+```jsx
+
+```
+
The following patterns are not considered warnings when configured `"multiline"`:
-```js
+```jsx
```
+The following patterns are considered warnings when configured `"multiline-multiprop"`:
+
+```jsx
+
+```
+
+The following patterns are not considered warnings when configured `"multiline-multiprop"`:
+
+```jsx
+
+
+
+```
+
## When not to use
If you are not using JSX then you can disable this rule.
diff --git a/lib/rules/jsx-first-prop-new-line.js b/lib/rules/jsx-first-prop-new-line.js
index 4a37746572..981dc62e7e 100644
--- a/lib/rules/jsx-first-prop-new-line.js
+++ b/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({
diff --git a/tests/lib/rules/jsx-first-prop-new-line.js b/tests/lib/rules/jsx-first-prop-new-line.js
index 2fd2dab2c1..9feb9cfd5d 100644
--- a/tests/lib/rules/jsx-first-prop-new-line.js
+++ b/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: [
+ ''
+ ].join('\n'),
+ options: ['multiline-multiprop'],
+ parser: parserOptions
+ },
+ {
+ code: [
+ ''
+ ].join('\n'),
+ options: ['multiline-multiprop'],
+ parser: parserOptions
+ },
+ {
+ code: [
+ ''
+ ].join('\n'),
+ options: ['multiline-multiprop'],
+ parser: parserOptions
+ },
+ {
+ code: [
+ ''
+ ].join('\n'),
+ options: ['multiline-multiprop'],
+ parser: parserOptions
+ },
{
code: '',
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: [
+ ''
+ ].join('\n'),
+ options: ['multiline'],
+ errors: [{message: 'Property should be placed on a new line'}],
+ parser: parserOptions
+ },
+ {
+ code: [
+ ''
+ ].join('\n'),
+ options: ['multiline-multiprop'],
+ errors: [{message: 'Property should be placed on a new line'}],
+ parser: parserOptions
}
]
});