262

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?

Improve this question
4
  • It works for C# and JavaScript, I can't find an official list but it's more than just TypeScript. Commented May 6, 2015 at 8:27
  • 12
    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. Commented Aug 16, 2022 at 20:08
  • @ChuckBatson Same problem here - answers address a trivial "I am to blind" problem, original question suggests deeper insigths Commented Nov 11, 2023 at 17:54
  • Something like this question for autopep8 is more likely what one would be looking for. The settings would depend on the language and formatter used. Commented May 14, 2024 at 14:06

9 Answers 9

Reset to default
333

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 Solution 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.

enter image description here

Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

@MartijnHiemstra FYI, Vetur is a VS Code extension that's available on the VS Code marketplace :) marketplace.visualstudio.com/items?itemName=octref.vetur
'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'
@fritzmg yes, got the 1.59.1 now and it is still present :)
Format Document With... definitely exists in 1.63.0 (and many other versions that I have been using)
Format Document With... option appears only when some file is already open. Otherwise, not
55

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 } } ] }
Improve this answer

3 Comments

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>
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!
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?
21

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

Improve this answer

3 Comments

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
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.
Beautify is good but is always giving me problems. I find prettier to be better and more configurable.
19

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).

Improve this answer

3 Comments

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.
No longer correct? Then how? At least provide a URL for that.
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.
11

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

Improve this answer

Comments

10

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.

VSCODE Editor Option

Improve this answer

Comments

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.

Improve this answer

Comments

5

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.

Improve this answer

Comments

2

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.

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.