Advertisement
Advertisement


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?

2016/09/10
1
990
9/10/2016 5:07:06 PM

Accepted 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

  1. Open command palette (Win: F1 or Ctrt+Shift+P)

  2. Find 'Change Language Model'

  3. Select language e.g. json. By now syntax should be highlighted.

  4. Format document (e.g. Open Command Palette -> 'Format Document')

Unformat

  1. Select text
  2. Command Palette -> Join Lines

'Show the pics'

enter image description here enter image description here

2020/08/20
4019
8/20/2020 3:38:00 AM

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

2019/04/24

You can add a keybinding in menu FilePreferencesKeyboard shortcuts.

{ "key": "cmd+k cmd+d", "command": "editor.action.formatDocument" }

Or Visual Studio like:

{ "key": "ctrl+k ctrl+d", "command": "editor.action.formatDocument" }
2019/02/28

  1. Right click somewhere in the content area (text) for the file
  2. Select Format Document from the menu:
    • Windows: Alt Shift F
    • Linux: Alt Shift I
    • macOS: F

Enter image description here

2020/06/12

The right key combination is Shift + Alt + F.

2019/02/28

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

2019/04/24