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

admin管理员组

文章数量:1134600

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?

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
• formatting
• code-formatting
• visual-studio-code

Share Improve this question Follow edited Mar 22, 2024 at 0:19 starball 49.3k2828 gold badges194194 silver badges865865 bronze badges asked Oct 2, 2015 at 5:14 M. FatihM. Fatih 98311 gold badge66 silver badges1010 bronze badges 11

• 5 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 – Tushar Commented Oct 2, 2015 at 5:16
• 5 @Tushar really? I thought it's just formatting. Can you reference some articles or give a simple example? – M. Fatih Commented Oct 2, 2015 at 5:18
• 3 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. – Shanoor Commented Oct 2, 2015 at 5:23
• 3 @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 stackoverflow.com/questions/2846283/… and jamesallardice.com/… – Tushar Commented Oct 2, 2015 at 5:27
• 41 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. – Gil Epshtain Commented Dec 9, 2017 at 17:59

 |  Show 6 more comments

12 Answers 12

Sorted by: Reset to default 96

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!

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

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.

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

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

C_Cpp: Clang_format_fallback Style

Google

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)

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
}

}

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

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.

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.

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.

本文标签： formattingHow do I set up VS Code to put JavaScript curly braces on a new lineStack Overflow