Essential Visual Studio Code Extensions

By Focusoncode June 20, 2018

Visual Studio Code is a free, cross-platform text editor developed by Microsoft. It is quickly becoming a crowd favorite thanks to its excellent performance and the exuberant amount of features it offers.

Just like most IDEs, VSCode has an extension marketplace containing thousands of plugins with varying quality. To help you pick out the ones worth downloading, we made this collection of the extensions we found most useful.

1.Debugger for Chrome

No need to leave Code if you need to debug JavaScript. Debugger for Chrome (released 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.

 

2.C#

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.

 

 

3. Rainbow Brackets

Add some fun to your editor with 🌈 Rainbow Brackets! This extension provides rainbow colors for round brackets, square brackets, and curly brackets. Especially helpful for JavaScript programmers!

 

4.Code Runner

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.

5. Auto Close Tag and Auto Rename Tag

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.

 

6. EditorConfig for VS Code

Sharing code style settings across a team or organization have 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.

7. GitLens

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.

 

8. vscode-icons

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.

 

9. jshint

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, the output from JSHint is visible inside Code.

 

10. 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.

 

11. Icon Fonts

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.

 

12. 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-n feature in Visual Studio and as a web developer, you will miss this in Code. This extension brings CSS IntelliSense into Code too.

Share This

Leave a Comment

Your email address will not be published.