From d89bc05c4f7be6e4e07eeb99aa67020cafb87fe8 Mon Sep 17 00:00:00 2001
From: Peter L <Krirken@gmail.com>
Date: Sat, 20 Aug 2016 13:40:18 -0400
Subject: [PATCH] Add auto fix for self-closing-comp

---
 README.md                              |  2 +-
 docs/rules/jsx-space-before-closing.md |  2 ++
 docs/rules/self-closing-comp.md        |  2 ++
 lib/rules/self-closing-comp.js         | 13 ++++++++++++-
 tests/lib/rules/self-closing-comp.js   | 11 +++++++++++
 5 files changed, 28 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 084624549a..3a9cdf9e6b 100644
--- 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
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 = <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: [{
@@ -120,18 +122,21 @@ ruleTester.run('self-closing-comp', rule, {
       }]
     }, {
       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'
@@ -139,6 +144,7 @@ ruleTester.run('self-closing-comp', rule, {
     },
     {
       code: 'var HelloJohn = <Hello name="John"></Hello>;',
+      output: 'var HelloJohn = <Hello name="John" />;',
       options: [],
       parserOptions: parserOptions,
       errors: [{
@@ -146,6 +152,7 @@ ruleTester.run('self-closing-comp', rule, {
       }]
     }, {
       code: 'var HelloJohn = <Hello name="John">\n</Hello>;',
+      output: 'var HelloJohn = <Hello name="John" />;',
       options: [],
       parserOptions: parserOptions,
       errors: [{
@@ -153,6 +160,7 @@ ruleTester.run('self-closing-comp', rule, {
       }]
     }, {
       code: 'var HelloJohn = <Hello name="John"> </Hello>;',
+      output: 'var HelloJohn = <Hello name="John" />;',
       options: [],
       parserOptions: parserOptions,
       errors: [{
@@ -160,6 +168,7 @@ ruleTester.run('self-closing-comp', rule, {
       }]
     }, {
       code: 'var contentContainer = <div className="content"></div>;',
+      output: 'var contentContainer = <div className="content" />;',
       options: [{html: true}],
       parserOptions: parserOptions,
       errors: [{
@@ -167,6 +176,7 @@ ruleTester.run('self-closing-comp', rule, {
       }]
     }, {
       code: 'var contentContainer = <div className="content">\n</div>;',
+      output: 'var contentContainer = <div className="content" />;',
       options: [{html: true}],
       parserOptions: parserOptions,
       errors: [{
@@ -174,6 +184,7 @@ ruleTester.run('self-closing-comp', rule, {
       }]
     }, {
       code: 'var contentContainer = <div className="content"> </div>;',
+      output: 'var contentContainer = <div className="content" />;',
       options: [{html: true}],
       parserOptions: parserOptions,
       errors: [{