Handle JSX attribute indentation in jsx-indent

jsx-eslint · Dec 13, 2018 · f302f05 · f302f05
1 parent 8ef86c5
commit f302f05
Show file tree

Hide file tree

Showing 3 changed files with 85 additions and 3 deletions.
diff --git a/lib/rules/jsx-indent.js b/lib/rules/jsx-indent.js
@@ -242,11 +242,23 @@ module.exports = {
       checkNodesIndent(node, peerElementIndent);
     }
 
+    function handleAttribute(node) {
+      if (node.value.type !== 'JSXExpressionContainer') {
+        return;
+      }
+      const nameIndent = getNodeIndent(node.name);
+      const lastToken = sourceCode.getLastToken(node.value);
+      const firstInLine = astUtil.getFirstNodeInLine(context, lastToken);
+      const indent = node.name.loc.start.line === firstInLine.loc.start.line ? 0 : nameIndent;
+      checkNodesIndent(firstInLine, indent);
+    }
+
     return {
       JSXOpeningElement: handleOpeningElement,
       JSXOpeningFragment: handleOpeningElement,
       JSXClosingElement: handleClosingElement,
       JSXClosingFragment: handleClosingElement,
+      JSXAttribute: handleAttribute,
       JSXExpressionContainer: function(node) {
         if (!node.parent) {
           return;

diff --git a/lib/util/ast.js b/lib/util/ast.js
@@ -68,13 +68,14 @@ function getComponentProperties(node) {
   }
 }
 
+
 /**
- * Checks if the node is the first in its line, excluding whitespace.
+ * Gets the first node in a line from the initial node, excluding whitespace.
  * @param {Object} context The node to check
  * @param {ASTNode} node The node to check
- * @return {Boolean} true if it's the first node in its line
+ * @return {ASTNode} the first node in the line
  */
-function isNodeFirstInLine(context, node) {
+function getFirstNodeInLine(context, node) {
   const sourceCode = context.getSourceCode();
   let token = node;
   let lines;
@@ -87,7 +88,17 @@ function isNodeFirstInLine(context, node) {
     token.type === 'JSXText' &&
         /^\s*$/.test(lines[lines.length - 1])
   );
+  return token;
+}
 
+/**
+ * Checks if the node is the first in its line, excluding whitespace.
+ * @param {Object} context The node to check
+ * @param {ASTNode} node The node to check
+ * @return {Boolean} true if it's the first node in its line
+ */
+function isNodeFirstInLine(context, node) {
+  const token = getFirstNodeInLine(context, node);
   const startLine = node.loc.start.line;
   const endLine = token ? token.loc.end.line : -1;
   return startLine !== endLine;
@@ -131,6 +142,7 @@ function isClass(node) {
 
 module.exports = {
   findReturnStatement: findReturnStatement,
+  getFirstNodeInLine: getFirstNodeInLine,
   getPropertyName: getPropertyName,
   getPropertyNameNode: getPropertyNameNode,
   getComponentProperties: getComponentProperties,

diff --git a/tests/lib/rules/jsx-indent.js b/tests/lib/rules/jsx-indent.js
@@ -1478,5 +1478,63 @@ ruleTester.run('jsx-indent', rule, {
     errors: [
       {message: 'Expected indentation of 4 space characters but found 2.'}
     ]
+  }, {
+    code: `
+    const Component = () => (
+      <View
+        ListFooterComponent={(
+          <View
+            rowSpan={3}
+            placeholder="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do"
+          />
+    )}
+      />
+    );
+    `,
+    output: `
+    const Component = () => (
+      <View
+        ListFooterComponent={(
+          <View
+            rowSpan={3}
+            placeholder="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do"
+          />
+        )}
+      />
+    );
+    `,
+    options: [2],
+    errors: [
+      {message: 'Expected indentation of 8 space characters but found 4.'}
+    ]
+  }, {
+    code: `
+const Component = () => (
+\t<View
+\t\tListFooterComponent={(
+\t\t\t<View
+\t\t\t\trowSpan={3}
+\t\t\t\tplaceholder="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do"
+\t\t\t/>
+)}
+\t/>
+);
+    `,
+    output: `
+const Component = () => (
+\t<View
+\t\tListFooterComponent={(
+\t\t\t<View
+\t\t\t\trowSpan={3}
+\t\t\t\tplaceholder="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do"
+\t\t\t/>
+\t\t)}
+\t/>
+);
+    `,
+    options: ['tab'],
+    errors: [
+      {message: 'Expected indentation of 2 tab characters but found 0.'}
+    ]
   }]
 });