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

问题描述

当我保存下面的代码时，我开始从头开始学习 React，VS Code 将其格式化为图像。

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 解决了问题。

解决方法

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

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

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

（前提是您安装了 Prettier）