VS Code美化React HTML中的中断标签

Question

我已经在VS代码中美化了，所以当我将其应用于

<div className="chatApp" style={style}>
    <Navigation />
    <ChatField />
</div>

我明白了

  <
  div className = "chatApp"
  style = {
    style
  } >
  <
  Navigation / >
  <
  ChatField / >
  <
  /div>

但是我想要这样的东西

<div className = "chatApp"
 style = {
     style
 }>
     <Navigation />
     <ChatField />
 </div>

问题是如何更改美化设置以不将标签转移到新行（div，p，span等）？

Answer 1

这件事也发生在我身上。 您需要将语言语法从“普通” javascript设置为“ javascript react”。

查看下面的图像，您需要单击底部的状态栏并更改语法。

要更新项目中的所有文件，请转到“用户设置”或“工作区设置”，具体取决于是否要为项目或用户设置文件。

现在查找：

  "files.associations": {},

覆盖它并设置如下内容：

   "files.associations": {
       "*.js": "javascriptreact"
   }

Answer 2

我遇到了同样的问题。以下是我的发现： JS-CSS-HTML Formatter扩展包装了漂亮的外观，但是它不支持与HTML混合的js文件。 解决方案是禁用此扩展名，并在settings.json中为javascript启用更漂亮的formatOnSave选项，如下所示：

"[javascript]": {
    "editor.formatOnSave": true
}