VS Code 美化 react 中的 break 标签 html

Question

我在VS code里有美化，所以当我把它应用到

<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

我也遇到过。您需要将语言语法从 "plain" javascript 设置为 "javascript react".

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

要更新项目中的所有文件，请转至 "user settings" 或 "workspace settings"，具体取决于您希望为项目还是为用户设置。

现在查找：

  "files.associations": {},

并覆盖它并设置如下内容：

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

Answer 2

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

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

VS Code 美化 react 中的 break 标签 html

VS Code beautify break tags in react html

reactjs

js-beautify

visual-studio-code