Merge pull request #830 from eelyafi/jsx_indent_fixer

[semver-minor] partial jsx-indent rule autofixer

Author: ljharb

docs/rules/jsx-indent.md

@@ -2,6 +2,9 @@
 
 This option validates a specific indentation style for JSX.
 
+**Fixable:** This rule is automatically fixable using the `--fix` flag on the command line. 
+Fixer will fix whitespace and tabs indentation. It won't replace tabs with whitespaces and vice-versa.
+
 ## Rule Details
 
 This rule is aimed to enforce consistent indentation style. The default style is `4 spaces`.

lib/rules/jsx-indent.js

@@ -39,7 +39,9 @@ module.exports = {
       category: 'Stylistic Issues',
       recommended: false
     },
-
+    // fixer will fix whitespace and tabs indentation.
+    // It won't replace tabs with whitespaces and vice-versa.
+    fixable: 'whitespace',
     schema: [{
       oneOf: [{
         enum: ['tab']
@@ -69,6 +71,30 @@ module.exports = {
       }
     }
 
+    var indentChar = indentType === 'space' ? ' ' : '\t';
+
+    /**
+     * Responsible for fixing the indentation issue fix
+     * @param {ASTNode} node Node violating the indent rule
+     * @param {Number} needed Expected indentation character count
+     * @param {Number} gotten Indentation character count in the actual node/code
+     * @returns {Function} function to be executed by the fixer
+     * @private
+     */
+    function getFixerFunction(node, needed, gotten) {
+      if (needed > gotten) {
+        var spaces = indentChar.repeat(needed - gotten);
+
+        return function(fixer) {
+          return fixer.insertTextBeforeRange([node.range[0], node.range[0]], spaces);
+        };
+      }
+
+      return function(fixer) {
+        return fixer.removeRange([node.range[0] - (gotten - needed), node.range[0]]);
+      };
+    }
+
     /**
      * Reports a given indent violation and properly pluralizes the message
      * @param {ASTNode} node Node violating the indent rule
@@ -89,13 +115,15 @@ module.exports = {
           node: node,
           loc: loc,
           message: MESSAGE,
-          data: msgContext
+          data: msgContext,
+          fix: getFixerFunction(node, needed, gotten)
         });
       } else {
         context.report({
           node: node,
           message: MESSAGE,
-          data: msgContext
+          data: msgContext,
+          fix: getFixerFunction(node, needed, gotten)
         });
       }
     }

tests/lib/rules/jsx-indent.js

@@ -107,6 +107,11 @@ ruleTester.run('jsx-indent', rule, {
       '  <Foo />',
       '</App>'
     ].join('\n'),
+    output: [
+      '<App>',
+      '    <Foo />',
+      '</App>'
+    ].join('\n'),
     parserOptions: parserOptions,
     errors: [{message: 'Expected indentation of 4 space characters but found 2.'}]
   }, {
@@ -115,6 +120,11 @@ ruleTester.run('jsx-indent', rule, {
       '    <Foo />',
       '</App>'
     ].join('\n'),
+    output: [
+      '<App>',
+      '  <Foo />',
+      '</App>'
+    ].join('\n'),
     options: [2],
     parserOptions: parserOptions,
     errors: [{message: 'Expected indentation of 2 space characters but found 4.'}]
@@ -135,6 +145,13 @@ ruleTester.run('jsx-indent', rule, {
       '         </App>;',
       '}'
     ].join('\n'),
+    output: [
+      'function App() {',
+      '  return <App>',
+      '    <Foo />',
+      '  </App>;',
+      '}'
+    ].join('\n'),
     options: [2],
     parserOptions: parserOptions,
     errors: [{message: 'Expected indentation of 2 space characters but found 9.'}]
@@ -146,6 +163,13 @@ ruleTester.run('jsx-indent', rule, {
       '    </App>);',
       '}'
     ].join('\n'),
+    output: [
+      'function App() {',
+      '  return (<App>',
+      '    <Foo />',
+      '  </App>);',
+      '}'
+    ].join('\n'),
     options: [2],
     parserOptions: parserOptions,
     errors: [{message: 'Expected indentation of 2 space characters but found 4.'}]
@@ -212,6 +236,57 @@ ruleTester.run('jsx-indent', rule, {
     errors: [
       {message: 'Expected indentation of 3 tab characters but found 2.'}
     ]
-  }]
+  }, {
+    code: [
+      '<App>\n',
+      '<Foo />\n',
+      '</App>'
+    ].join('\n'),
+    output: [
+      '<App>\n',
+      '\t<Foo />\n',
+      '</App>'
+    ].join('\n'),
+    parserOptions: parserOptions,
+    options: ['tab'],
+    errors: [
+      {message: 'Expected indentation of 1 tab character but found 0.'}
+    ]
+  }
+  // Tests for future work. See the comment on line 42-43 in the rule near to fixable: 'whitespace' meta property,
+  // Right now fixer function doesn't support replacing tabs with whitespaces and vice-versa.
+  /* , {
+    code: [
+      '<App>\n',
+      ' <Foo />\n',
+      '</App>'
+    ].join('\n'),
+    output: [
+      '<App>\n',
+      '\t<Foo />\n',
+      '</App>'
+    ].join('\n'),
+    parserOptions: parserOptions,
+    options: ['tab'],
+    errors: [
+      {message: 'Expected indentation of 1 tab character but found 0.'}
+    ]
+  }, {
+    code: [
+      '<App>\n',
+      '\t<Foo />\n',
+      '</App>'
+    ].join('\n'),
+    output: [
+      '<App>\n',
+      '  <Foo />\n',
+      '</App>'
+    ].join('\n'),
+    parserOptions: parserOptions,
+    options: [2],
+    errors: [
+      {message: 'Expected indentation of 2 space characters but found 0.'}
+    ]
+  }*/]
 });