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 } ] });