diff --git a/docs/rules/jsx-max-props-per-line.md b/docs/rules/jsx-max-props-per-line.md index a8222c9069..06152d073a 100644 --- a/docs/rules/jsx-max-props-per-line.md +++ b/docs/rules/jsx-max-props-per-line.md @@ -35,7 +35,7 @@ The following patterns are not considered warnings: ```js ... -"jsx-max-props-per-line": [, { "maximum": }] +"jsx-max-props-per-line": [, { "maximum": , "when": }] ... ``` @@ -60,6 +60,28 @@ The following patterns are not considered warnings: />; ``` +### `when` + +Possible values: +- `always` (default) - Always check for max props per line. +- `multiline` - Only check for max props per line when jsx tag spans multiple lines. + +The following patterns are considered warnings: +```jsx +// [1, {when: always}] + +``` + +The following patterns are not considered warnings: +```jsx +// [1, {when: multiline}] + + +``` + ## When not to use If you are not using JSX then you can disable this rule. diff --git a/lib/rules/jsx-max-props-per-line.js b/lib/rules/jsx-max-props-per-line.js index 4714b717e4..1157784ca0 100644 --- a/lib/rules/jsx-max-props-per-line.js +++ b/lib/rules/jsx-max-props-per-line.js @@ -23,6 +23,10 @@ module.exports = { maximum: { type: 'integer', minimum: 1 + }, + when: { + type: 'string', + enum: ['always', 'multiline'] } } }] @@ -33,6 +37,7 @@ module.exports = { var sourceCode = context.getSourceCode(); var configuration = context.options[0] || {}; var maximum = configuration.maximum || 1; + var when = configuration.when || 'always'; function getPropName(propNode) { if (propNode.type === 'JSXSpreadAttribute') { @@ -47,6 +52,10 @@ module.exports = { return; } + if (when === 'multiline' && node.loc.start.line === node.loc.end.line) { + return; + } + var firstProp = node.attributes[0]; var linePartitionedProps = [[firstProp]]; diff --git a/tests/lib/rules/jsx-max-props-per-line.js b/tests/lib/rules/jsx-max-props-per-line.js index f676a7f57e..b322c367f9 100644 --- a/tests/lib/rules/jsx-max-props-per-line.js +++ b/tests/lib/rules/jsx-max-props-per-line.js @@ -25,12 +25,23 @@ var parserOptions = { var ruleTester = new RuleTester(); ruleTester.run('jsx-max-props-per-line', rule, { valid: [{ + code: '', + parserOptions: parserOptions + }, { code: '', parserOptions: parserOptions }, { code: '', options: [{maximum: 2}], parserOptions: parserOptions + }, { + code: '', + options: [{when: 'multiline'}], + parserOptions: parserOptions + }, { + code: '', + options: [{maximum: 2, when: 'multiline'}], + parserOptions: parserOptions }, { code: '', options: [{maximum: 2}],