Essential Visual Studio Code Extension For Web Designer

Visual studio code is on of the most popular code editor for web designers and developers. It’s simple interface and variety of language support makes it so awesome. In visual studio code, you can use extensions to extend its functionality. There are thousand of extensions are available on visual studio marketplace. But I want to highlight 5 most useful extensions for web designer and developer that will increase productivity.

1. Autoprefixer

If you ever write some CSS you already know what prefix is. Sometimes we need to write browser specific CSS by adding prefixes like –webkit, –ms- to support some legacy browsers. Doing it manually can be error-prone and time-consuming. But with Autoprefixer extension you can add the prefix to all of your code with just a click.

VS Code plugin Autoprefixer

To install the extension –

1. click on extension icon or press F1 and select Extensions: install Extensions
2. Search for vscode-autoprefixer and hit install

How to use -

1. Open your CSS file
2. Press F1 and run the command named Autoprefixer CSS

It also supports SCSS and LESS files.

2. Beautify

Beautify is a nice extension to make your ugly code look nicer. with just one click it will modify the style of your code with proper indent and line breaks. It supports JavaScript, JSON, CSS, Sass, and HTML.

To install the Extension -

1. click on extension icon or press F1 and select Extensions: install Extensions
2. Search for beautify and hit install

How to use -

1. Open your CSS/HTML/JavaScript/JSON/Sass file
2. Press F1 and run the command named beaufify

3. Minify

Minify will compress your code. It will remove all the unnecessary line breaks, comments etc that don’t need for machine reading. Minify will decrease the size of your code file. It will load faster and your application will get some performance boost.

To install the Extension -

1. click on extension icon or press F1 and select Extensions: install Extensions
2. Search for minify and hit install

How to use -

1. Open your CSS/HTML/JavaScript file
2. Press F1 and run the command named minify

4. cdnjs

cdnjs can be a life saver for those people who works with front-end libraries a lot. Using this extension you don’t need to go to the web and search for your desire library’s CDN link. You can add any JavaScript, JQuery, CSS library right inside your code editor.

Cdnjs Recent Libraries list

To install the Extension -

1. click on extension icon or press F1 and select Extensions: install Extensions
2. Search for cdnjs and hit install

How to use -

1. Open your HTML file and focus where you include the CDN library
2. Press F1 and run the command named cdnjs: Search for libraries
3. Search for your desire CDN library and hit enter.
4. Select the library > version > file link.

5. Material Icon Theme

Material icon theme will add some beauty to your code editor by adding the icon for every file type. If you work with a lot of files then it will be very helpful to you. There are many icon themes exists on visual studio code market place but I think this is the best one for it’s great color combination.

Icon set

To install the Extension -

1. click on extension icon or press F1 and select Extensions: install Extensions
2. Search for material-icon-theme and hit install
3. Press F1 search for Material Icon Theme and click on it

Icon Theme Installation

There are a lot more useful plugin is available and many of them are coming. This 5 extension is my favorite and I use them frequently. What is your favorite Visual Studio Code extension? Let us know right below on the comment.