Merge pull request #4398 from SaschaNaz/formatTsxAttr

Fixing JSX/TSX closing tag/attribute/expression formatting

Author: DanielRosenwasser

src/services/formatting/formatting.ts

@@ -360,7 +360,9 @@ namespace ts.formatting {
             range: TextRange,
             inheritedIndentation: number): number {
 
-            if (rangeOverlapsWithStartEnd(range, startPos, endPos)) {
+            if (rangeOverlapsWithStartEnd(range, startPos, endPos) ||
+                rangeContainsStartEnd(range, startPos, endPos) /* Not to miss zero-range nodes e.g. JsxText */) {
+                
                 if (inheritedIndentation !== Constants.Unknown) {
                     return inheritedIndentation;
                 }

src/services/formatting/smartIndenter.ts

@@ -450,8 +450,9 @@ namespace ts.formatting {
                 case SyntaxKind.ConditionalExpression:
                 case SyntaxKind.ArrayBindingPattern:
                 case SyntaxKind.ObjectBindingPattern:
-                case SyntaxKind.JsxElement:
+                case SyntaxKind.JsxOpeningElement:
                 case SyntaxKind.JsxSelfClosingElement:
+                case SyntaxKind.JsxExpression:
                 case SyntaxKind.MethodSignature:
                 case SyntaxKind.CallSignature:
                 case SyntaxKind.ConstructSignature:
@@ -467,6 +468,7 @@ namespace ts.formatting {
             return false;
         }
 
+        /* @internal */
         export function nodeWillIndentChild(parent: TextRangeWithKind, child: TextRangeWithKind, indentByDefault: boolean) {
             let childKind = child ? child.kind : SyntaxKind.Unknown;
             switch (parent.kind) {
@@ -484,6 +486,8 @@ namespace ts.formatting {
                 case SyntaxKind.GetAccessor:
                 case SyntaxKind.SetAccessor:
                     return childKind !== SyntaxKind.Block;
+                case SyntaxKind.JsxElement:
+                    return childKind !== SyntaxKind.JsxClosingElement;
             }
             // No explicit rule for given nodes so the result will follow the default value argument
             return indentByDefault;

tests/cases/fourslash/formattingJsxElements.ts

@@ -9,7 +9,7 @@
 ////        </div>
 ////    )
 ////}
-////
+////
 ////function foo1() {
 ////    return (
 ////        <div className="commentBox" data-id="test">
@@ -45,8 +45,26 @@
 ////            class3= {/*5*/
 ////            }/>/*6*/
 ////    )
+////}
+////
+////(function () {
+////    return <div
+////className=""/*attrAutoformat*/
+/////*attrIndent*/
+////id={
+////"abc" + "cde"/*expressionAutoformat*/
+/////*expressionIndent*/
 ////}
-
+////        >/*danglingBracketAutoformat*/
+////        </div>/*closingTagAutoformat*/
+////})
+////
+////let h5 = <h5>
+////<span>/*childJsxElementAutoformat*/
+/////*childJsxElementIndent*/
+////<span></span>/*grandchildJsxElementAutoformat*/
+////</span>/*containedClosingTagAutoformat*/
+////</h5>
 
 format.document();
 goTo.marker("autoformat");
@@ -83,3 +101,28 @@ goTo.marker("5");
 verify.currentLineContentIs('            class3= {');
 goTo.marker("6");
 verify.currentLineContentIs('            }/>');
+
+
+goTo.marker("attrAutoformat");
+verify.currentLineContentIs('        className=""');
+goTo.marker("attrIndent");
+verify.indentationIs(8);
+goTo.marker("expressionAutoformat");
+verify.currentLineContentIs('            "abc" + "cde"');
+goTo.marker("expressionIndent");
+verify.indentationIs(12);
+
+goTo.marker("danglingBracketAutoformat")
+// TODO: verify.currentLineContentIs("    >");
+verify.currentLineContentIs("        >");
+goTo.marker("closingTagAutoformat");
+verify.currentLineContentIs("    </div>");
+
+goTo.marker("childJsxElementAutoformat");
+verify.currentLineContentIs("    <span>");
+goTo.marker("childJsxElementIndent");
+verify.indentationIs(8);
+goTo.marker("grandchildJsxElementAutoformat");
+verify.currentLineContentIs("        <span></span>");
+goTo.marker("containedClosingTagAutoformat");
+verify.currentLineContentIs("    </span>");