How do I set up VSCode to put curly braces on a new line?

Question

Let's say I type in the following code and format it.

if (condition) { /* Hello! */ }

If this is C# code, it is formatted like this:

if (condition)
{
    // Hello!
}

If it is JavaScript, VSCode formats it like this:

if (condition) {
    // Hello!
}

So how can I use the first formatting style (curly braces on new lines) for all languages? I can't find a setting or something similar. Suggestions?

Answer 1

I think that in a condition statement there are no side effects, but in a return statement there is a problem. Check this link: https://web.archive.org/web/20160421051556/http://encosia.com/in-javascript-curly-brace-placement-matters-an-example/http://encosia.com/in-javascript-curly-brace-placement-matters-an-example/

If you want to learn javascript, I recommend you read the book "JavaScript: The Good Parts" by Douglas Crockford.

Answer 2

Follow the steps below to make Visual Studio Code format opening curly braces on a new line for Java Script and Type Script.

In Visual Studio Code (v1.20.0)

1. Go to File\Preferences\Settings

2. Add the following lines in 'User Settings' (in the right side pane)

   "javascript.format.placeOpenBraceOnNewLineForControlBlocks": true, 
   "javascript.format.placeOpenBraceOnNewLineForFunctions": true,
   
   "typescript.format.placeOpenBraceOnNewLineForControlBlocks": true,
   "typescript.format.placeOpenBraceOnNewLineForFunctions": true,
   

3. Save 'User Settings' and you are done!

Answer 3

Go to File\Preferences\Settings and search for 'curly'.

Enable the settings illustrated below.

This allows me to auto-format code with curly braces on the following line for function definitions and control blocks.

Tested with Visual Studio Code 1.30.2

Answer 4

By default VS code don't support customization in formatting. But you could do your format customization using js-beautify extension. You can find the free version on VS code Marketplace (https://marketplace.visualstudio.com/items?itemName=HookyQR.beautify).

For your requirement of curly braces on new line can be setup by creating a '.jsbeautifyrc' config file on your project root folder and define a following line.

{
     "brace_style": "expand"
}

For more formatting options you can find from the following link: https://github.com/HookyQR/VSCodeBeautify/blob/master/Settings.md

Answer 5

To answer the question, you can't customize the auto-formatting in VSCode yet but you can vote for the feature request here: https://visualstudio.uservoice.com/forums/293070-visual-studio-code/suggestions/7756212-format-beautify-source-code

Answer 6

The following instruction apply to VS Pro 2012...

1. On the menu bar choose Tools.
2. Choose Options...
3. Expand the Text Editor list.
4. Expand the JavaScript list.
5. Expand the Formatting list.
6. Choose New Lines.
7. Choose Place open brace on new line for control blocks.

I hope this is helpful. Feel free to reply if you have any questions.