如何防止Visual Studio代码在我的JSX中插入换行符？

Question

我正在尝试设置Visual Studio代码以在React中进行编码时清理或美化我的JSX / JS。

我安装了几个漂亮的格式化插件。当我执行“设置文档格式”时，它会使我的代码看起来很恐怖。

类似这样的东西

  <Map
    style={{
      height: "100%",
      width: "100%",
      margin: "0 auto"
    }}
    center={position}
    zoom={10}>

像这样变成垃圾...

return ( <
            Map style = {
                {
                    height: "100%",
                    width: "100%",
                    margin: "0 auto"
                }
            }
            center = {
                position
            }
            zoom = {
                10
            } >
            <

我搜索了许多设置文件...这是由什么控制的？我启用Prettier: Jsx Bracket Same Line为真。我将字符宽度设置为宽。我关闭了任何换行的东西。老实说，我不知道为什么它使我的jsx看起来非常不可读。当我将相同的代码放入https://prettier.io/playground中时，看起来很好。

什么设置会将我的代码放在单独的行上？

Answer 1

可以通过在 Visual Studio代码编辑器中将选择语言模式从 JavaScript 更改为 JavaScript React 来解决 strong>