Visual Studio Code is undoubtedly one of the best lightweight Code Editor to use in 2019. Microsoft released it in 2015 as an open-source project, and since then it is backed by tremendous community support. It has built-in Git support, an advanced debugger, syntax highlighting, snippets, code refactoring, smart auto-completion, a powerful search tool and supports much customization. Visual Studio Code is available on Windows, Linux, and macOS. I had been using Sublime Text for a couple of years before I switched to Visual Studio Code a year ago and there is no going back. I am just loving this and am sure you will too.
In this article, I will share some of the best Visual Studio extensions to boost your workflow and productivity.
Contents
How to Install Visual Studio Extensions
Before we dive into the list of some of the best Visual Studio extensions, lets first learn how to install an extension. Installing an extension in Visual Studio Code is straightforward like any other editors.
To install an extension, press Ctrl+Shift+P inside VS Code to open Quick Open Panel and select Install Extensions. After that, you can search for an extension to install it.
Alternatively, you can type the command
ext install extensionName
and press Enter key to install any extension.
25 Powerful Visual Studio Extensions
1. Live Server
When you are working on your web projects after you make changes to your files, you switch to the browser and refresh to see the changes. This process is endless and consumes a lot of times. Have you ever wondered if you could automate this process, i.e., whenever you make the changes to your files, the browser automatically refreshes to show the changes?
That’s when Live Server comes to rescue you. Live Server launches a local development server with a live reload feature both for static and dynamic pages. Now, whenever you make changes to your code and save the files, it will reflect in your browser. Live Server is thus one of the best Visual Studio extensions to install to save your time and boost productivity.
Check out the extension here.
2. Material Icon Theme
If you are a fan of Google’s Material design, you should install this extension. Material Icon Theme changes the default icon look of your project file structure. This extension is useful to identify the file type based on an icon when you are looking on big projects with lots of files.
Check out the extension here.
3. Peacock
If you are working on multiple projects at the same time in different windows, it can be confusing switching between the projects. For instance, while I am working on WordPress themes and transferring the static HTML markup to make it dynamic, I often get confused switching the windows. Peacock tends to solve this problem by letting me assign a color to the toolbar for my projects. Assigning different colors like orange to static HTML project and blue to the WordPress window makes the life more comfortable.
If you work on multiple projects at once, Peacock is one of the Visual Studio extensions to install. Read more about this extension here.
4. Project Manager
One of the tedious task that as a developer, I feel is to navigate through different folders in file explorer to add in the editor. It is even more frustrating when you have to switch between projects more frequently. Thankfully, Project Manager fixes this. With this extension, you get an extra menu in the sidebar where you can list all your projects. With a single click on the project folder, you can quickly switch between your projects.
Project Manager is one of the best Visual Studio extensions for you if you work on multiple projects and wants to stay organized and more efficient at the same time. You can read more about this extension here.
5. TODO Highlight
During my projects, I often create a TODOs to keep track of some codes and come back later if any changes needed to do. Many times, I have forgotten to review them and push the code to production. TODO highlight helps you avoid such mistakes in your development.
TODO highlight makes your TODOs standout making it easier for you to edit and implement the changes. You can toggle the highlights, list all the highlighted annotations and reveal them from the corresponding files. Check out the extension here.
6. Prettier
As the name suggests, Prettier makes your JavaScript, TypeScript, and CSS prettier. You can focus on your coding, and Prettier will perform auto-formatting/indentation of your code to ensure that it compiles without any errors.
You can easily format your document with the command: Ctrl + Shift + P -> Format Document or format a given selection of code with shortcut Ctrl + Shift + P -> Format Selection. I have been personally using this for my project and found it to be useful Visual Studio extensions. You can give it a try, and you won’t be disappointed.
You can read more about this extension here.
7. Browser Preview
If you are working on any FrontEnd projects, Browser Preview extension will boost your productivity. This extension enables you to open a real browser preview inside your editor where you can see the changes reflected as you save the code and allows you to debug. After installation, it adds the menu in the sidebar making it easier to toggle.
I use Live Server for most of my projects and combine with Browser Preview; it just makes me more efficient. I don’t need to switch to browser tabs anymore to see the changes. The changes are automatically refreshed in the Browser Preview alongside my editor.
Check out the extension here.
8. Bracket Pair Colorizer
With tons of nested code, it is tough to keep track of matching brackets. Bracket Pair Colorizer helps you distinguish the pair of parentheses, square brackets, and curly braces in your code by assigning different colors to them. Even if your code is not formatted correctly and you have messed the indentation, this extension will help you keep track your code and avoid confusion.
Currently, by default it supports (), [], and {} but custom bracket characters can also be configured. It supports all the languages supported by Prism.js. Check out this extension here.
9. Code Time
Code Time is an open source plugin that provides programming metrics in your code editor. After the installation of the extension, you will be prompted to sign up for an account. After you successfully signup for the account, you can press Ctrl + Shift + P and enter Code Time to launch the dashboard. You will see something like this:
The extension automatically keeps time records of your projects, monitors the best time to code and help you learn more from your stats. To continue your boost your workflow with music, it also lists the weekly global top 40 songs. Code Time is handy Visual Studio extensions if you want to keep records of the time you spend coding.
Read more about Code Time here.
10. GitLens
Git plays a crucial part in any developer’s life. Managing the projects had never been easier before the introduction of the revolutionary Git. GitLens takes a step further and makes it easier to understand and code better. It provides you a glimpse in your code editor why a code block or line has changed and who committed the code.
Further, you get blame information, line and file history, commit searching and many more. This extension works best for those who are working on a project with multiple collaborators. You can find more information about GitLens here.
11. Can I Use
Can I Use is the go-to browser compatibility checker for web developers. The website lets you check the browser support for HTML, CSS, SVG and JavaScript elements, properties, function, and many other syntaxes.
With this extension installed in your editor, you don’t need to visit the site anymore. By pressing Ctrl + Shift + I (Windows) or Ctrl + C (macOS), you can check the compatibility with different browsers. It is useful for Visual Code extensions to make your frontend projects cross-browser compatible. You can read more about this extension here.
12. CSS Peek
Keeping track of codes in your stylesheet is tough. This extension allows you to see the CSS code of the HTML element without opening the stylesheet. Once you enable this extension, you can press Ctrl key and click on the class name of an ID of the HTML element to see the code. A small dialog box will appear where you can inspect the code and modify if needed.
It saves a lot of time going back and forth in your HTML and CSS files and hence enhances your productivity. Check this extension here.
13. Auto Rename Tag
This extension is a simple but yet handy one. If you need to rename an element in HTML, you need to rename either opening or closing tag, and it will automatically rename the other corresponding tag. This extension works for HTML, XML, PHP, and JavaScript and removes the extra effort to rename the tag twice.
Check out the extension here.
14. Auto Close Tag
As the name suggests, it automatically closes your HTML tags. Besides, it automatically places the cursor between the opening and closing tags making it easier to start typing. This extension supports some other languages like XML, PHP, Vue, JavaScript, JSX, TSX and so on. The extension is configurable to your preferences. Install this extension and avoid the extra efforts of typing every closing tag.
Check out the extension here.
15. Slack Theme
Slack Theme is a color scheme inspired by the Slack default themes. It includes ten different variations including light and dark mode. I use Aubergine and loving it. Check out the extension here.
16. Polacode
Have you ever wondered how people share the fancy code screenshot in their website and social media accounts? It is most likely they came from Polacode extension. Polacode is useful Visual Studio extensions inspired from Carbon ( a website for taking a screenshot of codes). This extension supports almost all popular languages and offers different color schemes to choose.
You need to copy the code, launch the extension, paste the code and click to save your image. Try this extension and share your code on your blog or social accounts. Check more about the extension here.
17. Better Comments
How often do you comment in your code? It is considered a good practice to add comments for future reference to yourself and for others who read your code. The Better Comments extension allows you creating more human-friendly comments in your code. With the help of this extension, you can categorize your annotations into Alerts, Queries, TODOs, Highlights and so on. There are different color codes for questions, alerts, and highlights. You can also define your color scheme.
This extension helps you organize your comments to reference the unfinished tasks or changes needed to do quickly. Overall a handy extension to install to organize your codes. Check out the extension here.
18. One Dark Pro
Initially designed for Atom IDE, One Dark Pro is the most downloaded and popular theme for VS code. This theme has downloaded more than nine millions times. If you love dark theme while coding, you will surely love this theme.
Check out this extension here.
19. WakaTime
Like Code Time, WakaTime is another popular extension that provides metrics, insights and time tracking generated from your programming activity directly from your IDE. You need to install the extension, signup for the account and authenticate with your API key.
All your programming activity will display in WakaTime dashboard. Unlike Code Time, you will have to visit their website to see your stats. They do offer premium plans if you want more insights and metrics. WakaTime can also integrate with all major IDEs including Atom, Sublime, VS Code, JetBrains IDEs, Android Studio and many more.
Check out the extension here.
20. Code Spell Checker
As a programmer, we can admit the fact that we often make a typo error and when the code doesn’t work, we spend a lot of time figuring the mistake. The most common error occurs due to misspelled variables. With Code Spell Checker extension, you don’t have to worry about it.
Code Spell Checker underlines the words that it doesn’t recognize in its dictionary files. It supports languages like PHP, Python, JavaScript, TypeScript and many more. It has in-built different languages dictionary like Dutch, French, German, Russian, Spanish, Swedish along with Medical Terms.
Check out the extension here.
21. Color Highlights
Color Highlights is a simple extension that highlights the color in your CSS and SASS files. It helps you recognize the color used in your stylesheet document visually.
Check out the extension here.
[rara_box box_color=”info-box”]Also read: How to automate tasks in Windows PC?[/rara_box]
22. Icon Fonts
With so many font libraries with tons of class names, it is challenging to memorize and typing it is a tedious task. Icon Fonts is popular Visual Studio extensions that autocomplete the icon font class name. It supports all the popular font libraries like FontAwesome, Bootstrap Glyphicons, Ionicons, Material Design Icons and many more. This extension is also available for Atom and Sublime.
Check out the extension here.
23. Bookmark
Like every IDE, VS Code has line numbers, but Bookmark allows you to add bookmarks to your code, making it easier to navigate back and forth between different files quickly. It reduces the efforts to search through the code. It also supports a set of selection commands allowing you to bookmarked lines and regions between bookmarked lines, quite helpful for log file analysis.
It adds a menu in the sidebar from where you can see all your bookmarks and navigate easily with a single click. When you are working on a large project, Bookmark is the Visual Studio extensions that you should install to manage your workflow.
Check out the extension here.
24. Path Intellisense
While working on large projects, it is tough remembering specific file names and directories. This extension will do this task for you. As you start typing the path, it will show the directories and filenames. It saves a lot of time from spending time navigating through the file explorer.
Check out the extension here.
25. Shades of Purple
If you are a fan of purple color, then Shades of Purple is one of the extension you should try. The extension is optimized for markdown syntax and comments. The theme chooses the dull color for comments and markdown syntax, so these syntaxes that don’t matter to code is not dominant and blend with the theme.
Check out the extension here.
Wrapping Up
With a vast ecosystem of extensions and plugins for Visual Studio Code, you can significantly customize your development environment to boost your workflow and productivity. These are a few Visual Studio extensions out of thousands of extensions available. All the extensions mentioned above may not be useful for you, but you can try the one that you find helpful and give it a try.
Was this list of extensions helpful? If I missed any cool extensions in the above list, please mention in the comment section below.
