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 Visual Studio Code. 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. This blog post is part of our Learn about .NET series.
Auto Close Tag and Auto Rename Tag
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.
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). 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.
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 ;)
Visual Studio Keymap
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.
Code Spell Checker
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.
Debugger for Chrome
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.
EditorConfig for VS Code
Sharing code style settings across a team or organization, has always been a mess in Visual Studio. I tried writing a guide 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.
Would your users appreciate fewer errors?➡️ Reduce errors by 90% with elmah.io error logging and uptime monitoring ⬅️
Elements for Microsoft Edge (Chromium)
When doing both server- and client-side development with Code, it breaks the workflow when needing to switch between the browser developers tools and the debugger in Code. With Element for Microsoft Edge, you can change everything from within Code. Sweet!
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.
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.
IntelliSense for CSS class names in HTML
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.
Code has Ctrl+👆 navigation known from Word built into editors like HTML and Markdown. When hovering a link, you can hit Ctrl 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!
Paste JSON as Code
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.
I have used Windows PowerShell ISE to edit PowerShell files for years. That changed when Microsoft launched official PowerShell support for Code. The extension is superior to PowerShell ISE in most ways with support for both syntax highlighting, find references and debugging.
Let's face it. Most of us have had to change a bit of Python from time to time. It's not my programming language of choice, but a lot of the tools I use are implemented in Python. Microsoft's own Python extension turns Code into the best Python IDE I have experienced.
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.
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.
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.
If you are using Vue.js, Vetur is an absolute must. Powered by the same people that does Vue, Vetur offers both syntax highlighting, code-snppets, linting, and much more.
Visual Studio IntelliCode
The built-in support for YAML is pretty good. But installing a dedicated YAML extension makes writing YAML a lot easier. This extension from Red Hat supports both IntelliSense and YAML validation.
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 and .NET Blogs to Follow - The Ultimate List.
elmah.io: Error logging and Uptime Monitoring for your web apps
See how we can help you monitor your website for crashes Monitor your website