Add auto fix for self-closing-comp

jakubhonisek · Aug 20, 2016 · d89bc05 · d89bc05
1 parent 3a8bf42
commit d89bc05
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 2 deletions.
diff --git a/README.md b/README.md
@@ -102,7 +102,7 @@ Finally, enable all of the rules that you would like to use.  Use [our preset](#
 * [react/react-in-jsx-scope](docs/rules/react-in-jsx-scope.md): Prevent missing `React` when using JSX
 * [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
@@ -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
@@ -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
@@ -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
@@ -107,73 +107,84 @@ ruleTester.run('self-closing-comp', rule, {
   invalid: [
     {
       code: 'var contentContainer = <div className="content"></div>;',
+      output: 'var contentContainer = <div className="content" />;',
       parserOptions: parserOptions,
       errors: [{
         message: 'Empty components are self-closing'
       }]
     }, {
       code: 'var contentContainer = <div className="content"></div>;',
+      output: 'var contentContainer = <div className="content" />;',
       options: [],
       parserOptions: parserOptions,
       errors: [{
         message: 'Empty components are self-closing'
       }]
     }, {
       code: 'var HelloJohn = <Hello name="John"></Hello>;',
+      output: 'var HelloJohn = <Hello name="John" />;',
       parserOptions: parserOptions,
       errors: [{
         message: 'Empty components are self-closing'
       }]
     }, {
       code: 'var HelloJohn = <Hello name="John">\n</Hello>;',
+      output: 'var HelloJohn = <Hello name="John" />;',
       parserOptions: parserOptions,
       errors: [{
         message: 'Empty components are self-closing'
       }]
     }, {
       code: 'var HelloJohn = <Hello name="John"> </Hello>;',
+      output: 'var HelloJohn = <Hello name="John" />;',
       parserOptions: parserOptions,
       errors: [{
         message: 'Empty components are self-closing'
       }]
     },
     {
       code: 'var HelloJohn = <Hello name="John"></Hello>;',
+      output: 'var HelloJohn = <Hello name="John" />;',
       options: [],
       parserOptions: parserOptions,
       errors: [{
         message: 'Empty components are self-closing'
       }]
     }, {
       code: 'var HelloJohn = <Hello name="John">\n</Hello>;',
+      output: 'var HelloJohn = <Hello name="John" />;',
       options: [],
       parserOptions: parserOptions,
       errors: [{
         message: 'Empty components are self-closing'
       }]
     }, {
       code: 'var HelloJohn = <Hello name="John"> </Hello>;',
+      output: 'var HelloJohn = <Hello name="John" />;',
       options: [],
       parserOptions: parserOptions,
       errors: [{
         message: 'Empty components are self-closing'
       }]
     }, {
       code: 'var contentContainer = <div className="content"></div>;',
+      output: 'var contentContainer = <div className="content" />;',
       options: [{html: true}],
       parserOptions: parserOptions,
       errors: [{
         message: 'Empty components are self-closing'
       }]
     }, {
       code: 'var contentContainer = <div className="content">\n</div>;',
+      output: 'var contentContainer = <div className="content" />;',
       options: [{html: true}],
       parserOptions: parserOptions,
       errors: [{
         message: 'Empty components are self-closing'
       }]
     }, {
       code: 'var contentContainer = <div className="content"> </div>;',
+      output: 'var contentContainer = <div className="content" />;',
       options: [{html: true}],
       parserOptions: parserOptions,
       errors: [{