如何设置 VSCode 以将花括号放在同一行？答案

【问题标题】：How can I set up VSCode to put curly braces on the same line?如何设置 VSCode 以将花括号放在同一行？
【发布时间】：2019-07-29 09:26:38
【问题描述】：

默认是这个

{path: '/post/:postId', component: Post},

正在转换为这个

{
    path: '/post/:postId',
    component: Post
},

如何禁用此行为？

UPD。我正在用 JavaScript 编码，上次在 vuejs 中使用 vetur 插件

UPD2。代码示例。

// before
export default new Router({
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About },
    { path: '/todo', component: Todo },
  ]
})
// after formatting (curly braces are moved on new line)
export default new Router({
    routes: [{
            path: '/',
            component: Home
        },
        {
            path: '/about',
            component: About
        },
        {
            path: '/todo',
            component: Todo
        },
    ]
})

UPD 3. 也许 Prettier 对解决这个任务有用？

UPD 4. 就我而言，问题出在用于格式化的附加插件中。 Beautify 被安装为格式化的默认选项，并且 vscode 格式化程序的所有设置都不起作用。

解决方案默认设置vscode formatter或者prettier。

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

谢谢大家。特别是对于 maven87。

【问题讨论】：

后者是我使用过的所有语言的一个非常标准的约定。如果其他人要阅读您的代码，您可能需要遵守约定。
@Adrian，我同意这很重要。但这个问题涉及另一个问题。
你要编码成哪种语言？
JavaScript，上次在 vuejs 中使用 vetur 插件
你能放更多代码吗？所以我们可以正确调试？就像你在使用数组或函数之类的东西

标签： visual-studio-code vscode-settings

【解决方案1】：

您要查找的设置是：

{
  // Defines whether an open brace is put onto a new line for control blocks or not.
  "javascript.format.placeOpenBraceOnNewLineForControlBlocks": false,

  // Defines whether an open brace is put onto a new line for functions or not.
  "javascript.format.placeOpenBraceOnNewLineForFunctions": false
}

请参阅User and Workspace Settings 文章。它也涵盖了其他语言的类似设置。

如果这不能提供足够的控制，您也可以选择使用Beautify 并指定一个.jsbeautifyrc

大括号样式设置如下：

{
   "js": {
       "brace_style": "collapse,preserve-inline"
    }
}

请参阅this 以查看所有可能的值。

更新

有人指出，如果您想完全更改格式化程序，可以通过安装正确的 VS Code 插件然后配置适当的格式化程序来实现另一种程度的控制（请参阅User and Workspace Settings 文章）。例如：

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

在这种情况下，使用的格式化程序是Prettier - Code formatter

【讨论】：

json 对象字面量呢？它们既不是控制块也不是功能。
就我而言，问题出在用于格式化的附加插件中。 Beautify 被安装为格式化的默认选项，并且 vscode 格式化程序的所有设置都不起作用。解决方案是默认设置 vscode formatter 或者 prettier。你让我明白了这个想法。更改您的答案，我将其标记为解决方案。
@karmakaze 对于美化插件，您可以使用 beautify.language 设置并指定 js 映射到 javascript 和 json。你可以查看他们的Readme了解更多信息

【解决方案2】：

在 VS Code 中进入设置： “文件->首选项->设置”

在设置中搜索“卷曲”。它将搜索下面的设置，取消它们并验证它是否按预期工作。 enter image description here

【讨论】：

【解决方案3】：

就我而言，问题在于用于格式化的附加插件。 Beautify 被安装为格式化的默认选项，并且 vscode 格式化程序的所有设置都不起作用。

解决方案默认设置vscode formatter或者prettier。

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

【讨论】：