VSCode 在 React 代码中的 HTML 标签内添加空格

Posted 2023-02-21

【中文标题】VSCode 在 React 代码中的 HTML 标签内添加空格

【英文标题】：VSCode adds spaces inside HTML tags inside React code

【发布时间】：2021-05-04 21:01:37

【问题描述】：

当我将代码保存在 VS Code 下方时开始从地面学习 React，并将其格式化为图像中的样子。

ReactDOM.render(
    <div>
        <h1> Hi there  name </h1> 
        <p>  your lucky number is num </p>
    </div>,
    document.getElementById("root")
);

来自 VSCode 的带空格格式的换行符示例代码：

我在谷歌上搜索过，但过了一段时间我意识到是文件格式导致了这个问题。

感谢 Guillermo，原因是 VSCode 扩展 JS-CSS-html Formatter，卸载它并改用 prettier 解决了问题。

【参考方案1】：

我通过以下步骤解决了：

安装 Prettier-Code 格式化程序。 在设置中禁用默认的 HTML 格式化程序。 然后重新启动您的 VS-Code。

更多详情请查看以下链接：

How to disable the default HTML formatter.

【参考方案2】：

也许您正在使用与 React 不兼容的 js 文件的格式化程序。

您可以尝试将此行添加到您的settings.json 文件中：

"[javascript]": 
    "editor.defaultFormatter": "esbenp.prettier-vscode"

（前提是你安装了Prettier）

【讨论】：

这毕竟对我有用，我使用 create-react-app 来确定任何语法错误，当我将默认格式化程序更改为更漂亮时，它添加了几个空格使用这种格式@ 987654324@。即使默认的格式化程序更漂亮，这个旧的扩展 JS-CSS-HTML 格式化程序也阻止了新文件被格式化为更漂亮。卸载 JS-CSS-HTML Formatter 解决了我的问题。谢谢@guillermo-brachetta