Support aligned indent for JSX props

This is the default style used by the JetBrains IDEs.
closes jsx-eslint#398

Author: ThiefMaster

lib/rules/jsx-indent-props.js

@@ -47,7 +47,7 @@ module.exports = {
 
     schema: [{
       oneOf: [{
-        enum: ['tab']
+        enum: ['tab', 'aligned']
       }, {
         type: 'integer'
       }]
@@ -64,7 +64,10 @@ module.exports = {
     const sourceCode = context.getSourceCode();
 
     if (context.options.length) {
-      if (context.options[0] === 'tab') {
+      if (context.options[0] === 'aligned') {
+        indentSize = 'aligned';
+        indentType = 'space';
+      } else if (context.options[0] === 'tab') {
         indentSize = 1;
         indentType = 'tab';
       } else if (typeof context.options[0] === 'number') {
@@ -160,8 +163,33 @@ module.exports = {
 
     return {
       JSXOpeningElement: function(node) {
-        const elementIndent = getNodeIndent(node);
-        checkNodesIndent(node.attributes, elementIndent + indentSize);
+        if (!node.attributes.length) {
+          return;
+        }
+        let propIndent;
+        if (indentSize === 'aligned') {
+          const firstPropNode = node.attributes[0];
+          // '<' and any space following it
+          const beforeNameLength = node.name.range[0] - node.range[0];
+          // the name itself
+          const nameLength = node.name.range[1] - node.name.range[0];
+          // any space between the name and the first attribute
+          const afterNameLength = Math.max(1, firstPropNode.loc.start.column - node.name.loc.end.column);
+          if (afterNameLength !== 1) {
+            // this is not easily fixable, so we just report another error for it.
+            // it should be unlikely enough to be triggered anyway
+            context.report({
+              node: node,
+              message: 'Found too much whitespace between tag name and first attribute.'
+            });
+          }
+          // use the indentation of the element relative to the beginning of the line
+          propIndent = node.loc.start.column + beforeNameLength + nameLength + afterNameLength;
+        } else {
+          const elementIndent = getNodeIndent(node);
+          propIndent = elementIndent + indentSize;
+        }
+        checkNodesIndent(node.attributes, propIndent);
       }
     };
   }

tests/lib/rules/jsx-indent-props.js

@@ -59,6 +59,51 @@ ruleTester.run('jsx-indent-props', rule, {
       '/>'
     ].join('\n'),
     options: ['tab']
+  }, {
+    code: [
+      '<App/>'
+    ].join('\n'),
+    options: ['aligned']
+  }, {
+    code: [
+      '<App aaa',
+      '     b',
+      '     cc',
+      '/>'
+    ].join('\n'),
+    options: ['aligned']
+  }, {
+    code: [
+      'const test = <App aaa',
+      '                  b',
+      '                  cc',
+      '             />'
+    ].join('\n'),
+    options: ['aligned']
+  }, {
+    code: [
+      '<App aaa',
+      '     b',
+      '>',
+      '    <Child c',
+      '           d/>',
+      '</App>'
+    ].join('\n'),
+    options: ['aligned']
+  }, {
+    code: [
+      '<Fragment>',
+      '  <App aaa',
+      '       b',
+      '       cc',
+      '  />',
+      '  <OtherApp a',
+      '            bbb',
+      '            c',
+      '  />',
+      '</Fragment>'
+    ].join('\n'),
+    options: ['aligned']
   }],
 
   invalid: [{
@@ -112,5 +157,70 @@ ruleTester.run('jsx-indent-props', rule, {
     ].join('\n'),
     options: ['tab'],
     errors: [{message: 'Expected indentation of 1 tab character but found 3.'}]
+  }, {
+    code: [
+      '<App a',
+      '  b',
+      '/>'
+    ].join('\n'),
+    output: [
+      '<App a',
+      '     b',
+      '/>'
+    ].join('\n'),
+    options: ['aligned'],
+    errors: [{message: 'Expected indentation of 5 space characters but found 2.'}]
+  }, {
+    code: [
+      '<App  a',
+      '   b',
+      '/>'
+    ].join('\n'),
+    output: [
+      '<App  a',
+      '      b',
+      '/>'
+    ].join('\n'),
+    options: ['aligned'],
+    errors: [
+      {message: 'Found too much whitespace between tag name and first attribute.'},
+      {message: 'Expected indentation of 6 space characters but found 3.'}
+    ]
+  }, {
+    code: [
+      '<App',
+      '      a',
+      '   b',
+      '/>'
+    ].join('\n'),
+    output: [
+      '<App',
+      '      a',
+      '      b',
+      '/>'
+    ].join('\n'),
+    options: ['aligned'],
+    errors: [
+      {message: 'Found too much whitespace between tag name and first attribute.'},
+      {message: 'Expected indentation of 6 space characters but found 3.'}
+    ]
+  }, {
+    code: [
+      '<App',
+      '  a',
+      '  b',
+      '/>'
+    ].join('\n'),
+    output: [
+      '<App',
+      '     a',
+      '     b',
+      '/>'
+    ].join('\n'),
+    options: ['aligned'],
+    errors: [
+      {message: 'Expected indentation of 5 space characters but found 2.'},
+      {message: 'Expected indentation of 5 space characters but found 2.'}
+    ]
   }]
 });