Visual Studio Code extensions provide a fantastic way to power up your development experience. If you are on Windows, Mac, or Linux, you can use Visual Studio Code. Just go to the Visual Studio Code download page, and get a copy of Visual Studio Code for your operating system of choice. In this article, we will specifically have a look at 10 Visual Studio Code extensions that will make you more productive and supercharge your workflow.
Not quite what you are looking for? Try these links instead:
- Installing Visual Studio Code on Linux
- Visual Studio 2022 Releasing this Summer
- Enabling C# 8 in Visual Studio 2019
This article might come across as a bit of a Visual Studio Code tutorial in places, but I wanted to make sure I covered all the bases.
What are Visual Studio Code Extensions
Visual Studio Code extensions increases the power and functionality of VS Code. It allows you to add languages, debuggers and a whole lot of other tools to your Visual Studio Code installation. Extension authors can plug into the VS Code UI and add functionality using the same APIs used by Visual Studio Code. I doubt that any two developers installation of Visual Studio Code is the same. VS Code’s rich extensibility model make it extremely flexible for adding additional features via extensions.
Where do I get Visual Studio Code Extensions?
Finding extensions for the Visual Studio family of products (including Visual Studio extensions) is easily done from the Visual Studio Marketplace. The Visual Studio Marketplace will highlight featured extensions as well as trending extensions. You can view the highest rated, or most popular extensions and even filter by category or collection. You can also find the available extensions inside Visual Studio Code by clicking on the extensions icon.
There you can search Visual Studio Code extensions in the Visual Studio marketplace. We will be having a look at a few of these extensions in this article. Before we do this, however, let’s answer another question; what is the difference between Visual Studio Code and Visual Studio.
Visual Studio Code vs Visual Studio
Visual Studio is described by developers as an Integrated Development Environment that you can use to create applications for devices, the cloud, and a lot in between. It is also available as Visual Studio for Mac on macOS. Visual Studio Code, on the other hand, is a powerful and lightweight source code editor available on Windows, macOS, and Linux. Choosing between the two is not always just a case of choosing between a lightweight editor and a heavyweight IDE. It’s not a clear-cut case of Visual Studio vs Visual Studio Code. For test-driven development, Visual Studio will work right out of the box. Visual Studio Code, however, has a lot of test-driven development extensions that you can include. The same can be said for databases. Visual Studio does a good job when you need to work with databases, but VS Code yet again has a lot of database extensions available.
Other Options
The current version of Visual Studio is Visual Studio 2019 and soon, the new version, Visual Studio 2022 will be released. To grab a copy, head on over to the Visual Studio 2019 download page and have a look at the download options available. You can get Visual Studio free as Visual Studio Community 2019. There are also Professional and Enterprise versions of Visual Studio available. Whichever Visual Studio download you choose, will depend greatly on your circumstance and budget. For most indie developers on Windows, Visual Studio Community will suffice. You can get a copy of the Visual Studio 2019 Community download from the same Visual Studio download page linked above.
Increase your Productivity with these Visual Studio Code Extensions
The following Visual Studio Code extensions are rated 5 stars and have thousands, sometimes millions of downloads from the Visual Studio Marketplace. These are my top 10 extensions, and those which I of course find particularly useful. Your mileage might vary, based on your particular situation or technology stack.
Git Graph
Display your repository as a git graph, and perform Git actions from the graph. Actions include:
- Create, checkout, delete, fetch, merge, pull, push, rebase, rename, and reset branches
- Add, delete, and push tags
- Checkout, cherry-pick, drop, merge, and revert changes
- Clean, reset, and stash uncommitted changes
- Apply, create branch from, drop, and pop stashes
- View annotated tag details
- Copy commit hashes, and branch, stash, and tag names to the clipboard
You can find Git Graph at the following locations:
Speaking of GitHub, did you know that you can download and install GitHub for desktop? It is available on Windows and macOS making this GitHub install a must-do for many developers.
Rest Client
Here is a Visual Studio Code extension that many of you (me included) will find extremely useful. Rest Client allows you to perform HTTP requests and view the responses directly inside Visual Studio Code. I am a big fan of Postman, but I can see the benefit of this because it allows me to stay in one workspace instead of continually having to switch between Postman and Visual Studio Code. Some of the main features include:
- Send HTTP requests in the editor and view the response in a separate syntax highlighted pane
- Do GraphQL queries and author GraphQL variables in the editor
- Run cURL command in the editor and copy HTTP requests as cURL commands
- Authentication support for Basic Auth, Digest Auth, SSL Client Certificates, Azure Active Directory, Microsoft Identity Platform, and AWS Signature v4
- Use variables in any place in the request (URL, Headers, or Body)
- Generate code snippets for HTTP requests in Pythos, JavaScript, and more.
You can find Rest Client at the following locations:
Did you know that GitHub was founded in April 2008? Today, it hosts more than 100 million repositories, of more than 3 million organizations for more than 56 million developers.
Syncing
Have you got multiple development machines? Perhaps you have a development machine in your office, but also a laptop that you like to work from at home for personal projects. Now, with Syncing you can synchronize all your Visual Studio Code settings across multiple devices using GitHub Gist. Features include:
- Uploading user settings, keybindings, extensions, locales, and snippets
- Keybindings for macOS and non-macOS will be synchronized separately, in case your machines have different operating systems.
- Exclusion of certain Visual Studio Code user settings and extensions from being uploaded.
You can find Syncing at the following locations:
Have you ever used GitHub Gist? Some of you might be wondering what is GitHub Gist? In simple terms, GitHub Gist is a quick and easy way to share snippets of code or data with others. It can be a bit of code, a script, JSON data, or a SQL query. You can even create a GitHub Gist Resume using markdown. Best of all, you don’t need a GitHub Gist license, because gists are free to create. Developers can also use the GitHub Gist API if they needed to do some integration. Lastly, you can create public or private (secret) gists.
Just note, that if you don’t like GitHub Gists or don’t want to use this extension, you can turn on Visual Studio Code Settings Sync. I’ll discuss this further down in this article.
GistPad
Well, what do you know… there had to be one. As the name suggests, GistPad is a Visual Studio Code extension that allows you to edit your GitHub Gists and repositories right from within Visual Studio Code. You can open, create, delete, fork, and star gists and repositories. This allows you to edit your files as if they were local files. You can easily build up your developer library of code snippets, scripts, notes, etc. Features include:
- Managing gists
- Sorting and grouping gists
- When grouping is enabled, gists are grouped into the following built-in types such as a note, notebook, code snippet, or a custom type you specify.
- Pasting images directly into a gist file
- Creating scratch notes
GistPad is a super cool Visual Studio Code extension and you can find it at the following locations:
Did you know that you can analyze a repository’s metadata and generate an ordered list of authors by commit count? You can do this from the command line with the following command:
git shortlog -snYou can also exclude any merge commits by running the following command:
git shortlog -sn --no-mergesJust a note to the boss… productivity isn’t always measured in the number of commits 😉
Todo Tree
Yes, you can guess where this one is going. This Visual Studio Code extension uses ripgrep to search through your workspace and find comment tags such as TODO and FIXME. It then displays them in a tree view in the explorer pane. Clicking on a TODO in the tree will take you directly to the file containing that TODO. I love this extension from a visibility perspective. TODOs can almost get lost in the fog of code. Right-clicking the tree will display, among others, the following options:
- Hide a folder or file
- Display only a specific folder
- Only display a specific folder and its subfolders
- Show TODOs from the currently open file only
- Many more to mention
You can find Todo Tree at the following locations:
GitHub allows you to check its status via the GitHub Status page. Here you can see if all systems such as webhooks, pull requests, GitHub Pages, etc. are operational.
GitLens
This Visual Studio Code extension is touted as supercharging the Git capabilities built into Visual Studio Code. It allows you to better understand code by allowing you to glimpse whom, why, and when a line of code or code block was changed. You can also jump back through history allowing you to see how the code has evolved. This is a real productivity booster because it allows you to reveal the intent of the code as it progressed between commits. Some of the features include:
- Navigate backward and forwards through the history of a file
- A status bar blame annotation showing the commit and author who last modified the current line
- Powerful commands for navigating and comparing revisions
For a full feature list, and to get the extension you can find GitLens at the following locations:
Did you know that GitHub has a fuzzy file finder? Open any repository, and press t to access it. Start typing the name of the file to are looking for. Bob’s your uncle!
Better Comments
This is something that I feel will have an indirect effect on your productivity. This is because people take meaning from visual queues. Would you ever see a blue stop sign next to the road? Well, Better Comments allow you to create more human-friendly comments in your code. You can categorize annotations into alerts, queries, TODOs, highlights, or any other comment styles you require. You are even able to apply a strikethrough style to commented-out code. Some of the supported languages include:
- C
- C#
- C++
- COBOL
- CSS
- Dockerfile
- F#
- HTML
- Java and JavaScript
- Sass
- SCSS
- Swift
- XML
- YAML
There are a lot more languages supported. To see more, head on over to the following locations:
GitHub now includes a new item in the settings for Appearance. You are now able to set your theme preferences to a day theme, or a night theme. You can even make it sync with your system. A dark theme is especially nice for those late nights.
Developers are a different breed of person that can be found in the lonely hours of the night, faces illuminated by the glow of a computer screen, vamping on technology. It’s in our blood. Give us dark mode, and we’re happy.
Hungry Delete
The following Visual Studio Code extension is a clever one. I found it fantastic that something annoyed the author of this extension so much, that they invested time and effort into creating this extension for Visual Studio Code. It overrides the ctrl+backspace key binding to delete all whitespace before the cursor until it finds a non-empty character. This means no more hammering the backspace key to delete the whitespace spanning several lines. Features include:
- Hungry delete
- Smart backspace
- Keep one space
- Consider increase indent pattern
- Follow above line indent
You have to see it in action to realize how much time and effort this Visual Studio Code extension will save you. Check it out at the following locations:
On the 19th of April 2021, Ingenuity took its first flight in the Martian atmosphere. There is no doubt that this was an incredible achievement for the folks over at NASA and the Jet Propulsion Lab. But did you know that almost 12,000 developers on GitHub contributed to Ingenuity’s software via open source? Imagine that… your code, running on a device on another planet. This is simply incredible.
vscode-json
If you work with JSON at all, and I am sure that at some point in your career, you will, then this Visual Studio Code extension will come in quite handy. It’s a small and simple extension, but one that allows you to beautify, uglify, escape, and unescape JSON. Features include:
- Validate
- Beautify
- Uglify
- Escape
- Unescape
I prefer JSON above working with XML. This extension is a nice little time saver for those that work with JSON. Find it at the following locations:
Did you know that you can classify your GitHub repository with topics? This makes it easier for other people to find and contribute to your project.
Git Cheatsheet
The name should tell you all you need to know about this Visual Studio Code Extension. The cheat sheet opens directly inside the editor, giving you the ability to copy the command with the click of a button. For a quick reference, especially for developers starting with Git, this can be a real time-saver (not to mention lifesaver).
Grab this extension from the following locations:
If you have a project on GitHub, why not use GitHub Pages to create a website for your project. GitHub Pages allows you to turn repositories into websites that you can showcase your portfolio of work, documentation, or anything else that you wish to share.
Where are Visual Studio Code Extensions Installed?
If you are on Windows, you can open the Extensions Marketplace inside Visual Studio Code by pressing:
Ctrl+Shift+XOn Visual Studio Code for Mac, hold down:
Shift+Cmd+XYou can also get to the Extensions Marketplace by clicking on the View menu and then clicking on Extensions. Lastly, you can simply click on the Extensions icon in Visual Studio Code. To install an extension, just click on the Install button.
On Windows, Visual Studio Code extensions are installed at the following location:
%USERPROFILE%\.vscode\extensionsWhere are vscode extensions installed on a mac I hear you ask. You will find the Visual Studio Code extensions installed at the following path on the Mac:
~/.vscode/extensionsFor Linux, it’s the same:
~/.vscode/extensionsBrowse to those locations to view the installed Visual Studio Code extensions for your specific operating system.
Can I trust Visual Studio Code Extensions from the Marketplace?
Are Visual Studio Code extensions safe? The good news is that a virus scan is run on each extensions package that is published. The same is done for each extension update. Only when the scan is all clear, will the Visual Studio Code extensions be published in the Visual Studio Marketplace. If any Visual Studio Code extensions are reported and verified as malicious, or found to contain vulnerabilities in a extension dependency, the extension will be removed from the Visual Studio Marketplace and the extension added to a kill list. If the extension has been installed, Visual Studio Code will automatically uninstall the extension.
The Visual Studio Marketplace also allows developers to make an informed decision regarding the Visual Studio Code extensions that they install. This is done via a Ratings & Review section, on the extension home page in the marketplace. Here you can also view the responsiveness of a publisher on the Q & A section when you engage with them.
How to Sync Visual Studio Code Extensions
Settings Sync allows you to share your Visual Studio Code settings such as keybindings and installed Visual Studio Code extensions across machines. As of this writing, the Settings Sync was still in preview. To turn on the Settings Sync, click on the Manage gear menu in the bottom left corner of Visual Studio Code. From here you can click on the Turn on Settings Sync… from the menu.
After being asked to sign in, you will be able to select which settings you want to sync. Currently Settings, Keyboard Shortcuts, User Snippets, Extensions, and UI State are synced. Visual Studio Code is also quite clever in the way that it manages syncing if you have already turned on Settings Sync on another machine. You will be shown a Merge or Replace dialog. Merging conflicts is nothing new for developers, so you’ve got this.
Visual Studio Code will keep track of the synced machines and provide a view to access them. Every machine synchronizing your preferences is given a default name based on the type of Visual Studio Code (Insiders or Stable) and the platform it is on. You can, however, edit the machine name to call it something more user friendly for you. Lastly, you can turn off sync on another machine via the Turn off Settings Sync from the context menu on the machine entry in the view.
Visual Studio Code – What Extensions do I Have?
Managing extensions in Visual Studio Code is really very easy. To see which extensions you currently have installed, click on the extensions icon.
This will list the currently installed extensions. What is also nice, is that you can type the @ symbol in the search box and:
- List currently installed extensions with
@sort:installs - Show outdated extensions with
@outdated - List disabled or enabled extensions with
@disabledand@enabled - See recommended extensions with
@recommended - Find globally popular extensions with
@sort:rating
There are also a few other commands available that you can run to manage your Visual Studio Code extensions.
You can also list extensions by install count with @sort:installs and by name with @sort:name.
How to Remove Visual Studio Code Extensions and Settings
You might want to remove Visual Studio Code extensions and settings, or even just temporarily disable them. This can be accomplished by right-clicking on the installed extension and choosing an option from the context menu.
Here you can:
- Enable extensions or Workspace
- Disable extensions or Workspace
- Uninstall a Visual Studio Code extension
- Install another version of the extension
- Copy the extension details
- Copy the extension ID
I might have named the Copy command differently, to make it clear that I’m copying the details only and not the actual extension files. Anyway, copying the extension details makes is nice to share with other developers.
Managing Extensions in Visual Studio Code from the Command Line
That’s correct, for the developers that prefer working with a console window or terminal, Visual Studio Code extensions can be managed this way too. Open your command window (I use PowerShell) and run the following command to start Visual Studio Code:
codeTo view a list of installed extensions, run:
code --list-extensionsTo set the root path for extensions, run:
code --extensions-dir <dir>Show the versions of installed extensions, when using --list-extensions, run:
code --list-extensions --show-versionsInstall a Visual Studio Code extension by running:
code --install-extension (<extension-id> | <path-to-extension-vsix>)Uninstall an extension by (you’ve guessed it) running:
code --uninstall-extension (<extension-id> | <path-to-extension-vsix>)Enable proposed API features for extensions, run:
code --enable-proposed-api (<extension-id>)As mentioned in the previous section, you can grab the extension ID by right-clicking on the installed extension and copying the extension ID.
Conclusion
Visual Studio Code extensions allow you to fine tune your developer experience to your specific needs. Visual Studio Code is also highly configurable and flexible. The sheer volume of Visual Studio Code extensions is truly overwhelming, and chances are that if a specific extension doesn’t work for you, there will be another publisher who wrote a similar Visual Studio Code extension that caters for your specific needs. If you have not installed Visual Studio Code yet, why not take it for a spin and make it your own with a few extensions.
