Best VS Code Extensions for Web Developers

Hi everyone and welcome to our website. In our previous articles we focused on covering some of the most popular code editors of 2017 for web-developers, python programmers, php developers and so on. In case you missed those sessions and would to take a peek, I have listed down their links below:

In this post, I will only focus on listing down some of the most popular extensions for Visual Studio Code followed by a link to their installation procedure, which is pretty much the same if you are familiar with the use VS Code.

List of VS Code Extensions for Web Developers

HTML/CSS Extensions

1- HTML Snippets

One of my favorite extension for HTML is HTML Snippets. Although VS Code provides basic HTML support but this plugin takes it to a whole new level.
With HTML Snippets, you get code hinting as soon as you start to create an HTML Tag which is pretty cool and saves development time. Deprecated tags are highlighted. HTML 5 support is implemented.

2- IntelliSense for CSS class names

Now that you have got HTML Snippets, the next thing you need is code hinting for your CSS files. For this I recommend “IntelliSense for CSS class names” extension. This will save your time writing syntax-wise and spelling-wise correct CSS by hinting out the class names it found in your specified CSS files. Simple and effective, this plugin has made my life easier.
Note: For this to work, you have to first chache the CSS files which you want the extension to read.

3- Font-awesome codes for html (snippets)

Can they do something about these long names? because this plugin works perfect otherwise. Font-awesome is a great framework that contains 675 icons in total for your web development projects.With this extension, I no longer have to worry about entering the right code for my icons and the code hinting works like a charm. I strongly recommend all newbies to go for this extension.

Javascript/Jquery Extensions

JavaScript (ES6) code snippets

Are you new to javascript? Does you project require alot of javascript? .If so, then look no further because this extension is perfect for your work. With smart code hinting and support for both JavaScript and TypeScript, this extension boosts your productivity with JS to a whole new level. The installation however, requires a little effort in comparison to all the previous extensions I have listed out.

Prettier - Javascript formatter

This extension is more for seasoned developers rather than beginners. If you write alot of javascript code and love code formatting then I recommend giving Prettier a try. This extension lets you format javascript files in many ways, such as replace all commas with single commas, add semicolons at the end of lines e.t.c . To get a better grasp at whether this extension is useful in your case, you can go to the prettier website and see how this extension exactly works.

jQuery Code Snippets

So far, I couldn’t find many plugins for jQuery users, but nonetheless jQuery Code Snippets takes care of that. With this plugin, you don’t have to remember every bit of detail about the function you want to call, the action you wish to perform and the proper coding syntax. jQuery Code Snippet offers it’s users a variety of jQuery functions and speeds up the development.