From d2d6d7f1c8108276892d9a9d19e3ec0b3fe10726 Mon Sep 17 00:00:00 2001 From: Kenneth Chung Date: Mon, 3 Oct 2016 22:45:38 -0700 Subject: [PATCH 1/2] jsx-first-prop-new-line: add multiline-multiprop option This new option is similar to `multiline`, but it will only enforce a new line if the tag spans multiple lines *and* are more than 1 prop. Also, clear up the language in the docs for the `multiline` option. We are checking that the tag spans multiple lines. This does not imply there are multiple props (1 prop can span multiple lines). --- docs/rules/jsx-first-prop-new-line.md | 29 +++++++++++- lib/rules/jsx-first-prop-new-line.js | 8 +++- tests/lib/rules/jsx-first-prop-new-line.js | 51 ++++++++++++++++++++++ 3 files changed, 85 insertions(+), 3 deletions(-) diff --git a/docs/rules/jsx-first-prop-new-line.md b/docs/rules/jsx-first-prop-new-line.md index 0a6a6213b8..2f1323dd1b 100644 --- a/docs/rules/jsx-first-prop-new-line.md +++ b/docs/rules/jsx-first-prop-new-line.md @@ -7,7 +7,8 @@ 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"`: @@ -58,6 +59,11 @@ The following patterns are considered warnings when configured `"multiline"`: prop /> ``` +```jsx + +``` + The following patterns are not considered warnings when configured `"multiline"`: ```js @@ -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 + +``` + +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 } ] }); From b341300dd014376231be37df174e486109e3c41f Mon Sep 17 00:00:00 2001 From: Kenneth Chung Date: Tue, 4 Oct 2016 18:29:17 -0700 Subject: [PATCH 2/2] Use jsx instead of js for jsx fence blocks --- docs/rules/jsx-first-prop-new-line.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/docs/rules/jsx-first-prop-new-line.md b/docs/rules/jsx-first-prop-new-line.md index 2f1323dd1b..309efb967d 100644 --- a/docs/rules/jsx-first-prop-new-line.md +++ b/docs/rules/jsx-first-prop-new-line.md @@ -12,7 +12,7 @@ This rule checks whether the first property of all JSX elements is correctly pla The following patterns are considered warnings when configured `"always"`: -```js +```jsx @@ -33,7 +33,7 @@ The following patterns are not considered warnings when configured `"always"`: The following patterns are considered warnings when configured `"never"`: -```js +```jsx @@ -44,7 +44,7 @@ The following patterns are considered warnings when configured `"never"`: The following patterns are not considered warnings when configured `"never"`: -```js +```jsx ``` @@ -66,7 +66,7 @@ The following patterns are considered warnings when configured `"multiline"`: The following patterns are not considered warnings when configured `"multiline"`: -```js +```jsx