maxmustermann/TypeScript
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Merge pull request #4398 from SaschaNaz/formatTsxAttr

Browse source 
Fixing JSX/TSX closing tag/attribute/expression formatting
This commit is contained in:
Daniel Rosenwasser 2015-12-30 01:25:21 -05:00
parent 72bb1d3dec 9e3ee5d716
commit 99b771c016
3 changed files with 53 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/services/formatting/formatting.ts
View file

@ -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;
}

6
src/services/formatting/smartIndenter.ts
View file

@ -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;

47
tests/cases/fourslash/formattingJsxElements.ts
View file

@ -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>");