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

Javascript Formatting Code Formatting Visual Studio-Code

Javascript Problem Overview

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?

Javascript Solutions

Solution 1 - Javascript

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)

Go to File\Preferences\Settings

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,

Save 'User Settings' and you are done!

Solution 2 - Javascript

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.

$File\Preferences\Settings$

Tested with Visual Studio Code 1.30.2

Solution 3 - Javascript

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

Solution 4 - Javascript

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.

Solution 5 - Javascript

VSCode>File>Preferences>Settings> and uncheck CSharpFixFormat>Style>Braces>On Same Line

Solution 6 - Javascript

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

Solution 7 - Javascript

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)

Solution 8 - Javascript

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
}

}

Solution 9 - Javascript

C_Cpp: Clang_format_fallback Style

Google

Solution 10 - Javascript

The following instruction apply to VS Pro 2012...

On the menu bar choose Tools.
Choose Options...
Expand the Text Editor list.
Expand the JavaScript list.
Expand the Formatting list.
Choose New Lines.
Choose Place open brace on new line for control blocks.

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

Content Type	Original Author	Original Content on Stackoverflow
Question	M. Fatih	View Question on Stackoverflow
Solution 1 - Javascript	Advait Baxi	View Answer on Stackoverflow
Solution 2 - Javascript	Charley Ramm	View Answer on Stackoverflow
Solution 3 - Javascript	SridharKritha	View Answer on Stackoverflow
Solution 4 - Javascript	Robin	View Answer on Stackoverflow
Solution 5 - Javascript	Zen Of Kursat	View Answer on Stackoverflow
Solution 6 - Javascript	user1546559	View Answer on Stackoverflow
Solution 7 - Javascript	Ahmad Moghazi	View Answer on Stackoverflow
Solution 8 - Javascript	Spikolynn	View Answer on Stackoverflow
Solution 9 - Javascript	a442509097	View Answer on Stackoverflow
Solution 10 - Javascript	toonice	View Answer on Stackoverflow