How do you format code in Visual Studio Code (VSCode)

Answer 1

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 → Preferences → 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.

Answer 2

On Mac, Shift + Alt + F works for me.

You can always check the key bindings in the menu:

Menu File → Preferences → Keyboard Shortcuts and filter by keyword 'format'.

Answer 3

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?

1. Go to: Menu File → Preferences → Workspace Settings

2. 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?

1. Go to: menu File → Preferences → User Settings

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

Answer 4

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!

Answer 5

The right key combination is Shift + Alt + F.

Answer 6

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