How do you change the formatting options in Visual Studio Code?

Question

I know you can Format Code using Ctrl+F / Cmd+F in Visual Studio Code but how do you change the formatting options for each language?

For example, in Visual Studio 2013 I can choose compact mode for CSS.

Is there another hidden JSON file to do that?

Rissa

Probably not. If you have read the online doc, you may notice that Microsoft only mentioned the format function for TypeScript. – Borman

It works for C# and JavaScript, I can't find an official list but it's more than just TypeScript. – Rissa

it is 2017 and is it still not supported yet? – Girl

I am confused. The answers, including the selected one, seem to all be about selecting the default formatter. Whereas, by my reading, the question is asking about how to adjust the specific formatter options available for each language. – Birdcage

@ChuckBatson Same problem here - answers address a trivial "I am to blind" problem, original question suggests deeper insigths – Anastase

Answer 1

Update

Solution A:

Press Ctrl+Shift+P

Then type Format Document With...

At the end of the list click on Configure Default Formatter...

Now you can choose your favorite code beautifier from the list.

If Format Document With... is not available:

Open a file in Visual Studio Code (the extension of the file is not important can be .js, .html, .txt, etc...) then repeat Solutuin A again.

Solution B:

Windows: go to file -> preferences -> settings
Mac: go to code -> preferences -> settings

in the search bar tpye format, on the left side, click on Text Editor, the very first item on the right side is Editor: Default Formatter from the dropdown you can pick any document formatter which you've installed before.

Devaughn

Format Document With... is no longer there – Woe

Vetur doesn't exist either! – Deettadeeyn

@MartijnHiemstra FYI, Vetur is a VS Code extension that's available on the VS Code marketplace :) marketplace.visualstudio.com/items?itemName=octref.vetur – Wendelina

'Format Document With...' showed up for me after going into settings, searching for 'formatter', select the 'HTML' option on the tree and check 'Enable/disable default HTML formatter' – Undertow

"Format Document With..." is back in 1.56.2 :) – Mope

@Gremi64: is it? I don't have the option in VSCode 1.59.1. – Sammer

@Sammer yes, got the 1.59.1 now and it is still present :) – Mope

Format Document With... definitely exists in 1.63.0 (and many other versions that I have been using) – Angelenaangeleno

Format Document With... option appears only when some file is already open. Otherwise, not – Abatis

Format Document With... not availbale in v1.74.3 – Monochrome

Still not available in 1.87.1 – Polyurethane

Answer 2

If we are talking Visual Studio Code nowadays you set a default formatter in your settings.json:

  // Defines a default formatter which takes precedence over all other formatter settings. 
  // Must be the identifier of an extension contributing a formatter.
  "editor.defaultFormatter": null,

Point to the identifier of any installed extension, i.e.

"editor.defaultFormatter": "esbenp.prettier-vscode"

You can also do so format-specific:

"[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[scss]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[sass]": {
    "editor.defaultFormatter": "michelemelluso.code-beautifier"
},

Also see here.

---

You could also assign other keys for different formatters in your keyboard shortcuts (keybindings.json). By default, it reads:

{
  "key": "shift+alt+f",
  "command": "editor.action.formatDocument",
  "when": "editorHasDocumentFormattingProvider && editorHasDocumentFormattingProvider && editorTextFocus && !editorReadonly"
}

---

Lastly, if you decide to use the Prettier plugin and prettier.rc, and you want for example different indentation for html, scss, json...

{
    "semi": true,
    "singleQuote": false,
    "trailingComma": "none",
    "useTabs": false,

    "overrides": [
        {
            "files": "*.component.html",
            "options": {
                "parser": "angular",
                "tabWidth": 4
            }
        },
        {
            "files": "*.scss",
            "options": {
                "parser": "scss",
                "tabWidth": 2
            }
        },
        {
            "files": ["*.json", ".prettierrc"],
            "options": {
                "parser": "json",
                "tabWidth": 4
            }
        }
    ]
}

Macedonian

format-specific should overwrite default, but it does not. I have prettier as default, and autopep8 for python, but only when I comment the default, autopep8 is used. If not: extension prettier cannot format <repo><file> – Hearing

Thanks so much for your post! I had set "editor.defaultFormatter": "dbaeumer.vscode-eslint", but I'd changed my typescript default formatter to the default one, changing it back like so did the trick: "[typescript]": { "editor.defaultFormatter": "dbaeumer.vscode-eslint" }, It was driving me insane, thank you! – Chokeberry

Where is editor.defaultFormatter documented? I can't find it anywhere. Also, it seems like the setting value only allows you to specify an extension and not provide a command line tool? – Celestinecelestite

Answer 3

I just found this extension called beautify in the Market Place and yes, it's another config\settings file. :)

Beautify javascript, JSON, CSS, Sass, and HTML in Visual Studio Code.

VS Code uses js-beautify internally, but it lacks the ability to modify the style you wish to use. This extension enables running js-beautify in VS Code, AND honouring any .jsbeautifyrc file in the open file's path tree to load your code styling. Run with F1 Beautify (to beautify a selection) or F1 Beautify file.

For help on the settings in the .jsbeautifyrc see Settings.md

Here is the GitHub repository: https://github.com/HookyQR/VSCodeBeautify

Antiparallel

Thanks, it looks pretty good, I'm missing it in my CSS, javascript/typescript and html seems to work out of the box ok. It looks like you might be able to put some of it in your .editorconfig – Rissa

One of the best solutions since it uses .jsbeautifyrc configuration file, which in turn will be helpful for other team members who might be using other IDEs for writing code. For Sublime Text, the HTML-CSS-JS-Prettify plugin is the best out there. Unfortunately for Eclipse, the implementations on marketplace are buggy. I still need to use editorconfig which does a decent job. – Dagon

Beautify is good but is always giving me problems. I find prettier to be better and more configurable. – Autoionization

Answer 4

Edit:

This is now supported (as of 2019). Please see sajad saderi's answer below for instructions.

No, this is not currently supported (in 2015).

Umber

That's a shame, I'll vote it up and wait and see. I suspect it will be another json settings file, that seems to be the direction they're going. – Rissa

No longer correct? Then how? At least provide a URL for that. – Ind

Sorry for the vagueness. The visualStudio uservoice link is broken. Should probably be a github issue, and I was able to find github.com/Microsoft/vscode/issues/1533. You can also search in your settings for "format" and you will find javascript.format options. – Nonconformance

Answer 5

You can make some changes from the "Settings". For example javascript rules start with "javascript.format". But for advanced formatting control, still need to use some extensions.

Rules settings for the format code command

Lakieshalakin

Answer 6

Same thing happened to me just now. I set prettier as the Default Formatter in Settings and it started working again. My Default Formatter was null.

To set VSCODE Default Formatter

File -> Preferences -> Settings (for Windows)

Code -> Preferences -> Settings (for Mac)

Search for "Default Formatter". In the dropdown, prettier will show as esbenp.prettier-vscode.

Xantha

Answer 7

A solution that works for me (July 2017), is to utilize ESLint. As everybody knows, you can use the linter in multiple ways, globally or locally. I use it locally and with the google style guide. They way I set it up is as follow...

• cd to your working directory
• npm init
• npm install --save-dev eslint
• node_modules/.bin/eslint --init
• I use google style and json config file

Now you will have a .eslintrc.json file the root of your working directory. You can open that file and modify as you please utilizing the eslint rules. Next cmd+, to open vscode system preferences. In the search bar type eslint and look for "eslint.autoFixOnSave": false. Copy the setting and pasted in the user settings file and change false to true. Hope this can help someone utilizing vscode.

Weihs

Answer 8

To change specifically C# (OmniSharp) formatting settings you can use a json file:
User: ~/.omnisharp/omnisharp.json or %USERPROFILE%\.omnisharp\omnisharp.json
Workspace: omnisharp.json file in the working directory which OmniSharp has been pointed at.

Example:

{
  "FormattingOptions": {
    "NewLinesForBracesInMethods": false,
    "NewLinesForBracesInProperties": false,
    "NewLinesForBracesInAccessors": false,
    "NewLinesForBracesInAnonymousMethods": false,
    "NewLinesForBracesInControlBlocks": false,
    "NewLinesForBracesInObjectCollectionArrayInitializers": false,
    "NewLinesForBracesInLambdaExpressionBody": false
  }
}

Details on this post | omnisharp.json schema (it's already in vscode, you can just CTRL+SPACE it)

Other language extensions may have similar files for setting it.

Koehler

Answer 9

Search for "LANGUAGE.format." (eg. "javascript.format." or "typescript.format.") in the documented Default Settings to see what and how you can configure for the built-in formatters.

In principle, VS Code is a framework to host extensions for different tasks, mainly editing files. Out of the box it comes with extensions for the most common programming languages where built-in formatting capabilities differ from language to language (see the docs) and are rather basic proofs of concepts, suggesting explicitly to add more adequate and well documented formatting extensions for your use case.

Anastase