25+ Visual Studio Code Extension for Web Designer and Web Developer

Md. Saifur Rahaman
4 min readMar 30, 2020

Hey, what’s up? Today I’m going to tell you about 25+ Amazing VS Code Extension for any Web Designer or Web Developer. Who are Front End Developer or Backend Developer or Full Stack Developer, every Developer need to install these awesome extensions for their development. Because these will be increasing our coding speed and also these will give us comfortable coding experience :)

By the way, let's start. First of all, you have to open your Visual Studio Code Editor. Then Press CTRL + SHIFT + X or like the below screenshot and then put down the extension name.

Material Theme: This Extension so beautiful for installing any kind of theme in your VS Code. After installing this extension you can choose any theme by clicking “Set Color Theme”

Material Icon Theme: If you want to decorate your HTML, CSS, JavaScript, PHP or any other formated file in icon color then it will be a great extension for you.

Material Theme Icon: This is another Icon theme extension like Material Icon theme. As same as but you can you any of them.

Live Server: If you want to enjoy the live server environment, then it will be a good choice. By this extension, if you edit your code you can see the live reload changing experience. Check the below screenshot just click on it. It will open your browser with a new PORT. That's’ an Amazing :)

Polacode: If you want to take an Awesome Screenshot of your code as like it will show formatted and design color code then it will be your good extension. Just install it then press CTRL + SHIFT + P the write polacode then select it and goes like the screenshot below:

Auto Rename Tag: This extension will help you to rename any tag. if you rename any opening/closing tag then the closing/opening tag will be renamed automatically.

Path Intellisence: This extension will help you to view the related path of your folder or any file in your projects.

Beautify: This extension will help you to beautify your all code if it is HTML, CSS, javascript or PHP no problem. All codes will be beautified by this extension.

Better Align: This extension will help your code to be better alignment.

CSS auto prefix: This extension will prefix your all code so that the code can be supported all browsers. That means browser compatibility this extension will help you.

IntelliSense for CSS class names in HTML: You will get suggestions the class name by this extension.

Highlight Matching Tag: VS Code has not option to highlight your opening and closing tag. So, This extension will help you to understand the matching tag.

Code Spell Checker: This extension will help you the coding spelling. If you write any class name or ID name or any other function in which word spelling is wrong by type of mistake. This plugin will be highlighted to understand you.

Code Runner: If you are a JavaScript or PHP Developer. If you want to run your code locally then this extension will be an awesome experience for your coding.

Quokka.js: This is like the Code Runner extension. It is working as a console log beside your code.

JavaScript (ES6) Code Snippets: By this extension, you will find ES6 code snippets.

React Extension Pack: VS Code comes with a ton of features for React development out of the box. This extension pack adds more!

Reactjs code snippets: This extension contains code snippets for Reactjs and is based on the awesome babel-sublime-snippets package.

Settings Sync: This extension is so important if you add any custom code snippet or change any default settings. This Extension will sync your all custo snippet Keybindings, Workspaces, etc.

PHP IntelliSense: This extension is for PHP Developer :)

PHP Extension Pack: Everything you need for PHP development

WordPress Snippets: If you are a WordPress Developer then this extension much more helpful for you!

WordPress Devlopment: This is another extension for WordPress Developer.

Autocomplete WordPress Hooks: Every WordPress Developer have to work with Hooks daily. So this is another Extension for your WordPress Development Projects.

Search WordPress Docs: Sometimes we need to check WordPress Docs like Codex. So this plugin will help you to check the docs offline.

WooCommerce — Snippets & autocomplete: For WordPress WooCommerce related to any task you want to do, this extension will be good for you.

Finally, I have discussed a lot of Extension for the VS Code. If you are a frontend Developer or Backend Developer or Full Stack Developer every one has to use these extensions. So, by the way, Talk to you later! Thanks a lot for reading my first blog :) Take Care!!!

--

--