diff --git a/README.md b/README.md index 11b8861fec..e8c80b7236 100644 --- a/README.md +++ b/README.md @@ -117,7 +117,7 @@ Finally, enable all of the rules that you would like to use. Use [our preset](# * [react/jsx-curly-spacing](docs/rules/jsx-curly-spacing.md): Enforce or disallow spaces inside of curly braces in JSX attributes (fixable) * [react/jsx-equals-spacing](docs/rules/jsx-equals-spacing.md): Enforce or disallow spaces around equal signs in JSX attributes (fixable) * [react/jsx-filename-extension](docs/rules/jsx-filename-extension.md): Restrict file extensions that may contain JSX -* [react/jsx-first-prop-new-line](docs/rules/jsx-first-prop-new-line.md): Enforce position of the first prop in JSX +* [react/jsx-first-prop-new-line](docs/rules/jsx-first-prop-new-line.md): Enforce position of the first prop in JSX (fixable) * [react/jsx-handler-names](docs/rules/jsx-handler-names.md): Enforce event handler naming conventions in JSX * [react/jsx-indent](docs/rules/jsx-indent.md): Validate JSX indentation * [react/jsx-indent-props](docs/rules/jsx-indent-props.md): Validate props indentation in JSX (fixable) diff --git a/docs/rules/jsx-first-prop-new-line.md b/docs/rules/jsx-first-prop-new-line.md index 309efb967d..67e45d4067 100644 --- a/docs/rules/jsx-first-prop-new-line.md +++ b/docs/rules/jsx-first-prop-new-line.md @@ -2,6 +2,8 @@ Ensure correct position of the first property. +**Fixable:** This rule is automatically fixable using the `--fix` flag on the command line. However, fix does not include indentation. Please rerun lint to correct those errors. + ## Rule Details This rule checks whether the first property of all JSX elements is correctly placed. There are three possible configurations: diff --git a/lib/rules/jsx-first-prop-new-line.js b/lib/rules/jsx-first-prop-new-line.js index 981dc62e7e..6307439b8b 100644 --- a/lib/rules/jsx-first-prop-new-line.js +++ b/lib/rules/jsx-first-prop-new-line.js @@ -15,6 +15,7 @@ module.exports = { category: 'Stylistic Issues', recommended: false }, + fixable: 'code', schema: [{ enum: ['always', 'never', 'multiline', 'multiline-multiprop'] @@ -35,20 +36,27 @@ module.exports = { (configuration === 'multiline-multiprop' && isMultilineJSX(node) && node.attributes.length > 1) || (configuration === 'always') ) { - node.attributes.forEach(function(decl) { + node.attributes.some(function(decl) { if (decl.loc.start.line === node.loc.start.line) { context.report({ node: decl, - message: 'Property should be placed on a new line' + message: 'Property should be placed on a new line', + fix: function(fixer) { + return fixer.replaceTextRange([node.name.end, decl.start], '\n'); + } }); } + return true; }); } else if (configuration === 'never' && node.attributes.length > 0) { var firstNode = node.attributes[0]; if (node.loc.start.line < firstNode.loc.start.line) { context.report({ node: firstNode, - message: 'Property should be placed on the same line as the component declaration' + message: 'Property should be placed on the same line as the component declaration', + fix: function(fixer) { + return fixer.replaceTextRange([node.name.end, firstNode.start], ' '); + } }); return; } diff --git a/tests/lib/rules/jsx-first-prop-new-line.js b/tests/lib/rules/jsx-first-prop-new-line.js index 9feb9cfd5d..a7b558ce30 100644 --- a/tests/lib/rules/jsx-first-prop-new-line.js +++ b/tests/lib/rules/jsx-first-prop-new-line.js @@ -152,7 +152,11 @@ ruleTester.run('jsx-first-prop-new-line', rule, { invalid: [ { - code: '', + code: '', + output: [ + '' + ].join('\n'), options: ['always'], errors: [{message: 'Property should be placed on a new line'}], parser: parserOptions @@ -163,6 +167,12 @@ ruleTester.run('jsx-first-prop-new-line', rule, { ' propTwo="two"', '/>' ].join('\n'), + output: [ + '' + ].join('\n'), options: ['always'], errors: [{message: 'Property should be placed on a new line'}], parser: parserOptions @@ -170,8 +180,13 @@ ruleTester.run('jsx-first-prop-new-line', rule, { { code: [ '' + ].join('\n'), + output: [ + '' ].join('\n'), options: ['never'], @@ -183,6 +198,11 @@ ruleTester.run('jsx-first-prop-new-line', rule, { '' ].join('\n'), + output: [ + '' + ].join('\n'), options: ['multiline'], errors: [{message: 'Property should be placed on a new line'}], parser: parserOptions @@ -192,6 +212,11 @@ ruleTester.run('jsx-first-prop-new-line', rule, { '' ].join('\n'), + output: [ + '' + ].join('\n'), options: ['multiline-multiprop'], errors: [{message: 'Property should be placed on a new line'}], parser: parserOptions