CODEWITHSUNDEEP
visual-studio-code
Skif
Skif

Reputation: 1288

How can I set up VSCode to put curly braces on the same line?

By default this

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

are converting to this

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

How can I disable this behavior?

UPD. I am coding in JavaScript, last time in vuejs with vetur plugin

UPD2. Code expample.

// 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. Maybe Prettier will be useful to solve this task?

UPD 4. In my case, the problem was in the additional plugin for formatting. Beautify was installed as the default option for formatting and all settings for vscode formatter was not working.

The solution is set vscode formatter or prettier by default.

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

Thanks all. Especially for maven87.

Upvotes: 9

Views: 4796

Answers (3)

maven87
maven87

Reputation: 176

The settings you are looking for are:

{
  // 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
}

Please refer to the User and Workspace Settings article. It covers similar settings for other languages too.

If that doesn't provide enough control you may also choose to use Beautify and specify a .jsbeautifyrc

with a setting for brace style as follows:

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

Please refer to this to see all possible values.

UPDATE

It was pointed out that there is another degree of control where if you would like to change the formatter completely, you do so by installing the correct VS Code plugin and then configuring the appropriate formatter (see User and Workspace Settings article). For example:

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

In this case the formatter being used is Prettier - Code formatter

Upvotes: 10

Skif
Skif

Reputation: 1288

In my case, the problem was in the additional plugin for formatting. Beautify was installed as the default option for formatting and all settings for vscode formatter was not working.

The solution is set vscode formatter or prettier by default.

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

Upvotes: 0

Swapnil S.
Swapnil S.

Reputation: 11

In VS Code go to settings: "File->Preferences->Settings"

In settings search "curly". It will search below settings, unckeck them and verify if it works as expected. enter image description here

Upvotes: 1

Related Questions