VSCode中错误的TSX三元标记块格式

问题描述

我非常喜欢“保存时格式化” VSCode功能。但是，现在我在VS Code（1.49.2）中遇到tsx文件的令人讨厌的错误格式。

这里是一个例子。这里两行有额外的缩进（“单个”块）

import React from 'react';

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

export default TestComponent;

jsx文件中的相同代码格式正确

import React from 'react';

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

export default TestComponent;

我尝试将默认的vscode格式化程序切换为eslint，null，prettier（用户/工作区）-没什么区别。当我运行prettier --write src/components/TestComponent.tsx时，tsx文件的格式正确。 我还检查了VS Code中特定于打字稿的格式设置，但找不到任何相关内容。对于测试，我删除了.eslint.js配置文件，而我的项目没有.prettierrc配置。

解决方法

我通过转到用户设置并删除

来解决此问题

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

并将漂亮的页面配置为默认格式器

,

在$HOME/.config/Code/User/settings.json（在 Linux 上）指定的格式错误，类似

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

应将其设置为esbenp.prettier-vscode或将其删除以使用默认值