8 Powerful VS Code Extensions for Front-End Developers

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.

Read more: Why Visual Studio Code should be your new code editor

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

1. HTML Snippets

   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 a into 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.

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

   

3. 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 + F1 keyboard shortcut.

   Note that View in Browser only supports HTML, so if you want to see your site you need to have the HTML file open. You can’t directly access the browser from a CSS or JavaScript file.

   

4. Debugger for Chrome

   Debugger for Chrome was built by Microsoft itself, and it’s currently the 4th most frequently downloaded Visual Studio Code extension.

   Debugger for Chrome makes it possible to debug JavaScript in Google Chrome without leaving the code editor. This means that you don’t need to work with the transpiled JavaScript the browser sees, but you can perform the debugging right from the original source files. See this demo to see how it works.

   

   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.json file. This latter may take for a while, but you can find detailed instructions on GitHub on how to properly do it.

5. JSHint

   Visual Studio Code’s JSHint extension integrates the popular JSHint JavaScript linter right into the code editor, so you can be informed about your errors as soon as you commit them. By default, the JSHint extension uses the default options of the linter that you can customize with the help of a configuration file.

   

   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.

   

6. 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 jq prefix. The one exception is the func trigger 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.

   

7. Bower

   The Bower VS Code extension can make your web development workflow more intuitive by integrating the Bower package manager into Visual Studio Code.

   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.json file, 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.

   

8. Git History

   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.