visual-studio-code - VSCode 中错误的 TSX 三元标记块格式

Question

我非常喜欢 VSCode 的“保存时格式化”功能。但现在我tsx在 VS Code (1.49.2) 中遇到恼人的错误文件格式。

这是一个例子。这里两行有额外的缩进（'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;

文件中的相同代码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.tsxtsx 文件时，格式正确。我还检查了 VS Code 中特定于打字稿的格式设置，但找不到任何相关内容。对于测试，我删除了.eslint.js配置文件并且我的项目没有.prettierrc配置。

标签： visual-studio-codeformattingprettiertsx

Answer 1

这是$HOME/.config/Code/User/settings.json（在Linux上）中指定的错误格式化程序，例如

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

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