Customizing Visual Studio Code (VS Code) | Coding Thunderz | VS Code Improvements Blogs

Customizing Visual Studio Code

Visual Studio Code is a source-code editor made by Microsoft for Windows, Linux and macOS. Features include support for debugging, syntax highlighting, intelligent code completion, snippets, code refactoring, and embedded Git. Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code is free and you can download it from https://code.visualstudio.com/download. You will definetely find it a better IDE.

Now let's come to our topic. We now that Visual Studio Code has some best customizing elements. These are:

• Themes
• File Icons
• Product Icons
• Fonts
• Font Ligatures
• Any Many Others...

Let's talk about them one by one

Customization By Themes

Themes are the first thing to be changed in vs code. To Change Themes,

1. Go to Extensions Buttons in the left panel. (Usually the fifth button)
2. Search for "category:themes"
3. Install a theme or your choice. Some of the best themes are Cobalt2, Abyss, Dracula, Monokai, Shades of Purple, Tommorow night blue, etc. If you know some other good theme names, comment them below.
4. Now, after installation of the theme, click on the gear icon at the bottom of the left panel, click on Color Theme and select the color theme you have installed.
5. Your theme is now active. Go and do something awesome.

File Icon Customization

We can also change our file icons of different file types.

1. Go to Extensions Buttons in the left panel.
2. Search for "tag:icon-theme".
3. Install an extension of your choice. Some of the best file theme extensions are vscode-icons, Material Icon Theme, VS Code Great Icons, Monokai Pro, etc.
4. After the installation, apply the file icon theme, and enjoy.

Product Icons Customization 

Icons, like the terminal icon, gear icon, explorer icon, extension icon, and all the extra icons in the vs code, are called as product icons. Let us customize them.

1. Go to Extension Bar and search for "tag:product-icon-theme".
2. Install the extension of your choice.
3. Apply and enjoy.

Changing Fonts in VS Code

Fonts can be changed in vs code, which is a great feature of an IDE.

1. Click on the gear (Settings) icon. Click on the settings button.
2. Search for font.
3. In the section of Editor: Font Family, replace the existing font with your choice. Make sure that the font is installed in your pc. Some of the best fonts for VS Code are "Cascadia Code, Bahnschrift, Candara, Calibri, etc." You can choose any font of your choice. Cascadia Code also supports in the terminal.

Font Ligatures

This is a very exciting feature of vs code. In JavaScript, we have some syntax like, =>, ==, etc. Font ligatures can show this in symbolized form.

1. Go to settings, search for font ligatures.
2. Click on Edit in settings.json
3. Type "editor.fontLigatures: true". Note: Some fonts do not support font ligatures. Cascadia Code is a font that supports it.
4. Now, enjoy your coding.

Moving the Side Bar

The side bar contains the explorer, search, extensions, etc. buttons. Its position and visibility can be changed.

1. Click on the gear icon.
2. Click on the command palette.
3. Search for side bar.
4. Two options will be shown like this:
   • Toggle Side Bar Position
   • Toggle Side Bar Visibility
   Clicking on the first option will move the side bar to right/left. Clicking the second option sill hide the side bar.

Thanks for giving time to our website. You are always welcome here. 

If you think we should improve or add something else, please comment your vies below. We will definitely work on your comment.