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