diff --git a/src/services/formatting/formatting.ts b/src/services/formatting/formatting.ts index 55adb7b723..4e48a4bf4f 100644 --- a/src/services/formatting/formatting.ts +++ b/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; } diff --git a/src/services/formatting/smartIndenter.ts b/src/services/formatting/smartIndenter.ts index 067118fd7a..8e0fef884e 100644 --- a/src/services/formatting/smartIndenter.ts +++ b/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; diff --git a/tests/cases/fourslash/formattingJsxElements.ts b/tests/cases/fourslash/formattingJsxElements.ts index fd4ccc504a..fbe4bb5d29 100644 --- a/tests/cases/fourslash/formattingJsxElements.ts +++ b/tests/cases/fourslash/formattingJsxElements.ts @@ -9,7 +9,7 @@ //// //// ) ////} -//// +//// ////function foo1() { //// return ( ////
@@ -45,8 +45,26 @@ //// class3= {/*5*/ //// }/>/*6*/ //// ) +////} +//// +////(function () { +//// return
/*danglingBracketAutoformat*/ +////
/*closingTagAutoformat*/ +////}) +//// +////let h5 =
+/////*childJsxElementAutoformat*/ +/////*childJsxElementIndent*/ +/////*grandchildJsxElementAutoformat*/ +/////*containedClosingTagAutoformat*/ +////
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("
"); + +goTo.marker("childJsxElementAutoformat"); +verify.currentLineContentIs(" "); +goTo.marker("childJsxElementIndent"); +verify.indentationIs(8); +goTo.marker("grandchildJsxElementAutoformat"); +verify.currentLineContentIs(" "); +goTo.marker("containedClosingTagAutoformat"); +verify.currentLineContentIs(" "); \ No newline at end of file