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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

At the VS code 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  Update 2021 if  quot Format Document With    quot  didn t exist any more  go to file   gt  preferences   gt  settings then navigate to Extensions   gt  Vetur  scroll a little bit then you will see format  gt  defaultFormatter css  now you can pick any document formatter that you installed bofer for different file type extensions

User · Answer

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     quot editor defaultFormatter quot   null   Point to the identifier of any installed extension  i e   quot editor defaultFormatter quot    quot esbenp prettier-vscode quot   You can also do so format-specific   quot  html  quot          quot editor defaultFormatter quot    quot esbenp prettier-vscode quot      quot  scss  quot          quot editor defaultFormatter quot    quot esbenp prettier-vscode quot      quot  sass  quot          quot editor defaultFormatter quot    quot michelemelluso code-beautifier quot      Also see here   You could also assign other keys for different formatters in your keyboard shortcuts  keybindings json   By default  it reads       quot key quot    quot shift alt f quot      quot command quot    quot editor action formatDocument quot      quot when quot    quot editorHasDocumentFormattingProvider  amp  amp  editorHasDocumentFormattingProvider  amp  amp  editorTextFocus  amp  amp   editorReadonly quot      Lastly  if you decide to use the Prettier plugin and prettier rc  and you want for example different indentation for html  scss  json           quot semi quot   true       quot singleQuote quot   false       quot trailingComma quot    quot none quot        quot useTabs quot   false        quot overrides quot                            quot files quot    quot   component html quot                quot options quot                      quot parser quot    quot angular quot                    quot tabWidth quot   4                                                 quot files quot    quot   scss quot                quot options quot                      quot parser quot    quot scss quot                    quot tabWidth quot   2                                                 quot files quot     quot   json quot    quot  prettierrc quot                 quot options quot                      quot parser quot    quot json quot                    quot tabWidth quot   4

User · Answer

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

User · Answer

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 - gt  Preferences - gt  Settings  for Windows  Code - gt  Preferences - gt  Settings  for Mac  Search for  quot Default Formatter quot   In the dropdown  prettier will show as esbenp prettier-vscode

User · Answer

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       quot FormattingOptions quot          quot NewLinesForBracesInMethods quot   false       quot NewLinesForBracesInProperties quot   false       quot NewLinesForBracesInAccessors quot   false       quot NewLinesForBracesInAnonymousMethods quot   false       quot NewLinesForBracesInControlBlocks quot   false       quot NewLinesForBracesInObjectCollectionArrayInitializers quot   false       quot NewLinesForBracesInLambdaExpressionBody quot   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

[visual-studio-code] How do you change the formatting options in Visual Studio Code?

Examples related to visual-studio-code

Examples related to formatting

Examples related to options