How do you format code in Visual Studio Code VSCode

Question

What is the equivalent of Ctrl   K   F and Ctrl   K   D on Windows in Visual Studio for formatting  or  beautifying  code in the Visual Studio Code editor

User · Answer

Use extension     Enables auto formatting of the code when you save a file   Launch Visual Studio Code and Quick Open  Ctrl   P   paste the following command  and press Enter      ext install format-on-save   https   marketplace visualstudio com items itemName gyuha format-on-save

User · Answer

Right click somewhere in the content area  text  for the file Select Format Document from the menu    Windows  Alt Shift F Linux  Alt Shift I macOS      F

User · Answer

Not this one  Use this   Menu File  rarr  Preferences  rarr  Workspace Settings     editor formatOnType   true

User · Answer

Shift   Alt   F does the job just fine in 1 17 2 and above

User · Answer

The format shortcut in C  didn t work for me until I installed Mono for Mac nbsp OS nbsp X  DNVM and DNX   Before I installed Mono  the auto-format shortcut  Shift   Alt   F  worked only for the  json files

User · Answer

In Visual Studio Code  Shift Alt F is doing what Ctrl K D is doing in Visual Studio

User · Answer

Select the text  right click on the selection  and select the option  command palette      A new window opens  Search for  format  and select the option which has formatting as per the requirement

User · Answer

For those that want to customize what JavaScript files to format  you can use the any extension on the JSfiles property  The same applies to HTML          beautify onSave   true       beautify JSfiles     js    json    jsbeautifyrc    jshintrc    ts         beautify HTMLfiles     htm    html       This will enable beautify on save for TypeScript  and you can add in XML to the HTML option

User · Answer

Code Formatting Shortcut   Visual Studio Code on Windows - Shift   Alt   F  Visual Studio Code on MacOS   - Shift   Option   F  Visual Studio Code on Ubuntu  - Ctrl   Shift   I  You can also customize this shortcut using a preference setting if needed   Code Formatting While Saving the File   Visual Studio Code allows the user to customize the default settings   If you want to auto format your content while saving  add the below code snippet in the work space settings of Visual Studio Code   Menu File  rarr  Preferences  rarr  Workspace Settings           Controls if the editor should automatically format the line after typing      beautify onSave   true        editor formatOnSave   true          You can auto format any files based on the file extensions type       beautify JSfiles              js            json            jsbeautifyrc            jshintrc            ts            Note  now you can auto format TypeScript files  Check my update

User · Answer

On Mac  Shift   Alt   F works for me   You can always check the key bindings in the menu   Menu File  rarr  Preferences  rarr  Keyboard Shortcuts and filter by keyword  format

User · Answer

You have to install the appropriate plug-in first  i e   XML  C   etc      Formatting won t become available until you ve installed the relevant plugin  and saved the file with an appropriate extension

User · Answer

The right key combination is Shift   Alt   F

User · Answer

Just right-click on the text and select  Format code    Visual Studio Code uses js-beautify internally  but it lacks the ability to modify the style you wish to use  The extension  beautify  lets you add settings

User · Answer

For some reason Alt   Shift   F didn t work for me on Mac Visual Studio Code 1 3 1  and actually the command  Format Document  don t worked at all  But command Formatter worked very well   So you can use Command   Shift   P and type Formatter or make your own shortcut in menu File  rarr  Preferences  rarr  Keyboard Shortcuts  rarr  Command   K Command   S then type Formatter and add your shortcut   See an example

User · Answer

The simplest way I use in Visual Studio Code  Ubuntu  is   Select the text which you want to format with the mouse    Right click and choose  Format selection

User · Answer

Visual Studio Code on Linux   Ctrl     to unindent block of code and   Ctrl     to make a mass indentation

User · Answer

Visual Studio Code 1 6 1 supports  Format On Save  which will automatically pick up relevant installed formatter extensions and format the whole document on each save    Enable  Format On Save  by setting    editor formatOnSave   true   And there are available keyboard shortcuts  Visual Studio Code 1 7 and above    Format the whole document  Shift   Alt   F  Format Selection only  Ctrl   K  Ctrl   F

User · Answer

If you want to custom the style of format-document  you should use Beautify extention   Refer to this screenshot

User · Answer

The code formatting is available in Visual Studio Code through the following shortcuts   On Windows Shift   Alt   F On Mac Shift   Option   F On Linux Ctrl   Shift   I  Alternatively  you can find the shortcut  as well as other shortcuts  through the  Command Palette  provided in the editor with Ctrl  Shift  P  or Command   Shift   P on Mac   and then searching for format document  For unsaved snippets  Open command palette  Win  F1 or Ctrt Shift P   Find  Change Language Model   Select language e g  json  By now syntax should be highlighted   Format document  e g  Open Command Palette - gt   Format Document     Unformat  Select text Command Palette - gt  Join Lines   Show the pics

User · Answer

For Fedora  Click File - gt  Preferences - gt  Keyboard shortcuts  Under Default Keyboard Shortcuts  search  Ctrl   F  for editor action format   Mine read  quot key quot    quot ctrl shift i quot  You can change it as well  Refer to this answer on how to    or if you are feeling a little lazy to scroll up    You can add a keybinding in  quot Preferences- gt Keyboard shortcuts quot     quot key quot    quot cmd k cmd d quot    quot command quot    quot editor action format quot    Or Visual Studio like     quot key quot    quot ctrl k ctrl d quot    quot command quot    quot editor action format quot      Please note  cmd key is only for Macs  For Windows and Fedora  Windows keyboard  use Ctrl  EDIT  As per Visual Code version 1 28 2 this is what I found  editor action format no longer exists  It has now been replaced by editor action formatDocument and editor action formatSelection  Type editor action format in the search box to view existing shortcuts  To change the key combinations follow these steps   Click editor action formatDocument or editor action formatSelection A pen like icon appears to the left - click it  A pop-up appears  Press the desired key combination and press enter

User · Answer

In Mac  use   K and then   F

User · Answer

On Ubuntu it s Ctrl   Shift   I

User · Answer

You can add a keybinding in menu File   Preferences   Keyboard shortcuts      key    cmd k cmd d    command    editor action formatDocument      Or Visual Studio like      key    ctrl k ctrl d    command    editor action formatDocument

User · Answer

Formatting code in Visual Studio   I have tried to format in Windows 8   Just follow the screenshots below    Click on View on the top menu bar  and then click on Command Palette    Then a textbox would appear where we need type Format  Shift   Alt   F

User · Answer

While changing the default behavior for Visual Studio Code requires an extension  you may override the default behavior in the workspace or user level  It works for most of the supported languages  I can guarantee HTML  JavaScript  and C     Workspace level  Benefits   Does not require an extension Can be shared among teams   Outcomes    vscode settings json is created in the project root folder   How To    Go to  Menu File  rarr  Preferences  rarr  Workspace Settings Add and save  editor formatOnType   true to settings json  which overrides default behavior for the project you work on by creating  vscode settings json file       User environment level  Benefits   Does not requires extension Personal development environment tweeking to rule them all  settings      Outcomes   User s settings json is modified  see location by operating system below    How To    Go to  menu File  rarr  Preferences  rarr  User Settings Add or change the value of  editor formatOnType   false to  editor formatOnType   true in the user settings json   Your Visual Studio Code user s settings json location is   Settings file locations depending on your platform  the user settings file is located here    Windows   APPDATA  Code User settings json  Mac   HOME Library Application Support Code User settings json  Linux   HOME  config Code User settings json The workspace setting file is located under the  vscode folder in your project    More details may be found here

User · Answer

On Linux it is Ctrl   Shift   I   On Windows it is Alt   Shift   F  Tested with HTML CSS JavaScript and Visual Studio Code 1 18 0   For other languages  you might need to install a specific language package

User · Answer

By default  this key was not working for me on HTML  CSS  and JavaScript documents   After searching  I found the popular plugin JS-CSS-HTML Formatter with 133 796 installs    After installation  just reload the windows and hit Ctrl    Shift   F  and it works

User · Answer

Just install Visual Studio Keymap  Visual Studio Keymap for Visual Studio Code  by Microsoft  Problem Solved   p

User · Answer

Menu File  rarr  Preferences  rarr  Settings   editor formatOnType   true   When you enter the semicolon  it s going to be formatted   Alternatively  you can also use  editor formatOnSave   true

[code-formatting] How do you format code in Visual Studio Code (VSCode)

Examples related to code-formatting

Examples related to visual-studio-code