DEV Community

Cover image for Best VS code Extensions for Web Development
Mysterio
Mysterio

Posted on • Updated on

Best VS code Extensions for Web Development

****Hello Guys today i am going to show you some VSCode Extension which helped me to boost my Productivity in Web Development(Specially frontend part as i am not familiar with backend).This post is for everyone including beginners.

Lets get Started

1. HTML Snippets -

Image description

About -

Type part of a snippet, press enter, and the snippet unfolds.

Snippets named as the tag without braces

div --> <div></div>
doc --> <!DOCTYPE html>
a --> <a href=""></a>
Enter fullscreen mode Exit fullscreen mode

2. Intellisense for CSS classnames -

Image description

About -

This extension has autocomplete class name feature in html specially for Bootstrap class names if you re familiar with bootstrap then you know about the bootstrap classes and styling components with bootstrap class names.

3. Emmet Live -

Image description

About -

Open the command palette (F1 on Windows) and look for the command 'Emmet Live'. Hit enter and input your HTML Emmet abbreviation.
This helps to write HTML Code fastly and also saves time.

4. Javascript Booster -

Image description

About -

This one i love it as it is very helpful while writing Javascript.
This VS Code extension provides various code actions (quick fixes) when editing code in JavaScript (or TypeScript/Flow). Just note the light bulb at the left and press it to learn how you can transform the code under the cursor.
You can convert normal function to arrow function with a click of button and vice versa and it has many features like that.

5. Bootstrap 4 -

Image description

About -

Visual studio code plugin containing Bootstrap 4, Font awesome 4 & Font Awesome 5 Free & Pro snippets. This plugin works in both in the stable & the insiders build.
This one is for bootstrap and it has many snippets to write bootstrap code

Example -
b4-$ and press enter , it will create a bootstrap master template which has bootstrap cdn files and all necessary tags to use bootstrap.
You can also create forms, cards, buttons , etc with simple one line snippets.
Check out this extention to see all the snippets of bootstrap.

6. Live Server -

Image description

About -

Launch a development local Server with live reload feature for static & dynamic pages.
It can update the web page everytime you do changes to the code and you dont have to refresh the page again and again to see the updates you have done to the page.

7. ES7 / React/Redux....-

Image description

About -

Simple extensions for React, Redux and Graphql in JS/TS with ES7 syntax
If you are a react developer , then you should check this extension. It has many snippets for autocomplete the codes
For example -

rfce and hit enter
Enter fullscreen mode Exit fullscreen mode

It will generate a react functional component template.

8. Vscode-styled-components-

Image description

About -

If you use styled-components to style your components in react , then this one is best for you as it autocomplete the css code written in js file.So, check this one definitely.

9. Bracket-Pair-Colorizer -

Image description

About -

A customizable extension for colorizing matching brackets
It is just a simple extension which colors the brackets with different colors , so that you can easily identify the block of codes like which code block have which opening and closing brackets.

10. Lorem Ipsum -

Image description

About -

Generates and inserts lorem ipsum text
It is a simple extension which generates dummy text to use in your web pages.

If you know about any other cool extension of vscode , then feel free to mention it in the comment section.

THANK YOU FOR READING THIS POST AND IF YOU FIND ANY MISTAKE OR WANTS TO GIVE ANY SUGGESTION THEN PLEASE MENTION IT IN THE COMMENT SECTION.

You can help me by some donation at the link below Thank you 👇👇

☕ - https://www.buymeacoffee.com/waaduheck

Also check these blog

https://dev.to/shubhamtiwari909/glass-effect-in-react-36p7

https://dev.to/shubhamtiwari909/how-to-push-code-to-github-remote-respository-ifh

https://dev.to/shubhamtiwari909/arrow-function-in-javascript-46gd

https://dev.to/shubhamtiwari909/introduction-to-tailwind-best-css-framework-1gdj

Discussion (21)

Collapse
cavo789 profile image
Christophe Avonture

Hello
Bracket pair is core since months. The third party extension is obsolete.

Collapse
mike_andreuzza profile image
Michael Andreuzza • Edited on

would love a if you test my theme!

the official site

Marketplace

marketplace.visualstudio.com/items...

serendipity

Collapse
ammarsherif profile image
Ammar Sherif Mohammed

Amazing theme!! thanks man

Collapse
mike_andreuzza profile image
Michael Andreuzza

Cheers buddy!

Thread Thread
shubhamtiwari909 profile image
Mysterio Author

❤️❤️

Collapse
shubhamtiwari909 profile image
Mysterio Author

❤️❤️

Collapse
shubhamtiwari909 profile image
Mysterio Author

i installed your theme and it's pretty much awesome , thank you for this

Collapse
mike_andreuzza profile image
Michael Andreuzza

yaay! Super glad you liked it.

Collapse
lgrammel profile image
Lars Grammel

Great list!

Since you love JS Booster: I've written another extension that adds code actions to VS Code (currently at 58 actions and counting). There is some overlap with JS Booster, but I think both have their own unique actions and it should be possible to run them in parallel.

In case you want to check it out: marketplace.visualstudio.com/items...

Collapse
shubhamtiwari909 profile image
Mysterio Author

Sure I will check it

Collapse
shubhamtiwari909 profile image
Mysterio Author

Sure I will check it

Collapse
raivikas profile image
raivikas

I too provided a good list of Vscode Extensions , please do check out below:
dev.to/raivikas/top-12-best-vs-cod...
and this is my personal blog link:
nextjsdev.com/top-12-best-vs-code-...

Collapse
shubhamtiwari909 profile image
Mysterio Author

Nice list of extensions ,i have tried some of the extension and they are good

Collapse
devops_dodo profile image
Dominic Ross

Nice list, I'll be activating some of these on my system.

Collapse
shubhamtiwari909 profile image
Mysterio Author

😃😃

Collapse
sagarshiroya profile image
Sagar Shiroya

Great list.
Many helpful extensions.

Thanks brother!

Collapse
shubhamtiwari909 profile image
Mysterio Author

Welcome ❤️

Collapse
luscas profile image
Lucas

Missing links

Collapse
shubhamtiwari909 profile image
Mysterio Author

Sorry brother I didn't provided the links
You have to manually search these extensions on VScode