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?
This question is related to
code-formatting
visual-studio-code
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" }
Shift + Alt + F does the job just fine in 1.17.2 and above.
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.
Menu File → Preferences → Settings
"editor.formatOnType": true
When you enter the semicolon, it's going to be formatted.
Alternatively, you can also use "editor.formatOnSave": true
.
Not this one. Use this:
Menu File → Preferences → Workspace Settings, "editor.formatOnType": true
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.
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
For Fedora
File
-> Preferences
-> Keyboard shortcuts
.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
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:
editor.action.formatDocument
or editor.action.formatSelection
Just install Visual Studio Keymap (Visual Studio Keymap for Visual Studio Code) by Microsoft. Problem Solved. :p
On Ubuntu it's Ctrl + Shift + I.
In Visual Studio Code, Shift+Alt+F is doing what Ctrl+K+D is doing in Visual Studio.
The right key combination is Shift + Alt + F.
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!
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 → Preferences → Keyboard Shortcuts → Command + K Command + S then type Formatter and add your shortcut.
See an example:
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
In Mac, use ?+K and then ?+F.
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".
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'.
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.
If you want to custom the style of format-document, you should use Beautify extention.
Refer to this screenshot:
Visual Studio Code on Linux:
Ctrl + [ to unindent block of code and
Ctrl + ] to make a mass indentation
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.
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#).
Benefits
Outcomes
.vscode/settings.json
is created in the project root folderHow To?
Go to: Menu File → Preferences → 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).
Benefits
Outcomes
settings.json
is modified (see location by operating system below)How To?
Go to: menu File → Preferences → 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:
%APPDATA%\Code\User\settings.json
$HOME/Library/Application Support/Code/User/settings.json
$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.
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.
Source: Stackoverflow.com