Although Microsoft released the first stable version of Visual Studio Code, its powerful code editor only a few months ago, by March 2016, it already has many extensions available that can take coding experience to the next level. The official Visual Studio Code extensions are hosted in the Visual Studio Code Marketplace, many of which can be a great help for web developers.
For this post, I tested a bunch of VS Code extensions related to front-end development, and made a list of those I found the most intuitive, easy-to-use and convenient. It’s not an ultimate list by all. Take the time to browse the marketplace for yourself, and see what else it can offer to you, especially since many great extensions are yet to come.
How to Install VS Code Extensions
Installing an extension is pretty straightforward in Visual Studio Code, as you can do it within the code editor. In the VS Code Marketplace every extension has its own page, and you can find the command you can install the given extension with on top of this page.
The command always begins with the
ext install term. To install an extension, just press
CTRL+P inside VS Code to start the Quick Open panel, copy-paste this command into it, and finally restart the code editor to make the new extension work.
8 Powerful Visual Studio Code Extensions
If you want to frequently write HTML in Visual Studio Code, the HTML Snippets extension can come as a handy tool, as it adds elaborate support for HTML. Although VS Code has basic support for HTML, such as syntax colouring, the HTML Snippets extension knows much more.
Probably the most useful feature of this extension is that when you begin to type the name of an HTML tag (without the starting angle bracket), HTML Snippets quickly displays a list of the available options with a short information about each.
When you click on the element you need, HTML Snippets adds the full HTML5 tag with its most common properties. For instance, if you want to add a link (anchor tag) to your document, just type an
ainto VS Code, choose the right option in the popup box, and HTML Snippets will insert the necessary
<a href=""></a>snippet into your editor without any hassle.
The author of this extension also pays attention to remove deprecated elements, so if you want to use an HTML tag that you can’t find in the popup list, it’s worth to check out whether it’s still valid or not.
HTML CSS Class Completion
HTML CSS Class Completion can be a helpful extension if you need to use many CSS classes in your project. It frequently happens to us developers, that we are not completely sure in the exact name of a class, but it just sits at the back of our mind as passive knowledge.
This smart extension gives a solution for this problem, as it fetches the names of all CSS classes in the current workspace, and displays a list about them.
Let’s say, you want to create a site using Zurb Foundation, and you want to use the small grid. You don’t remember how the classes are exactly named, but you know they have semantic names.
With HTML CSS Class Completion you only need to start to type the word
small, and the available options appear on your screen at once, so you can easily select the one you need.
View in Browser
View in Browser is a simple but powerful extension for Visual Studio Code. It can facilitate front-end development by allowing you to have a quick look at the result of your work in the browser while coding. You can open your HTML file in your default browser directly from VS Code by pressing the
CTRL + F1keyboard shortcut.
Debugger for Chrome
The extension has every feature a decent debugger needs, such as breakpoint setting, variable watching, stepping, a handy debug console, and many others (see the feature list of the first release).
To use this extension you need to start Chrome with remote debugging enabled, and set up a proper
launch.jsonfile. This latter may take for a while, but you can find detailed instructions on GitHub on how to properly do it.
The usage of this extension is quite straightforward, as JSHint marks the errors with red, and the notifications with a green underline. If you want more information on the issues, just hover over the underlined parts, and JSHint will float a label with the description of the problem at once.
jQuery Code Snippets
jQuery Code Snippets can greatly speed up front-end development in Visual Studio Code, as it lets you quickly write jQuery without basic syntax errors. jQuery Code Snippets currently has around 130 available snippets you can invoke by typing the right trigger.
All jQuery snippets but one start with the
jqprefix. The one exception is the
functrigger that inserts an anonymous function into the editor.
This handy extension is a convenient help when you are not completely sure about the proper syntax, and want to spare the time to check the documentation. It also makes it easy to quickly scroll through the available options.
If you put this extension into use you don’t have to switch back and forth between the terminal and the editor, but you can easily perform your package management tasks right inside Visual Studio Code.
The Bower extension leads you through the creation of your project’s
bower.jsonfile, and you can also install, uninstall, search, update packages, manage cache, and perform many other tasks with it (see full feature list).
You can access Bower-related commands by starting the Command Palette by pressing
F1, typing “Bower” into the input bar, clicking on the “Bower” option in the dropdown list that appears, and picking the appropriate Bower command.
Git History makes it possible to follow the changes of a Git project inside Visual Studio Code. This extension is especially useful when you want to contribute to a bigger Github project, and need a way to quickly check out the modifications other developers made.
With the Git History extension installed you can view the history of an entire file, or a particular line inside of it. You can also compare previous versions of the same file.
You can access the commands related to Git History if you type the word “Git” into the Command Palette (
F1), choose “Git” inside the dropdown list, and finally select the command you need. Note that you need to open the file of which you want to see the history before you can perform any actions on it.