How do I set up VS Code to put JavaScript 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?

Colpin

Curly brace on the next line has side-effects in the Javascript, it should be on the same line, according to me the setting for formatting the code should be as it is – Winnie

@Winnie really? I thought it's just formatting. Can you reference some articles or give a simple example? – Colpin

It's because semicolon are not mandatory in JS so if you put your curly brace in the next line, how the interpreter will know if you forgot the semicolon or if you are still in the same statement in some ambiguous cases? source. – Paregoric

@ShanShan Is this ECMA standart or just compiler specific? – Colpin

@M.Fatih Javascript's automatic semicolon insertion can cause the problems when you put the { on next line. The famous example is return {a: 'b'};, here { is on the next line of return. when semicolon is added the same statement is treated as return; and next line {.. which results in returning undefined when you expect object, read more #2846783 and jamesallardice.com/… – Winnie

@M.Fatih It's in the spec: ecma-international.org/ecma-262/5.1/#sec-7.9 – Paregoric

Formatting configuration is a personal like, some like to put the open braces on a new line, other like to put them on the same line. Telling something like "in Javascript putting open braces on the same line has side effect" isn't correct. The only place there it's mandatory to put the open-braces on the same line is in a "return { ..." statement. In all other cases it's just fine. In codding standards you can choice your on style, JUST BE CONSIST, if you selected to put your open-braces on a new line, be consist in your entire project. – Melanochroi

@Paregoric I think there's something wrong with encosia (I wasn't able to get to it), but the article can be found on the wayback machine – Obregon

You should not work against the result of dartfmt on your code. Formatting in Dart is not a personal choice. – Mall

Any updates? How can I achieve the result for C#? – Bernicebernie

I've post on my blog the solution for this issue. Basically, only on save e on paste the format will work. On type won't this is an issue open on vscode amandamata.github.io/curly-brace – Febrifacient

Answer 1

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!

Gerrygerrymander

The latest version of VS code doesn't even require typing! The design is now akin to about:config in browsers – Changteh

The settings help but it's not perfect, it seems like it gets the first control statement of a given block fine, but it misses the occasional else, and else if, catch, etc. Strange. – Obregon

Any suggestions on how to do this for PowerShell? – Mildew

What about C#? or csharp? There's no format options like above... – Astute

I would also like to add a reference to link robertwray.co.uk/blog/braces-on-new-lines-in-visual-studio-code that helped me. Might help somebody else. – Houseleek

what if I like the javascript style and want c++ to use that insted. Is there any settings for that.? – Chordophone

I added an answer that explains how to get the "javascript style" (at least in c#) – Pruett

Anyway to do this in IntelliJ – Batman

@HiTech: If you have the MS PowerShell extension installed go to File > Preferences (or use hotkey Ctrl+,) to open the settings then type "open brace" in the settings search bar. There are 5 PowerShell settings related to braces, including PowerShell > Code Formatting: Open Brace on Same Line. Turn that option off. – Pastorship

Answer 2

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

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

Internment

Where's csharp? This is only half the answer. – Astute

searching for 'curly' gives 0 results, 'brace' gives results – Viator

Answer 3

Those who need the solution for PHP, you need to install PHP Intelephense Extension and update the settings.json file.

"intelephense.format.braces": "k&r" 

By default it was psr12.

Recapitulate

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

Quadruplex

Answer 5

VSCode>File>Preferences>Settings> <type "brace" (without quotas)> and uncheck CSharpFixFormat>Style>Braces>On Same Line

Abortionist

There is no CSharpFixFormat. What extensions did you install? – Astrogate

Answer 6

C_Cpp: Clang_format_fallback Style

Google

Subaquatic

Please provide more details how this helps answer? – Astrogate

C_Cpp: Clang_format_fallback Style setting set as Google will make the open curly brace at the end of the last line of the function declaration, not the start of the next line. if it is set as Visual Studio, braces will be put on a new line. See: Google C++ Style Guide – Cession

Answer 7

Add these lines in settings.json file, open it by type ctrl+,

  // Brackets on a new line
  "javascript.format.placeOpenBraceOnNewLineForControlBlocks": true,
  "javascript.format.placeOpenBraceOnNewLineForFunctions": true,
  "typescript.format.placeOpenBraceOnNewLineForControlBlocks": true,
  "typescript.format.placeOpenBraceOnNewLineForFunctions": true,

Or from the settings search for function new line and check the two boxes, open it by type ctrl+shift+p and search for open settings (json)

Isochor

Answer 8

Just for reference: if it is for Java. File\preferences\settings Extensions\Java\Code Generation: Use Blocks.

Primordial

What about getting the opening brace on a new line for everything, not just after if statements? – Language

Answer 9

In 2021 the default behavior seems to be what OP wanted. To get curly braces on same line in c# (vscode 1.63 with omnisharp) you have to create a omnisharp.json file in project root with proper settings as described at https://nosuchstudio.medium.com/formatting-curly-braces-on-the-same-line-in-c-in-vscode-c4937e1c215f . e.g.

{
"FormattingOptions": {
    "NewLinesForBracesInLambdaExpressionBody": false,
    "NewLinesForBracesInAnonymousMethods": false,
    "NewLinesForBracesInAnonymousTypes": false,
    "NewLinesForBracesInControlBlocks": false,
    "NewLinesForBracesInTypes": false,
    "NewLinesForBracesInMethods": false,
    "NewLinesForBracesInProperties": false,
    "NewLinesForBracesInObjectCollectionArrayInitializers": false,
    "NewLinesForBracesInAccessors": false,
    "NewLineForElse": false,
    "NewLineForCatch": false,
    "NewLineForFinally": false
}

}

Pruett

I don't understand where you put this file? – Astrogate

Answer 10

Found a fix for C#! Download C# Curly Formatter extension by Ironcutter24. Done! Now all your braces will move to a new line. Clean and beautiful.

Tergum

Answer 11

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.

Standup

Err... I tagged question on vscode. Not asking for Visual Studio Community/Professional/Ultimate etc. ;) (See VSCode here) – Colpin

This is not an answer to a Visual Studio Code question; Visual Studio and Visual Studio Code are totally different. – Obregon