DEV Community

loading...
Cover image for Best VS code extensions used for web development

Best VS code extensions used for web development

commentme profile image Unnati Bamania ・2 min read

VS Code is one of the best and lightweight code editors. The dark theme and variety of extensions that very developer-friendly. This article mentions best vs code extensions which can help developers to coder faster and cleaner.

Thunder Client

Say bye to Postman once you've installed this extension. This extension helps to make API calls on VS code. All you've to do is go to the extension section and install the thunder client extension. You'll find a small electrifying icon on the left-hand side. Click on it and you're good to go.
Alt Text

Alt Text

Markdown All in One

It would be nice if your complete markdown, which includes auto-preview, shortcuts, autocomplete, were managed by a single extension. With this extension, you can have a live preview of your markdown, and using shortcuts like ctrl+b and ctrl+i makes preparing markdowns less excruciating.
For live preview use command ctrl + shift + k + v.
Alt Text

Prettier

Developers are most often troubled by the commas and colons or by adjusting the code properly. Prettier code extension manages the code format and aligns it properly so that the code looks pretty.
Alt Text

CSS Peek

CSS Peek extension is a handy extension to check for CSS code while typing HTML tags. When you hover over the class name and hit control then you get the CSS code of that class. On clicking on the class it will take you the code on the CSS page.
Alt Text

Live Server

This server helps to reload the page after saving the code. While previewing the saved code you need not refresh the page manually. It reloads the page and shows to output for recently saved code.
Alt Text

Emmet

Most of the time it's boring to write the complete HTML tag with head and title and other tags within the head tag. Emmet extension gives the initial code for HTML pages. When you type

!+tab

You get the initial code.

Auto Rename Tag

This is a very powerful and useful extension for web developers. It auto-completes the ending tag same as the starting one and vice versa. This extension is also useful for React applications.

There are a lot of other VS code extensions which are very handy if you know any please do mention them down in the comment section.

Discussion (4)

Collapse
fat_tonyy profile image
Fat-Tony • Edited

Try five server, which is a fork of live server but better configurations, also if you use his live sass compiler (ritwick dey) please uninstall and install a new one with the same name but this time it’s by Glen Marks. Apparently he doesn’t maintain it anymore and even contribute to the new one.

Collapse
davebudah profile image
Dave Budah

"Auto hide" is one other extension I recently found to be handy. It's automatically closes the Sidebar and terminal, when you are focusing on the Editor section, giving you more room to work with.

Collapse
commentme profile image
Unnati Bamania Author

Cool, thanks for sharing

Collapse
klvenky profile image
Venkatesh KL

Thunder client looks interesting & is definitely worth a try.
It's also one of the extensions that I've not seen before in similar articles
👍

Forem Open with the Forem app