Wrong component formatting in .tsx file

[namrastanov]

Prettier - Code formatter 3.20.0

Sometimes it gives me the result as in "Actual result". But after ctral+a + ctrxl+x + ctrl+v it works as "Expected result".

Actual result

export default class MyComponent extends React.Component<
                 MyLongTypeNameProps,
                 MyLongTypeNameState
               > {
                 myProperty1: React.RefObject<HTMLSelectElement>;
                 myProperty2: React.RefObject<HTMLSelectElement>;
                 ...

Expected result

export default class MyComponent extends React.Component<
  MyLongTypeNameProps,
  MyLongTypeNameState
> {
  myProperty1: React.RefObject<HTMLSelectElement>;
  myProperty2: React.RefObject<HTMLSelectElement>;
    ....

Additional information

(http://prntscr.com/qvks05)

VS Code Version: 1.41.0

Prettier Extension Version: 3.20.0

OS and version: Windows 10

Prettier Log Output

["INFO" - 4:14:09 PM] File Info:
{
  "ignored": false,
  "inferredParser": "typescript"
}
["INFO" - 4:14:09 PM] No local configuration (i.e. .prettierrc or .editorconfig) detected, falling back to VS Code configuration
["INFO" - 4:14:09 PM] Prettier Options:
{
  "arrowParens": "avoid",
  "bracketSpacing": true,
  "endOfLine": "auto",
  "htmlWhitespaceSensitivity": "css",
  "insertPragma": false,
  "jsxBracketSameLine": false,
  "jsxSingleQuote": false,
  "printWidth": 80,
  "proseWrap": "preserve",
  "quoteProps": "as-needed",
  "requirePragma": false,
  "semi": true,
  "singleQuote": false,
  "tabWidth": 2,
  "trailingComma": "none",
  "useTabs": false,
  "vueIndentScriptAndStyle": false,
  "filepath": "...",
  "parser": "typescript",
  "rangeEnd": 827,
  "rangeStart": 764
}
["INFO" - 4:14:09 PM] Formatting completed in 227.7758ms.

[ntotten]

I am not able to reproduce this issue. Please provide a sample project or detailed steps to reproduce.

[namrastanov]

@ntotten
Try, please, put this text in .ts file. Then ctrl+x line number 8 (with second parameter) and then ctrl+v it again.

interface TypeWithVeryLongLongLongName {
  one: string;
  two: string;
}

export default function MyFunctionNameWithLongText(
  first: TypeWithVeryLongLongLongName,
  second: TypeWithVeryLongLongLongName
) {
  let test = "";
}

Make sure that you switched on formatting on Paste.

[ntotten]

Ah, okay. Yeah, this is an issue with the prettier range formatter, not the extension. See prettier/prettier#7148 and prettier/prettier#4926

[github-actions]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.