15 Best VScode Extensions You Need To Know

You may also like: ☞ Top 10 Extremely Helpful Visual Studio Code Plugins for Programmers

Since its introduction, Visual Studio Code has very quickly become one of the most widely used lightweight text editors. Despite it being a lightweight editor, it has the potential of a full-fledged IDE, thanks to its vast library of extensions.

These extensions make the VS Code one of the most popular and easy to use text editor among the community.

Here you will find a list of useful extensions for VS Code for both functional advantages and also to add some visual flair to your workspace.

1. Material Theme

Screenshot by author

This extension installs different themes for the VS Code that allows you to customize the look of the whole editor according to your preference.

Some of the themes that are part of the extension (Screenshots by the author)

You can start using the different themes that are available by going to the Settings icon at the bottom left and clicking on the Color Theme.

Color Theme option in Settings (Screenshot by author)

You can see a preview of each theme by using the up and down arrow keys, and you can press enter once you chose to apply the currently selected theme.

2. Material Icon Theme

Screenshot by author

This extension installs different icons that allow you to view icons with a clean look for directories and various types of files. You can see an example of a few icons for different types of files and directories as shown below.

Different Icons (Screenshot by author)

The changes in the displayed icons will take effect immediately after you have installed the extension.

3. Prettier

Screenshot by author

This extension helps you to format the code in a clean and indented manner, and it supports a wide range of technologies and programming languages.

You can format the code in either of the two ways:

1. Manually by selected all the content of the file and then pressing option/ctrl + shift + F keys. If prompted to choose a default formatter, please choose prettier from the dropdown.
2. Automatically, on saving the content of the file, for this option, you need to make a small configuration change by going to the bottom left corner and clicking on the gear icon, then clicking on Settings.

Now search for ‘format on save’ and enable the feature as shown below.

Settings for formatting on save (Screenshot by author)

Now, once you have checked this option, whenever you save any changes content of the file will be automatically formatted.

4. Bracket Pair Colorizer 2

Screenshot by author

This extension will assign a different color to each set of brackets for keeping track of the start and end of a statement, a block of code, or a function. It also surrounds the whole block within the set of brackets with the same colored line. This line is visible on the left side of the code whenever you place the cursor inside that block of code, as shown below.

Different colors for different bracket pairs (Screenshot by author)

You will be able to see the changes take effect directly once you have installed the extension.

5. Live Server

Screenshot by author

This extension comes in very handy in web development. Whenever you are working with HTML, CSS, and JavaScript files, this extension allows you to see the latest saved changes take effect in the webpage without having to refresh the browser each time.

When you want to start using this extension, open an HTML file, and click on the Go Live option at the bottom right corner.

Go Live Option (Screenshot by author)

It will open and new browser window and watch for any code changes made to the related files.

6. Code Runner

Screenshot by author

Whenever you need to run a small program or a code snippet written in any of the popular programming languages, this extension will be helpful.

When you want to run a program, right-click anywhere on the file to see the option Run code. On clicking on it, the program will run, and the result will display in the Output tab at the bottom section of the editor.

7. Better Comments

Screenshot by author

This extension enables users to write comments in a human-friendly way. According to the extension, the different categories of comments are:

• Highlights (*)
• Questions/Queries (?)
• TODOs (TODO)
• Warnings (!)
• Parameters (@param)
• Code statements could also be styled in a way to make it clear the code shouldn’t be there (//)

A sample of categorized comments will be as seen below.

Sample output with different comment types (Screenshot by author)

Users can also add new comment styles in the settings.

8. Auto Rename Tags

Screenshot by author

When you work with HTML/XML files, this extension will automatically rename the closing tag once you have renamed the opening tag.

This extension will be helpful in case if you forget to change the name of the closing tag or if the closing tag is far below the opening tag on the page.

This functionality will be available as soon as you have installed the extension.

9. Quokka.js

Screenshot by author

This extension is a productivity tool for JS and TypeScript. By using this extension, you will be able to see the runtime outputs of a program on the fly next to your code.

You can start using this functionality by clicking the cmd/ctrl+shift+P keys and then searching for Quokka.js in the command palette. Now you will be able to view the list of all the available commands in the dropdown.

Available options for Quokka.js (Screenshot by author)

Once you start running quokka.js on an existing file or a new file, the runtime output values are shown in the editor as seen below.

Outputs displayed at the end of each statement (Screenshot by author)

10. CSS Peek

Screenshot by author

This extension allows the user to view CSS rules written for an id/class identifier for a particular HTML element from the HTML file itself. This extension helps you to do three things:

• Peek: you can peek into CSS rules written for that identifier by holding cmd/ctr and hovering over the identifier
• Inline Edit: You can also edit the CSS rules on the fly within the HTML file using cmd/ctrl+shift+F12 keys
• Go To: You can directly go to that particular set of CSS rules for that identifier in the CSS file using the F12 key

11. Remote SSH

Screenshot by author

You can use this extension to connect to a remote server from the VS Code and open it as a workspace within the editor.

It is quite useful for development as well as troubleshooting any issues on the server. You can develop and deploy on the same environment and operating system within the editor as you have directly connected to the server.

You can start using it by clicking on the green option at the bottom left as shown and adding the host address.

Option to connect using Remote SSH

12. CodeSnap

Screenshot by author

This extension allows you to take quick and simple snapshots of the code. It is easy to use, and you can also customize the styles on how the code snaps look by going to Settings and searching for Codesnap under it.

Some settings for Codesnap (Screenshot by author)

Now, whenever you want to take a snapshot of your code, right-click anywhere in the editor, and you will be able to see the CodeSnap option at the bottom. Once you have clicked on it, you will be able to see a code snap preview open in a separate tab, as shown below.

Codesnap preview (Screenshot by author)

Now you can either select the complete file content or a section of it to be part of the snap. Once you select the content, click on the capture button below the preview to save the code snap.

13. Markdown All in One

Screenshot by author

This extension allows you to make writing a markdown very easy by providing many helpful features. You can use the below keyboard shortcuts for quickly editing the content.

Some keyboard shortcuts for Markdown All in One (Image by author)

The extension also supports Auto-Completion, Github flavored markdown, Math expressions.

It also allows you to preview the final output and also allows you to print markdown to HTML.

For details related to all the features supported by the extension, please see the complete documentation here.

14. Bookmarks

Screenshot by author

This extension allows you to add bookmarks to the code at specific lines for different files in your workspace.

Added bookmarks visible on the left sidebar (Screenshot by author)

You will also be able to add, remove, and switch between different bookmarks. You can do this by right-clicking anywhere in the code and selecting one of the below options.

Options available for bookmarks (Screenshot by author)

You can also see all the bookmarks as a list once you click on the bookmarks tab in the left panel, and you can switch between each of them from here as well.

Bookmarks tab in the left panel showing all the bookmarks

15. Code Spell Checker

Screenshot by author

This extension checks for common spelling mistakes, including the words written in different cases(Capital case, Camel case, Kebab case, etc.).

A small squiggly underline will appear under wrongly spelled words, and a little light bulb will appear on the left side before the code. When you click on it, you will be able to see the suggestions for the correct spelling as shown.

Suggestions for wrongly spelled word (Screenshot by author)

FThese were the list of different extensions that I found to be useful from both a visual and functional standpoint. I hope you find a few of them to be helpful in your regular development workflow as well.

I hope you liked this article, and thanks for reading!

This article was originally published on medium.com

#web-development #coding #front-end-development #programming