diff --git a/README.md b/README.md index 376951cfb8..9830896e24 100644 --- a/README.md +++ b/README.md @@ -103,7 +103,7 @@ Finally, enable all of the rules that you would like to use. Use [our preset](# * [react/require-extension](docs/rules/require-extension.md): Restrict file extensions that may be required * [react/require-optimization](docs/rules/require-optimization.md): Enforce React components to have a shouldComponentUpdate method * [react/require-render-return](docs/rules/require-render-return.md): Enforce ES5 or ES6 class for returning value in render function -* [react/self-closing-comp](docs/rules/self-closing-comp.md): Prevent extra closing tags for components without children +* [react/self-closing-comp](docs/rules/self-closing-comp.md): Prevent extra closing tags for components without children (fixable) * [react/sort-comp](docs/rules/sort-comp.md): Enforce component methods order * [react/sort-prop-types](docs/rules/sort-prop-types.md): Enforce propTypes declarations alphabetical sorting diff --git a/docs/rules/jsx-space-before-closing.md b/docs/rules/jsx-space-before-closing.md index 6b162f3577..a58096d092 100644 --- a/docs/rules/jsx-space-before-closing.md +++ b/docs/rules/jsx-space-before-closing.md @@ -2,6 +2,8 @@ Enforce or forbid spaces before the closing bracket of self-closing JSX elements. +**Fixable:** This rule is automatically fixable using the `--fix` flag on the command line. + ## Rule Details This rule checks if there is one or more spaces before the closing bracket of self-closing JSX elements. diff --git a/docs/rules/self-closing-comp.md b/docs/rules/self-closing-comp.md index 938a7b5153..156c9cbdca 100644 --- a/docs/rules/self-closing-comp.md +++ b/docs/rules/self-closing-comp.md @@ -2,6 +2,8 @@ Components without children can be self-closed to avoid unnecessary extra closing tag. +**Fixable:** This rule is automatically fixable using the `--fix` flag on the command line. + ## Rule Details The following patterns are considered warnings: diff --git a/lib/rules/self-closing-comp.js b/lib/rules/self-closing-comp.js index b04f5fddf5..3835336f7f 100644 --- a/lib/rules/self-closing-comp.js +++ b/lib/rules/self-closing-comp.js @@ -15,6 +15,7 @@ module.exports = { category: 'Stylistic Issues', recommended: false }, + fixable: 'code', schema: [{ type: 'object', @@ -75,7 +76,17 @@ module.exports = { } context.report({ node: node, - message: 'Empty components are self-closing' + message: 'Empty components are self-closing', + fix: function(fixer) { + // Represents the last character of the JSXOpeningElement, the '>' character + var openingElementEnding = node.end - 1; + // Represents the last character of the JSXClosingElement, the '>' character + var closingElementEnding = node.parent.closingElement.end; + + // Replace />.*<\/.*>/ with '/>' + var range = [openingElementEnding, closingElementEnding]; + return fixer.replaceTextRange(range, ' />'); + } }); } }; diff --git a/tests/lib/rules/self-closing-comp.js b/tests/lib/rules/self-closing-comp.js index d1c00e07e7..5cb9202e58 100644 --- a/tests/lib/rules/self-closing-comp.js +++ b/tests/lib/rules/self-closing-comp.js @@ -107,12 +107,14 @@ ruleTester.run('self-closing-comp', rule, { invalid: [ { code: 'var contentContainer =
;', + output: 'var contentContainer =
;', parserOptions: parserOptions, errors: [{ message: 'Empty components are self-closing' }] }, { code: 'var contentContainer =
;', + output: 'var contentContainer =
;', options: [], parserOptions: parserOptions, errors: [{ @@ -120,18 +122,21 @@ ruleTester.run('self-closing-comp', rule, { }] }, { code: 'var HelloJohn = ;', + output: 'var HelloJohn = ;', parserOptions: parserOptions, errors: [{ message: 'Empty components are self-closing' }] }, { code: 'var HelloJohn = \n;', + output: 'var HelloJohn = ;', parserOptions: parserOptions, errors: [{ message: 'Empty components are self-closing' }] }, { code: 'var HelloJohn = ;', + output: 'var HelloJohn = ;', parserOptions: parserOptions, errors: [{ message: 'Empty components are self-closing' @@ -139,6 +144,7 @@ ruleTester.run('self-closing-comp', rule, { }, { code: 'var HelloJohn = ;', + output: 'var HelloJohn = ;', options: [], parserOptions: parserOptions, errors: [{ @@ -146,6 +152,7 @@ ruleTester.run('self-closing-comp', rule, { }] }, { code: 'var HelloJohn = \n;', + output: 'var HelloJohn = ;', options: [], parserOptions: parserOptions, errors: [{ @@ -153,6 +160,7 @@ ruleTester.run('self-closing-comp', rule, { }] }, { code: 'var HelloJohn = ;', + output: 'var HelloJohn = ;', options: [], parserOptions: parserOptions, errors: [{ @@ -160,6 +168,7 @@ ruleTester.run('self-closing-comp', rule, { }] }, { code: 'var contentContainer =
;', + output: 'var contentContainer =
;', options: [{html: true}], parserOptions: parserOptions, errors: [{ @@ -167,6 +176,7 @@ ruleTester.run('self-closing-comp', rule, { }] }, { code: 'var contentContainer =
\n
;', + output: 'var contentContainer =
;', options: [{html: true}], parserOptions: parserOptions, errors: [{ @@ -174,6 +184,7 @@ ruleTester.run('self-closing-comp', rule, { }] }, { code: 'var contentContainer =
;', + output: 'var contentContainer =
;', options: [{html: true}], parserOptions: parserOptions, errors: [{