Wrong TSX ternary markup block formatting in VSCode

Question

I like 'format on save' VSCode feature very much. But now I'm experiencing annoying wrong formatting of tsx files in VS Code (1.49.2).

Here is an example. Here two lines have extra indents ('single' block)

import React from 'react';

const TestComponent = (props: { isList: boolean }) => {
  return (
    <div>
      {props.isList ? (
        <div>liiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiist</div>
      ) : (
          <div>siiiiiiiiiiiiiiiiiiiiiiiingle</div>
        )}
    </div>
  );
};

export default TestComponent;

the same code in jsx file is formatted correctly

import React from 'react';

const TestComponent = props => {
  return (
    <div>
      {props.isList ? (
        <div>liiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiist</div>
      ) : (
        <div>siiiiiiiiiiiiiiiiiiiiiiiingle</div>
      )}
    </div>
  );
};

export default TestComponent;

I tried to switch default vscode formatter to eslint, null, prettier (user/workspace) - no difference. When I run prettier --write src/components/TestComponent.tsx the tsx file is formatted correctly. I also checked typescript-specific formatting settings in VS Code, but couldn't find anything related. For the test I've removed .eslint.js config file and my project doesn't have .prettierrc config.

Answer 1

I fixed this problem by going to my user settings and deleting

    "[javascript]": {
        "editor.defaultFormatter": "vscode.typescript-language-features"
    },

and configuring prettier to be the default formatter

Answer 2

it was wrong formatter specified in $HOME/.config/Code/User/settings.json (on Linux), something like

"[typescriptreact]": {
  "editor.defaultFormatter": "vscode.typescript-language-features"
}

it should be either set to esbenp.prettier-vscode or removed in order to use the default one