Braces on new lines in Visual Studio Code

visual studio code, javascript

Here there be dragons: Some people prefer their braces on the same line, some prefer them on the next line. If you're in the latter camp then the default in Visual Studio Code will annoy you - it's easy enough to change though.

Start off by opening Visual Studio Code and then click on the small "cog" icon at the bottom left of the screen:

The cog at the bottom left of the screen opens the Visual Studio Code user settings editor

This will bring up the settings editor:

The editor for Visual Studio Code user settings

Once this is open it's a simple matter to search for the relevant settings (for me, anyway!), which are:

  • javascript.format.placeOpenBraceOnNewLineForControlBlocks
  • javascript.format.placeOpenBraceOnNewLineForFunctions

You can search on 'placeOpenBraceOnNewLine' which will return both of these, along with their TypeScript counterparts, which can then be added to the "User Settings" on the right-hand side. If you're dealing with one project where you have to match (or want to enforce!) conventions, you can set these values in the "Workspace Settings" tab to have them only apply to that workspace.

For User Settings, you'll end up with an editor that looks something like this (assuming you haven't got any other setting customisations):

{
    "terminal.integrated.shell.windows": "C:\\WINDOWS\\System32\\cmd.exe",
    "javascript.format.placeOpenBraceOnNewLineForControlBlocks": true,
    "javascript.format.placeOpenBraceOnNewLineForFunctions": true,
}

About Rob

I've been interested in computing since the day my Dad purchased his first business PC (an Amstrad PC 1640 for anyone interested) which introduced me to MS-DOS batch programming and BASIC.

My skillset has matured somewhat since then, which you'll probably see from the posts here. You can read a bit more about me on the about page of the site, or check out some of the other posts on my areas of interest.

3 Comments

  • Gravatar Image

    For those that need the same but to C# here's the solution
    https://amandamata.github.io/curly-brace/

  • Gravatar Image

    Thanks for this Rob. Any idea how this can be achieved for C# though? (I am assuming that the above is specifically for JavaScript as it didn't work for my C# project).

    The C# equivalent brace option is jumping out at me sadly.

  • Gravatar Image

    Hi Owen - I have had a look and I can't see anything that's surfaced by the C# extension itself and as you found, it doesn't look like that's the case.

    But - as luck would have it someone else shared a link to something that looks like a solution for C# - see the comment above. It does look like (I've yet to try it) it might only be something that triggers on save. due to an outstanding issue in Code with 'format on type', but it might be a start of a solution for you 👍

Add a Comment