Best Visual Studio Code Extensions
Tags: visualstudiocode, code, csharp, dotnet
Published: 2019-09-09 10:20:13

---
title: Best Visual Studio Code Extensions
published: true
description: Visual Studio Code is a great free editor from Microsoft. This post will present you with our list of essential extensions for Visual Studio Code.
tags: visualstudiocode, code, csharp, dotnet
cover_image: https://blog.elmah.io/content/images/2018/05/bestvisualstudiocodeextensions.png
canonical_url: https://blog.elmah.io/best-visual-studio-code-extensions/
---

Extending your IDE is the new black and we also use a lot of extensions every day in our daily work. Previously, we used a lot of different development tools (alongside Visual Studio), but that changed when Microsoft launched <a href="https://code.visualstudio.com/" target="_blank" rel="noopener noreferrer">Visual Studio Code</a>. We haven't replaced Visual Studio, but it's great for some aspects of our development process. We use Code for quickly previewing files, writing markdown, non C# programming, quick prototyping, and much more. This post is a summary of all the different extensions we've found to make Code even better.

Extensions are sorted by name, since I couldn't decide which I loved the most 😂

<hr/>

## <a href="https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag" target="_blank" rel="noopener noreferrer">Auto Close Tag</a> and <a href="https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag" target="_blank" rel="noopener noreferrer">Auto Rename Tag</a>

I don't usually write HTML in VSCode, since the HTML editor in Visual Studio 2017 is pretty awesome. However, using these two extensions from Jun Han, will give you much of the same experience in Code. Auto Close Tag automatically adds a closing tag, which saves you quite a lot of keystrokes over time, while Auto Rename Tag renames closed tags automatically. It's amazing how tiny improvements like these can make a world of difference.

![Auto Close Tag](https://blog.elmah.io/content/images/2018/05/auto-close-tag.gif)

![Auto Rename Tag](https://blog.elmah.io/content/images/2018/05/auto-rename-tag.gif)

<hr/>

## <a href="https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-azurefunctions" target="_blank" rel="noopener noreferrer">Azure Functions</a>

A lot of the elmah.io internals are written as Azure Functions. I won't go into detail about Functions here, except to tell you how awesome they are (and we already wrote a series about [developing and logging in Azure Functions](https://blog.elmah.io/migrating-from-windows-services-to-azure-functions/)). We still use Visual Studio to maintain Functions, because the tooling is better, but I can see where Microsoft is going with the support for Code.

![Azure Functions](https://blog.elmah.io/content/images/2018/05/azure-functions.gif)

<hr/>

## <a href="https://marketplace.visualstudio.com/items?itemName=ms-vscode.csharp" target="_blank" rel="noopener noreferrer">C#</a>

Wait a minute! You need an extension to develop C# in Code? Since Code supports multiple programming languages, C# support is like any other language an extension. This is most likely the first extension you will ever install as a .NET dev ;)

<hr/>

## <a href="https://marketplace.visualstudio.com/items?itemName=formulahendry.code-runner" target="_blank" rel="noopener noreferrer">Code Runner</a>

Jun Han developed another useful extension called Code Runner. I often find myself needing to try out a few lines of C# or JavaScript code. Rather than starting LINQPad for C# or Chrome dev tools for JavaScript, Code Runner can execute one or more highlighted lines of code inside Code. The experience isn't as great as in LINQPad, but it's at your fingertips.

![Code Runner](https://blog.elmah.io/content/images/2018/05/code-runner.gif)

<hr/>

## <a href="https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker" target="_blank" rel="noopener noreferrer">Code Spell Checker</a>

Some don't mind and some do. I make typos all the time and I like it when they are fixed, even in code. Code Spell Checkers work for most code files and even Markdown.

![Code Spell Checker](https://blog.elmah.io/content/images/2018/05/code-spell-checker.gif)

<hr/>

## <a href="https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome" target="_blank" rel="noopener noreferrer">Debugger for Chrome</a>

No need to leave Code if you need to debug JavaScript. Debugger for Chrome (release by Microsoft), let's you debug your source files directly in Code. A similar solution is available in Visual Studio, but the whole experience works much smoother in Code.

![debugger-for-chrome](https://blog.elmah.io/content/images/2018/05/debugger-for-chrome.gif)

<hr/>

## <a href="https://marketplace.visualstudio.com/items?itemName=dracula-theme.theme-dracula" target="_blank" rel="noopener noreferrer">Dracula Theme</a>

One of many nice things in Code, is the possibility of customizing the UI. Themes are available in Visual Studio as well, but it never really worked outside the ones provided by Microsoft (IMO). I don't know exactly why, but I keep coming back to the Dracula Theme (works in a lot of IDEs) and Code is no exception. Look ma, I'm so pretty in the Dracula skin.

![Dracula theme](https://blog.elmah.io/content/images/2018/05/dracula.png)

<hr/>

## <a href="https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig" target="_blank" rel="noopener noreferrer">EditorConfig for VS Code</a>

Sharing code style settings across a team or organization, has always been a mess in Visual Studio. I tried writing a [guide](https://thomasardal.com/the-ultimate-guide-to-share-visual-studio-settings-within-a-team-or-organization/) some years back, but the presented solution was still very handheld. EditorConfig fixes this by extracting configuration into a config file, that can be added to source control. This extension, adds support for EditorConfig inside Code.

## <a href="https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens" target="_blank" rel="noopener noreferrer">GitLens</a>

I must admit, I don't use Git inside either Code or Visual Studio. I'm not a command prompt-fanboy or anything, but PoshGit has worked great for me over the years. GitLens looks to bring some nice Git features inside Code, so planning to check that out at some point.

![GitLens](https://blog.elmah.io/content/images/2018/05/gitlens.gif)

<hr/>

## <a href="https://marketplace.visualstudio.com/items?itemName=idleberg.icon-fonts" target="_blank" rel="noopener noreferrer">Icon Fonts</a>

The wonderful Visual Studio extension Glyphfriend isn't available for Code, but luckily, someone made Icon Fonts. It brings IntelliSense for referencing common icon fonts like FontAwesome and Glyphicons inside Code.

![Icon Fonts](https://blog.elmah.io/content/images/2018/05/icon-fonts.gif)

<hr/>

## <a href="https://marketplace.visualstudio.com/items?itemName=Zignd.html-css-class-completion" target="_blank" rel="noopener noreferrer">IntelliSense for CSS class names in HTML</a>

Another useful extension for HTML development inside Code, is the CSS IntelliSense extension. Showing a popup of available CSS classes, is a built-in feature in Visual Studio and as a web developer, you will miss this in Code. This extension brings CSS IntelliSense into Code too.

![css-intellisense](https://blog.elmah.io/content/images/2018/05/css-intellisense.gif)

<hr/>

## <a href="https://marketplace.visualstudio.com/items?itemName=dbaeumer.jshint" target="_blank" rel="noopener noreferrer">jshint</a>

Writing JavaScript can be hard (yes it can!). Luckily, there are tools like JSHint available. JSHint is a code quality tool for JavaScript, that highlights potential problems in your code. With the jshint extension, output from JSHint is visible inside Code.

<hr/>

## <a href="https://marketplace.visualstudio.com/items?itemName=Fr43nk.seito-openfile" target="_blank" rel="noopener noreferrer">Open file</a>

Code has <kbd>Ctrl</kbd>+👆 navigation known from Word built into editors like HTML and Markdown. When hovering a link, you can hit <kbd>Ctrl</kbd> and click the mouse to navigate to that link. I have been looking for an extension to enable this in any editor and supporting both URLs and file system paths. The closest I've come, is Open file developed by Frank Stuetzer. You have to mark the path and use the context menu, but it works. Any suggestions for a better way of doing this, would be highly appreciated!

![Open file](https://blog.elmah.io/content/images/2018/08/open-file.gif)

<hr/>

## <a href="https://marketplace.visualstudio.com/items?itemName=quicktype.quicktype" target="_blank" rel="noopener noreferrer">Paste JSON as Code</a>

The "old" Paste JSON as Code feature from Visual Studio, also found its way into Code. Pasting JSON as C# (or one of the other supported languages) is probably not something you need to do every day. But when you do, this is such a nice little util.

![paste-json-as-code](https://blog.elmah.io/content/images/2018/05/paste-json-as-code.gif)

<hr/>

## <a href="https://marketplace.visualstudio.com/items?itemName=humao.rest-client" target="_blank" rel="noopener noreferrer">REST Client</a>

I'm a big Postman fan and use it for most of the HTTP requests I need to test somehow or another. But REST Client is actually a good alternative to have inside Code. REST Client provides much of the same features as Postman and the response is visible directly inside Code.

<hr/>

## <a href="https://marketplace.visualstudio.com/items?itemName=wayou.vscode-todo-highlight" target="_blank" rel="noopener noreferrer">TODO Highlight</a>

I totally admit it! I sometimes write TODO's and FIXME's in my code and forget all about it. Months later, I spot a TODO that really should have been fixed. With TODO Highlight, there's a much better change of actually seeing the TODO's.

![TODO Highlight](https://blog.elmah.io/content/images/2018/05/todo.png)

<hr/>

## <a href="https://marketplace.visualstudio.com/items?itemName=ms-vscode.vs-keybindings" target="_blank" rel="noopener noreferrer">Visual Studio Keymap</a>

Another extension from Microsoft, brings your Visual Studio keyboard shortcuts into Code. One of the most common issues of changing an IDE, is to learn an entirely new set of shortcuts (still have nightmares from switching from Eclipse to Visual Studio years back). With Visual Studio Keymap, Code uses the same shortcuts for all overlapping features. I wouldn't recommend this if you started in Code, but for old school Visual Studio users as myself, this is an awesome extension.

<hr/>

## <a href="https://marketplace.visualstudio.com/items?itemName=robertohuertasm.vscode-icons" target="_blank" rel="noopener noreferrer">vscode-icons</a>

Much like the File Icons extension we highlighted for Visual Studio, vscode-icons brings filetype icons into Code. You may think it doesn't matter, but that's only until you've tried it. File icons lets you navigate much faster.

![vscode-icons](https://blog.elmah.io/content/images/2018/05/vscode-icons.gif)

<hr/>

What do you think? What's your favorite extension for Code? Anything that I forgot on the list? Contact me through the support widget in the lower right corner, and I may add your extension to the post :D

You may also like [Great .NET Conferences to Attend](https://blog.elmah.io/great-dot-net-conferences-to-attend/) and [.NET Blogs to Follow - The Ultimate List](https://blog.elmah.io/net-blogs-to-follow-the-ultimate-list/).

## Would your users appreciate fewer errors?

elmah.io is the easy error logging and uptime monitoring service for .NET. Take back control of your errors with support for all .NET web and logging frameworks.

➡️ [Error Monitoring for .NET Web Applications](https://elmah.io/?utm_source=devto&utm_medium=social&utm_campaign=devtoposts) ⬅️

This article first appeared on the elmah.io blog at https://blog.elmah.io/best-visual-studio-code-extensions/