How do you format code in Visual Studio Code (VSCo

问题:

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?

回答1:

The code formatting is available in VS Code through the following shortcuts:

• On Windows Shift + Alt + F
• On Mac Shift + Option + F
• On Ubuntu Ctrl + Shift + I

Alternatively, you can find the shortcut, as well as other shortcuts, through the search functionality provided in the editor with Ctrl +Shift+ P (or Command + Shift + P on Mac), and then searching for format document.

回答2:

Code Formatting Shortcut:

VSCode on Windows - Shift + Alt + F

VSCode on MacOS - Shift + Option + F

VSCode on Ubuntu - Ctrl + Shift + I

You can also customize this shortcut using preference setting if needed.

Code Formatting While Saving the File:

Visual Studio code allows user can customize the default settings.

If you want to auto format your content while saving add this below code snippet in work space settings of visual studio code.

File --> Preferences --> Workspace Settings

{
   // Controls if the editor should automatically format the line after typing
   "beautify.onSave": true,

   "editor.formatOnSave": true,

   // You can auto formate any files based on extensions type. 
"beautify.JSfiles": [
    "js",
    "json",
    "jsbeautifyrc",
    "jshintrc",
    "ts"
  ] 
}

Note: now you can auto format typescript files check my update

回答3:

You can add a keybinding in 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" }

回答4:

The right key combination is shift+alt+f

回答5:

Also note that as of today formatting is available for these languages:

• xml (they removed it, too many bugs)
• html
• json
• javascript
• typescript
• c#

回答6:

VS 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 (VS Code 1.7 and above):

Format whole document: Shift + Alt + F

Format Selection only: CtrlK + CtrlF

回答7:

1. Right click the file
2. Select Format Document (Alt + shift + f) from menu box.

回答8:

On Linux Ctrl + Shift + I. On Windows Alt + Shift + F. Tested with HTML/CSS/JS and VsCode 1.18.0.

For other languages, you might need to install a specific language package.

回答9:

For Fedora

1. Click File -> Preferences -> Keyboard shortcuts.
2. Under Default Keyboard Shortcuts, search (Ctrl + F) for editor.action.format.

Mine read "key": "ctrl+shift+i"

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 "Preferences->Keyboard shortcuts"

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

Or Visual Studio like:

{ "key": "ctrl+k ctrl+d", "command": "editor.action.format" }

---

Please note: cmd key is only for Macs. For Windows and Fedora (Windows keyboard) use Ctrl

回答10:

On ubuntu it's Ctrl + Shift + i

回答11:

Just right-click on the text and select "format code".

VS 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

回答12:

For some reason Alt + Shift + F did't work for me on Mac VSC 1.3.1, actually the command "Format Document" don't worked at all. But command Formatter worked very well.

So you can use by Command + Shift + P and type Formatter or make your own shortcut in Preferences/Keyboard Shortcuts Command + K Command + S then type Formatter and add your shortcut see example:

回答13:

Shift + Alt + f does the job just fine in 1.17.2 and above.

回答14:

On Visual Studio Code, Shift+Alt+F is doing what Ctrl+K+D is doing on Visual Studio.

回答15:

On Mac Shift+Alt+F works for me.

You can always check the key bindings in the menu:
Code -> Preferences -> Keyboard Shortcuts and filter by keyword 'format'.

回答16:

The format shortcut in C# didn't work for me until i installed Mono for Mac OS X, DNVM and DNX. Before i installed Mono, the auto-format shortcut ( Shift + Alt + F ) worked only for the .json files.

回答17:

While changing the default behavior for Visual Studio Code requires extension, you may override the default behavior in workspace or user level and works for most of the supported languages (I can guarantee html, javascript, c#)

Workspace level

Benefits

• Does not requires extension
• Can be shared among team

Outcomes

• .vscode/settings.json is created in project root folder

How To?

1. Go to: 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: 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

回答18:

Formatting code in Visual Studio.

I have Try to format in Windows 8.

Just follow screenshots.

step1. click on view on top menu bar then click on Command Pallete.

2. Then Textbox would appear where we need type Format

shift+alt+f

回答19:

File-> Preferences -> Settings

"editor.formatOnType": true

when you enter the semicolon, it's gonna be formatted

回答20:

Just install Visual Studio Keymap by Microsoft. Problem Solved. :p

回答21:

In Mac, use ⌘+K and then ⌘+F.

回答22:

Select the text, right click on the selection and select the option "command palette"

A new window open, search for "format" and select the option which has formatting as per the requirement.

回答23:

Default this key was not working for me on HTML, CSS, JS document.

After searching I found this popular plugin JS-CSS-HTML Formatter with 133,796 installs after installation just reload windows and hit CTRL + SHIFT + F and it worked!

回答24:

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.

回答25:

Simplest way i use in vscode (ubuntu) is :

Select text ,which you want to format with mouse .

Right click and choose "format selection"

回答26:

If you want to custom the style of format-document, you should use Beautify extention.

Refer to this screenshot:

回答27:

not this one,use this: File --> Preferences --> Workspace Settings "editor.formatOnType": true

回答28:

For those that want to customize what JavaScript files to format, you can use the any extension on the JSfiles property 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, you can add in XML to the HTML option.

回答29:

Use extension..

Enables auto formatting of the code when you save a file.

Launch VS Code 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

回答30:

Visual Studio Code LINUX:

Ctrl+[ to unindent block of code and

Ctrl+] to make a mass indentation