Merge pull request #4398 from SaschaNaz/formatTsxAttr
Fixing JSX/TSX closing tag/attribute/expression formatting
This commit is contained in:
commit
99b771c016
3 changed files with 53 additions and 4 deletions
|
@ -360,7 +360,9 @@ namespace ts.formatting {
|
||||||
range: TextRange,
|
range: TextRange,
|
||||||
inheritedIndentation: number): number {
|
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) {
|
if (inheritedIndentation !== Constants.Unknown) {
|
||||||
return inheritedIndentation;
|
return inheritedIndentation;
|
||||||
}
|
}
|
||||||
|
|
|
@ -450,8 +450,9 @@ namespace ts.formatting {
|
||||||
case SyntaxKind.ConditionalExpression:
|
case SyntaxKind.ConditionalExpression:
|
||||||
case SyntaxKind.ArrayBindingPattern:
|
case SyntaxKind.ArrayBindingPattern:
|
||||||
case SyntaxKind.ObjectBindingPattern:
|
case SyntaxKind.ObjectBindingPattern:
|
||||||
case SyntaxKind.JsxElement:
|
case SyntaxKind.JsxOpeningElement:
|
||||||
case SyntaxKind.JsxSelfClosingElement:
|
case SyntaxKind.JsxSelfClosingElement:
|
||||||
|
case SyntaxKind.JsxExpression:
|
||||||
case SyntaxKind.MethodSignature:
|
case SyntaxKind.MethodSignature:
|
||||||
case SyntaxKind.CallSignature:
|
case SyntaxKind.CallSignature:
|
||||||
case SyntaxKind.ConstructSignature:
|
case SyntaxKind.ConstructSignature:
|
||||||
|
@ -467,6 +468,7 @@ namespace ts.formatting {
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* @internal */
|
||||||
export function nodeWillIndentChild(parent: TextRangeWithKind, child: TextRangeWithKind, indentByDefault: boolean) {
|
export function nodeWillIndentChild(parent: TextRangeWithKind, child: TextRangeWithKind, indentByDefault: boolean) {
|
||||||
let childKind = child ? child.kind : SyntaxKind.Unknown;
|
let childKind = child ? child.kind : SyntaxKind.Unknown;
|
||||||
switch (parent.kind) {
|
switch (parent.kind) {
|
||||||
|
@ -484,6 +486,8 @@ namespace ts.formatting {
|
||||||
case SyntaxKind.GetAccessor:
|
case SyntaxKind.GetAccessor:
|
||||||
case SyntaxKind.SetAccessor:
|
case SyntaxKind.SetAccessor:
|
||||||
return childKind !== SyntaxKind.Block;
|
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
|
// No explicit rule for given nodes so the result will follow the default value argument
|
||||||
return indentByDefault;
|
return indentByDefault;
|
||||||
|
|
|
@ -9,7 +9,7 @@
|
||||||
//// </div>
|
//// </div>
|
||||||
//// )
|
//// )
|
||||||
////}
|
////}
|
||||||
////
|
////
|
||||||
////function foo1() {
|
////function foo1() {
|
||||||
//// return (
|
//// return (
|
||||||
//// <div className="commentBox" data-id="test">
|
//// <div className="commentBox" data-id="test">
|
||||||
|
@ -45,8 +45,26 @@
|
||||||
//// class3= {/*5*/
|
//// class3= {/*5*/
|
||||||
//// }/>/*6*/
|
//// }/>/*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();
|
format.document();
|
||||||
goTo.marker("autoformat");
|
goTo.marker("autoformat");
|
||||||
|
@ -83,3 +101,28 @@ goTo.marker("5");
|
||||||
verify.currentLineContentIs(' class3= {');
|
verify.currentLineContentIs(' class3= {');
|
||||||
goTo.marker("6");
|
goTo.marker("6");
|
||||||
verify.currentLineContentIs(' }/>');
|
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>");
|
Loading…
Reference in a new issue