DEV Community

Cover image for Top VS Code Extensions For Web Developers
Cess
Cess

Posted on • Updated on • Originally published at cesscode.hashnode.dev

Top VS Code Extensions For Web Developers

Hello everyone! πŸ’™

In this article, I will write about the Vs Code extensions that I find super useful as a web developer and you guys will find them interesting and useful as well.

let's get started πŸ’ƒ

what is vs code extension ?

VS Code extensions let you add languages, debuggers, and tools to your installation to support your development workflow. VS Code's rich extensibility model lets extension authors plug directly into the VS Code UI and contribute functionality through the same APIs used by VS Code.

How to download Vs code extensions

You can browse and install extensions from within VS Code. Bring up the Extensions view by clicking on the Extensions icon in the Activity Bar on the side of VS Code or the View: Extensions command (Ctrl+Shift+X).

Click on the extension icon on vs code:
extensions-view-icon.png

This will show you a list of the most popular VS Code extensions, click the install button to download any vs code extension of your choice.

Here’s a list of some of the Vs code extensions that would make your life a lot easier as a web developer:

1.
Live Server

live server.PNG

Live server extension provides the live preview of your web application right within the editor.

This is a handy and useful extension for web developers as it enforces auto-reload and makes our work easier by displaying our code results immediately on Our web browser without refreshing the page and It prevents us from going through the stress of always saving our work in the editor and then refresh our browser every time before seeing changes.

lives.gif

2.
JavaScript (ES6) Code Snippets

This extension contains code snippets for JavaScript in ES6 syntax for Vs Code editor. To speed up your javascript coding, use Javascript ES6 code snippets.

javascript es6 code snippets.PNG

3.
Prettier

This extension performs the formatting of the javascript, CSS, and HTML and makes it readable. it automatically tidies up the code every time the changes are saved.

prettier.PNG

4.
Bracket Pair Colorizer

This extension allows matching brackets to be identified with colors. This extension helps you identify which closing bracket belongs to which functions when you have more than one or two closing brackets.

bracket pair colorizer.PNG

5.
Path Intellisense

This extension makes the development time faster by autocompleting file names. You type the name of the files in statements and it will search and give you suggestions.

path intelisense.PNG

6.
Code time

Code time.PNG

Code Time is an open-source plugin for automatic programming metrics and time tracking in Visual Studio Code. it tracks your development time and provides you with useful stats such as how many hours you have code for that day, It’s useful to keep track and see the progress you are making.

code time2.PNG

7.
Polacode

polacode.PNG

This extension helps you take beautiful screenshots of your code.

To take a screenshot of your code:

  • open the command palette (ctrl + shift + p on windows) or (cmd + shift + p on mac)

  • search for polacode and select polacode

  • highlight the part you want to screenshot, copy and paste the code on the displayed polacode screen and press the polacode icon to save it on your device.

pola.gif

8.
Auto Rename Tags

autorename tag.PNG

This extension makes it possible for us to rename both opening and closing tags at once. when you change the starting tag it will automatically change the closing tag as well, making the renaming of tags easier.

rename.gif

9.
Px to rem

px to rem.PNG

This extension helps us to convert px to rem, and rem to px. You don't need to do mathematical conversions all you need to do is highlight the 20px in Font-size: 20px; for example and press alt + z keys to make the conversion from px to rem. press and hold the alt + z keys to also make the conversion from rem to px. ☺️

px to .gif

10.
VS Code Icons

vs code icons.PNG

This extension adds a set of icons to each of the files and folders in the Explorer view, thereby making the editor look more colorful and also help to easily view all the different files quickly.

20210906_010837.gif

11.
Image preview

image preview.PNG

Image Preview shows image preview in the gutter and on hover. when you hover over the <img> tag you see a preview of the image.

image preview.gif

Resources

Useful Websites Every Web developer Should Know About

Discover the Best Illustration Websites for Web Developers

Best websites for free stock photos and videos for web developers

Best Chrome Extensions for Frontend-Developers and Designers

Conclusion

The above-mentioned Vs code extensions will make your life easier as a web developer. If you have any questions or there are any other extensions that help you a lot more than this, Post about it in the comment section below and I'll be happy to answer every single one.

If you found this article helpful, please like and share it ❀️.

That's all for today! 😁 You reached the end of the article 😍

Discussion (10)

Collapse
gizmecano profile image
P. Mergey

It seems that Bracket Pair Colorizer is now deprecated due to improvements recently made in VSC core: henceforth settings such as "editor.bracketPairColorization.enabled": true and "editor.guides.bracketPairs": true are suitable enough.

Collapse
cesscode profile image
Cess Author

Oh! I will update the article asap. Thanks for Reading Chief ❀️

Collapse
talorlanczyk profile image
TalOrlanczyk • Edited on

There is brackets pair colorize 2

Collapse
gizmecano profile image
P. Mergey

True, but specified as unmaintained in the marketplace.

Collapse
lukeshiru profile image
LUKESHIRU

Auto Rename Tags is no longer necessary, that comes with VSCode now. You can either use F2, or add this to your settings:

"editor.linkedEditing": true
Enter fullscreen mode Exit fullscreen mode

Same happens with Bracket Pair Colorizer, but that was explained already by other comment.

Cheers!

Collapse
cesscode profile image
Cess Author

I will make corrections Asap. Thanks for Reading ❀️

Collapse
rajcep profile image
RajceP

It works only for HTML or Handlerbars.

Collapse
ben profile image
Ben Halpern

You should crosspost this to community.vscodetips.com :)

Collapse
cesscode profile image
Cess Author

I will do that... Thanks for Reading Chief ❀️

Collapse
harishash profile image
Haris#

You should also check out blox. It contains a whopping 1500 ui code snippets for different frameworks