Visual Studio Code is a fantastic tool that can be used to write code for Web Development, Python, and many other programming languages. It has become an essential tool for web developers thanks to its integration with Node.js, GitLab, Jira, and more.
But, there are many extensions for Visual Studio Code that are needed to boost your productivity. Let’s check out the best Visual Studio Code extensions.
Settings Sync
We’re starting with this handy extension first as it will save you time if you decide to try out any of the following. Settings Sync allows you to sync pretty much everything you customise in VS Code, from snippets, themes, icons, launch, keybindings, workspaces and even other extensions across multiple machines.
Benefits: saves you valuable time, gives you access to your preferred IDE from any device.
open-source, vscode, settings-sync, vscode-sync, programmer productivity
GitLens
GitLens is an open source extension that combines the capabilities of Git with VS Code. This is a powerful extension that allows you to see who, why, and how lines of code have changed over time, it helps you to visualise code authorship at a glance via Git blame annotations and code lens, seamlessly navigate and explore Git repositories, and a whole lot more.
Benefits: helps you to better understand your code, allows you to effortlessly explore the history and evolution of a codebase.
open-source, git, gitlens, vscode, annotation
Visual Studio IntelliCode
This extension aims to aid developers and programmers with AI-assisted code completion suggestions. It comes with default support for Python, TypeScript, JavaScript, React, and Java.
Benefits: saves you time by putting what you’re most likely to use at the top of your completion list.
javascript, typescript, python, artificial intelligence, javascriptreact
Prettier
Prettier is an opinionated code formatter that enforces a consistent style by parsing your code and reprinting it with its own rules that take the maximum line length into account, wrapping code when necessary.
Benefits: Having consistent formatting and styling across your code can save a lot of time, especially when collaborating with other developers.
javascript, typescript, formatter, prettier, vscode
Better Comments
Better Comments allows you to create more human-friendly comments in your code, categorising your annotations into alerts, queries, TODOs, highlights, etc.
Benefits: clear and digestible code will save lots of time for you and also for your team
formatter, typescript, javascript, cleancode, python
Bracket Pair Colorizer
This might be fairly obvious, but the Bracket Pair Colorizer colourises the opening and closing brackets so that you can identify matching brackets with colours. You can define which characters to match, and which colours to use.
Benefits: Saves you time, reduces confusion and generally makes your coding life easier
JavaScript, TypeScript, productivity, vscode, multi-root ready
Debugger for Chrome
The debugger is a VS Code extension to debug your JavaScript code in the Google Chrome browser or other targets that support the Chrome DevTools Protocol. It helps to debug eval scripts, script tags, scripts that are added dynamically, and setting breakpoints, including in source files when source maps are enabled.
Benefits: detect errors earlier on in the development process, gain useful information of data structures and allow easy interpretation.
debugger, chrome, javascript, code quality, devtools
Snippets
Code snippets are templates that make it easier to enter repeating code patterns, such as loops or conditional-statements. While VSCode includes built-in JS IntelliSense, Code Snippets enhance that experience by adding a slew of import/export triggers, class helpers, and method triggers.
Benefits: saves time and boosts productivity
snippets, javascript, productivity, typescript, vscode
Live Share
Visual Studio Live Share enables you to collaboratively edit and debug with others in real time, regardless what programming languages you’re using or app types you’re building.
Benefits: instantly and securely share your current project, share debugging sessions, terminal instances and more
debugger, collaboration, remote, clean code, code editor
Live Server
Live server launches a local development server with a live reload feature for both static and dynamic pages. Every time you save your code you’ll automatically see the changes reflected in your browser.
Benefits: spotting errors will be much quicker and it will be easier to experiment with your code.
keybindings, multi-root, debug, vscode, developer tool
Ponicode 🦄
Obviously, no VS Code extensions list would be complete without Ponicode. Ponicode allows you to create, modify and visualise your unit tests in seconds, boosting your coverage with AI-powered test generation.
Benefits: assists you in the task of unit testing, saving you time while ensuring your code is well tested
code quality, unit tests, javascript, python, typescript.
Markdown All in One
Markdown All in One is a single extension that takes care of all your markdown needs, such as auto-preview, shortcuts, autocomplete, etc.
Since its release in 2004, Markdown has become one of the most popular and preferred markup languages. Technical writers worldwide widely use Markdown for articles, blogs, documentation, etc., because of its lightweight simplicity and cross-platform usage. Its popularity has given rise to other variants of Markdown, such as GitHub Flavored Markdown, MDX, etc.
For example, to bold some text in Markdown, you can select that text and use the shortcut Ctrl + B to increase your productivity.
Icons
Having descriptive icons can help you differentiate between files and folders. Icons also make development more fun.
Here is a comparison between two VS Code tabs. One has icons, the other does not.
There are many icons extension that you can choose from. Popular icon collections include:
Prettier
Prettier is an opinionated code formatter. With more than 38.5k stars on GitHub, it’s one of the most popular code formatters available. Having consistent formatting and styling across your code can save a lot of time, especially when collaborating with other developers.
Consider the following code block:
You may notice a handful of formatting issues with this code, including:
- A mix of single and double-quotes
- Irregular use of semicolons (
;) - Improper indentation of the console statement on line 6
Here’s how Prettier would format and fix the above code:
This extension supports Prettier plugins when you’re using a locally resolved version of Prettier.
You can configure this extension further to suit your formatting needs and even trigger it with autosave.
Import Cost
Import Cost is an extension that shows you an estimated size of the import package in your code. When working on a project, it’s important not to compromise the user experience by importing heft packages. One way to avoid this is to keep track of the size of additional dependencies in your code.
When the import is too large, Import Cost warns you by displaying the size in red. You can configure what size should be considered small, medium, or large.
Profile Switcher
Profile Switcher enables you to switch between and set up multiple profiles in your VS Code with various configurations and settings.
This extension is especially useful for content creators such as technical bloggers, YouTubers, etc. Instead of changing your settings/configurations every time you need to show your VS Code screen, you can set up a profile required settings.
Here’s how to switch between two profiles: Default and Content Creation.
Conclusion
Visual Studio Code is an excellent text editor, but sometimes you need to extend it with some powerful extensions to get the most out of it. You can feel overwhelmed by the sheer number of extensions that you can choose from, but if you carefully consider your needs then you will be able to find the best visual studio code extensions for your development environment.