dprint-plugin-typescript icon indicating copy to clipboard operation
dprint-plugin-typescript copied to clipboard

`jsxExpressionContainer` newline formatting is not configurable

Open jonathanj opened this issue 2 years ago • 1 comments

For JSX input that has multiline expressions:

function MyComponent() {
  return (
    <div>
      {
        someCondition
          ? <Alpha />
          : <Bravo />
      }
      <div>
        {
          someFunction(
            some,
            arguments)
        }
      </div>
    </div>
  );
}

The formatted output always seems to collapse the newlines for the braces, and in the case of function calls will bind the closing parenthesis with the closing brace:

function MyComponent() {
  return (
    <div>
      {someCondition
        ? <Alpha />
        : <Bravo />}
      <div>
        {someFunction(
          some,
          arguments
        )}
      </div>
    </div>
  );
}

I couldn't seem to find an option that would control either of these aspects. I tried a couple options that were not specifically about JSX expressions—staticBlock.bracePosition and method.bracePosition—without any luck. Ideally there would be a way to specifically configure the formatting of JSX expressions that happen to be multiline (or need to become multiline).

I did go through the documentation several times, apologies if I missed something obvious.

Configuration used in the playground:
{
  "lineWidth": 100,
  "indentWidth": 2,
  "useTabs": false,
  "semiColons": "prefer",
  "quoteStyle": "preferSingle",
  "quoteProps": "preserve",
  "newLineKind": "lf",
  "useBraces": "whenNotSingleLine",
  "bracePosition": "sameLine",
  "singleBodyPosition": "maintain",
  "nextControlFlowPosition": "sameLine",
  "trailingCommas": "onlyMultiLine",
  "arguments.trailingCommas": "never",
  "operatorPosition": "sameLine",
  "conditionalExpression.operatorPosition": "nextLine",
  "preferHanging": false,
  "preferSingleLine": false,
  "arrowFunction.useParentheses": "preferNone",
  "binaryExpression.linePerExpression": false,
  "jsx.quoteStyle": "preferSingle",
  "jsx.multiLineParens": "prefer",
  "memberExpression.linePerExpression": false,
  "typeLiteral.separatorKind": "semiColon",
  "enumDeclaration.memberSpacing": "maintain",
  "spaceAround": false,
  "spaceSurroundingProperties": false,
  "binaryExpression.spaceSurroundingBitwiseAndArithmeticOperator": true,
  "commentLine.forceSpaceAfterSlashes": true,
  "constructor.spaceBeforeParentheses": false,
  "constructorType.spaceAfterNewKeyword": false,
  "constructSignature.spaceAfterNewKeyword": false,
  "doWhileStatement.spaceAfterWhileKeyword": true,
  "exportDeclaration.spaceSurroundingNamedExports": true,
  "forInStatement.spaceAfterForKeyword": true,
  "forOfStatement.spaceAfterForKeyword": true,
  "forStatement.spaceAfterForKeyword": true,
  "forStatement.spaceAfterSemiColons": true,
  "functionDeclaration.spaceBeforeParentheses": false,
  "functionExpression.spaceBeforeParentheses": false,
  "functionExpression.spaceAfterFunctionKeyword": false,
  "getAccessor.spaceBeforeParentheses": false,
  "ifStatement.spaceAfterIfKeyword": true,
  "importDeclaration.spaceSurroundingNamedImports": false,
  "jsxElement.spaceBeforeSelfClosingTagSlash": true,
  "jsxExpressionContainer.spaceSurroundingExpression": false,
  "method.spaceBeforeParentheses": false,
  "setAccessor.spaceBeforeParentheses": false,
  "taggedTemplate.spaceBeforeLiteral": true,
  "typeAnnotation.spaceBeforeColon": false,
  "typeAssertion.spaceBeforeExpression": true,
  "whileStatement.spaceAfterWhileKeyword": true,
  "ignoreNodeCommentText": "dprint-ignore",
  "ignoreFileCommentText": "dprint-ignore-file"
}

jonathanj avatar May 04 '22 19:05 jonathanj

Do you know if this is configurable now? Might have to switch back to eslint if no...

nnmrts avatar Feb 17 '24 16:02 nnmrts