CODEWITHSUNDEEP
javascriptformattingcode-formattingvisual-studio-code
M. Fatih
M. Fatih

Reputation: 983

How do I set up VS Code to put JavaScript curly braces on a new line?

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?

Upvotes: 92

Views: 123491

Answers (12)

Marios Papadakis
Marios Papadakis

Reputation: 1

For C++ I searched for C_Cpp.clang_format_fallbackStyle in Settings and changed it to { BasedOnStyle: Google, IndentWidth: 4 }. Now my braces are in sameLine.

Upvotes: 0

Alex Bratov
Alex Bratov

Reputation: 13

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.

Upvotes: 0

a442509097
a442509097

Reputation: 75

C_Cpp: Clang_format_fallback Style

Google

Upvotes: 3

Spikolynn
Spikolynn

Reputation: 4173

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
}

}

Upvotes: 2

Ahmad Moghazi
Ahmad Moghazi

Reputation: 1715

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)

enter image description here

Upvotes: 2

Robin
Robin

Reputation: 5427

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.

Upvotes: 10

Fables Alive
Fables Alive

Reputation: 2808

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

Upvotes: 4

Charley Ramm
Charley Ramm

Reputation: 667

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

Upvotes: 39

user1546559
user1546559

Reputation: 59

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

Upvotes: 1

Advait Baxi
Advait Baxi

Reputation: 1628

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!

Upvotes: 96

SridharKritha
SridharKritha

Reputation: 9631

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

Upvotes: 6

toonice
toonice

Reputation: 2236

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.

Upvotes: -8

Related Questions