How do you change the formatting options in Visual Studio Code?
Visual Studio-CodeFormattingOptionsVisual Studio-Code Problem Overview
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?
Visual Studio-Code Solutions
Solution 1 - Visual Studio-Code
Update 2022
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 beautifier from the list.
Solution B:
go to file -> preferences -> settings
search for 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 installed before.
Solution 2 - Visual Studio-Code
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
}
}
]
}
Solution 3 - Visual Studio-Code
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
Solution 4 - Visual Studio-Code
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).
Solution 5 - Visual Studio-Code
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.
Solution 6 - Visual Studio-Code
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.
Solution 7 - Visual Studio-Code
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.
Solution 8 - Visual Studio-Code
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.