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

Question

我非常喜欢"保存时格式化"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代码中特定于typescript的格式设置，但找不到任何相关的内容。对于测试，我删除了.eslint.js配置文件，并且我的项目没有.prettierrc配置。

Answer 1

它是$HOME/.config/Code/User/settings.json中指定的错误格式化程序(在Linux上(，类似

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

为了使用默认的一个，应该将其设置为esbenp.prettier-vscode或删除

Answer 2

我通过转到我的用户设置并删除来解决这个问题

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

并将"漂亮"配置为默认格式化程序