10 Top Visual Studio Code Extensions in 2020
Recommended VS Code extensions
Visual Studio by Microsoft is one of the top integrated development environments (IDEs). It enables developers to integrate their existing development suite with other applications, adding a lot of features in the process to boost your productivity. As a part of Microsoft’s efforts to open source their code, Visual Studio is available as free and open-source software.
One reason behind the popularity of Visual Studio is its extensibility with the help of plugins and extensions. These add ons enhance the core functionality of the IDE enable you to make your development process more efficient and convenient.
If you’re reading this, that means you’re always on the search for tools that make coding more efficient and fun. One awesome tool that does just that is Bit (Github).
Bit makes it easy to share and reuse components across projects so that you and your team deliver faster, and build apps that scale. It manages your reusable components, from local environment, all the way to their shared component collection on Bit’s component hub.
1. Import Cost
In the development process, you may often find yourself adding dependencies to your project. While modular development is a crucial part of software development today, it is a good idea to ensure that you are prudent with your imports. The Import Cost plugin for JavaScript and TypeScript allows you to be wary of any dependencies in real-time.
Import Cost shows the size of a dependency inline when you are adding it to your code. It is a lightweight plugin that provides foresight and helps in efficient dependency management. The documentation lists down various import syntaxes for which this plugin shows the size of dependencies.
Here is a post detailing the motivation behind this plugin by the original creator.
2. File Utils
While Visual Studio’s core functionality works well when coding on a file, you may feel the need to enhance the abilities to manage multiple files in your project and its dependencies. The File Utils extension enables you to perform file operations through the command palette.
You can bring up the command palette and select a file to perform simple file operations on it. You can duplicate (copy), move, delete, and rename a file, in addition to a basic folder related operations. It is a useful plugin that lets you manage your project files without leaving the confines of the visual studio.
3. Project Manager
While the File Utils extension lets you perform simple file operations, the Project Manager plugin enables you to go further in the management of multiple projects. It first adds a new sidebar to enable working with multiple projects. This extension helps you manage your Git, SVN, or Mercurial repositories as well. It further allows us to manage remote repositories too.
In addition to the GUI based features, this extension adds commands to work with projects too. You can tweak the settings to further customize its features to your liking.
With advanced features like remote repository management and interactive commands, the Project Manager extension provides an important arsenal in your tool to enhance your development cycle.
4. SVG Viewer
SVG stands for scalable vector graphics, and SVG files are text files that store vector images for the web. If you open an SVG file in a text editor, it typically displays the textual content of these files. If you are working on editing these files directly, you may wish to view how such files are rendered by Visual Studio.
The SVG Viewer plugin allows you to visualize SVG files, thereby saving you the time to use a different application to review your work. It essentially saves up time when you are working on making quick edits to SVG files.
5. Code Spell Checker
A bulk of errors that developers get are often solved by correcting spelling mistakes in variable, function, and package names. Further, you may also make spelling errors while writing a comment, description, or documentation. This package helps in highlighting errors in your file. This package helps check your spellings in a variety of popular programming languages. You can also tweak a setting to make the code spell checker package work with specific file types.
While it has support for English (US) and English (GB) when you install it, add on dictionaries are available for eight languages and medical terms. It makes a small, yet robust addition to your arsenal of best Visual Studio extensions.
6. Remote — SSH
Due to the distributed nature of development, you may need to login to a remote server to update and test your code. While it can easily be managed by a third party SSH client, there is a Visual Studio extension that allows you to remotely work on servers without having to leave the application altogether.
The Remote — SSH plugin by Microsoft allows you to connect to a remote development environment, which removes the need to have any code in your local system altogether. It also allows you to swap between multiple remote environments, letting you multitask between remote systems. Additionally, this plugin has support to connect to Linux, Windows, or macOS based remote systems. Development on remote servers is critical nowadays, making the Remote — SSH plugin an absolutely necessary Visual Studio extension.
7. Trailing Whitespace Visualizer
A good programming practice is to ensure that your code does not contain any trailing whitespace. Trailing whitespace consists of any spaces or tabs (which are essentially invisible) after the last non-whitespace character on any line of code before the new line character. The Trailing Whitespace Visualizer plugin highlights any such trailing whitespaces in your code.
Trailing whitespaces are totally unnecessary additions to your code and increase your file size, so it’s a good idea to remove them. This plugin helps highlight them not just in your code, but when you are working with code written by other team members.
8. Debugger for Chrome
When you are working with frontend JavaScript code, a normal way to test whether your code works is to assess it on a browser. Chrome Dev Tools provide a useful way to debug JavaScript through the console. The Debugger for Chrome plugin integrates Visual Studio to Chrome or a Chromium-based browser that supports the Chrome Dev Tools Protocol.
There are many debugging features that let you identify bugs in your code, without having to leave your IDE. In short, the Debugger for Chrome extension leads to a time-saving process in a commonly used debugging process.
9. ESLint
ESLint is a static JavaScript code analyzer. It scans through your code and finds syntactical errors and inefficient programming practices. The ESlint Visual Studio extension integrates ESLint with your Visual Studio IDE to analyze your JavaScript code on demand. It requires ESLint to be installed locally or globally in your system, though.
10. Live Server
The Live Server extension for Visual Studio enables you to run a local development server to test your code. It has a live reload feature for both static and dynamic web pages.
The extension enables you to customize advanced features such as port number, server root, and default browser. It is CORS enabled and supports HTTPS and proxies.
Final Thoughts on Best Visual Studio Extensions
In this post, we have covered ten of the best Visual Studio extensions in 2020. The aim of each extension is to introduce efficiency in your coding workflow by saving time. We hope that this list is useful for you by making the development cycle lean and well-organized.
