Learn the shortcuts to format and indent the source codes (such as Java, C++, HTML, XML, JSON and others) in Visual Studio Code editor. Also, learn to install the formatter plugin for a specific language if it is not installed already.
1. Shortcuts to Format Source Code
The followings are the OS-specific keyboard shortcuts that can format the code for all programming languages in VSCode.
On Windows -> Shift + Alt + F
On macOS -> Shift + Option + F
On Linux -> Ctrl + Shift + I
If we do not want to use keyboard shortcuts, we can use the mouse shortcut as the following Menu item to run the default configured formatter for the selected file type.
Right click on the file > Format Document
2. Configuring Missing Formatter
If we run the formatter shortcut and there is no formatter configured for the file type, then we will get a small popup asking to install the formatter plugin.
Once we click on the popup, we will get a list of recommended plugins. You can select and install any plugin of your choice by clicking on the “Install” link of the plugin.
For example, if we are installing for an XML file then a similar list of XML formatter plugins will appear on the left sidebar.
After the plugin is installed, we can rerun the formatter shortcode, and the code will be formatted in the editor.
3. Check for Selected Code Language
It is important that the selected code language in the Editor has to be correct. Code formatting shortcuts won’t work if plain text is selected. Only after switching to the appropriate language will format the selected text.
In most cases, VSCode will automatically detect the file types, still, we can change the language selection by clicking on the language and selecting from the available languages.
4. Conclusion
In this short tutorial, we learned the keyboard and mouse shortcuts to format the code in Visual Studio Code. We also learned to install the missing formatter for a language.
Happy Learning !!
Comments