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?
This question is related to
visual-studio-code
formatting
options
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
}
}
]
}
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
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.
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.
This is now supported (as of 2019). Please see sajad saderi's answer below for instructions.
No, this is not currently supported (in 2015).
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.
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.
Source: Stackoverflow.com