Add auto fixer for jsx-self-close-rule (#189)

README.md

@@ -93,6 +93,7 @@ The built-in configuration preset you get with `"extends": "tslint-react"` is se
    - Off by default
 - `jsx-self-close` (since v0.4.0)
   - Enforces that JSX elements with no children are self-closing.
+  - _Includes automatic code fix_
   ```ts
   // bad
   <div className="foo"></div>

src/rules/jsxSelfCloseRule.ts

@@ -50,7 +50,13 @@ function walk(ctx: Lint.WalkContext<void>): void {
                 && node.children[0].getText() === "";
             const noChildren = node.children.length === 0 || textIsEmpty;
 
-            if (missingOpeningOrClosingTag || noChildren) {
+            if (!missingOpeningOrClosingTag && noChildren) {
+                const openingElementText = node.openingElement.getFullText();
+                const selfClosingNode = openingElementText.slice(0, openingElementText.lastIndexOf(">")) + "/>";
+                const fix = new Lint.Replacement(node.getStart(), node.getWidth(), selfClosingNode);
+
+                ctx.addFailureAtNode(node, Rule.FAILURE_STRING, fix);
+            } else if (noChildren) {
                 ctx.addFailureAtNode(node, Rule.FAILURE_STRING);
             }
         }

test/rules/jsx-self-close/test.lint.fix

@@ -0,0 +1,27 @@
+<div>
+    Contents
+</div>
+
+
+
+<span />
+
+<button />
+
+
+
+<h2 class="colouring" contents="B" />
+
+
+
+<h2 class="html-content" content="<h1></h1>" />
+
+<button onClick="run()" />
+
+<button>
+    <div />
+</button>
+
+
+
+<div />

test/rules/jsx-self-close/test.tsx.lint

@@ -10,6 +10,9 @@
 <h2 class="colouring" contents="B"></h2>
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ [JSX elements with no children must be self-closing]
 
+<h2 class="html-content" content="<h1></h1>"></h2>
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ [JSX elements with no children must be self-closing]
+
 <button onClick="run()" />
 
 <button>