DEV Community

Cover image for 10 VS Code Extensions for Web Developers
Kostaintyn Naddur
Kostaintyn Naddur

Posted on

10 VS Code Extensions for Web Developers

Hey. Today I want to write an article about the 10 best VS Code extensions for Web Developers that I and other web developers using.

Let`s start
Enter fullscreen mode Exit fullscreen mode

1) JavaScript (ES6) Code Snippets

This is a great time-saver for any JavaScript developer. You can get all of the code you need in one place, without having to type it out again and again!
This also includes TypeScript/TSLint checked codes as well so your projects stay up-to-date with the latest technologies.

Image1

2) Auto Close Tag

After opening a tag in HTML and XML it’s a hectic job to close it. So here is the best solution for you, closing the HTML and XML tag automatically.

Image2

3) Auto Rename Tag

This renames tags automatically so that your code remains consistent and easy to maintain, even when working on bigger projects with lots of elements deep in the HTML structure.

Image3

4) Better Comments

Commenting is a big part of programming, and without it, you’ll never be able to understand your own or others’ code.

This extension lets you organize comments by categorizing them into highlighting text, questions, todo, errors/ warnings & strikethroughs so that they’re easy for reading when looking through the project later on!

Image4

5) Live Server

I always wanted to have this extension when I started learning web development. It spins up a light Node.js server and serves your HTML file with all assets from the given directory, on top of that any saved changes you make will also be reflected immediately in a browser which gives a really fast experience as if it is redevelopment mode!

Image5

6) Code Time

This extension tracks your development time and provides you with useful stats such as how many hours you have code today etc.

It’s pretty useful to keep track and see the progress. This is not strictly for web development only, anyone can use this extension.

Image6

7) MarkDown all in one

Developers, whether you like it or not. Writing documentation is part of the job- one that many people find themselves doing often but don’t necessarily enjoy as much because there are so many other aspects involved in developing software such as coding, testing, etc.

The most commonly used markup for documents nowadays seems to be markdown which provides useful shortcuts when writing down content especially since live preview features can help save time by checking how your post will look before publishing! It really speeds up documents.

Image7

8) colorize

Colorize visualizes color variables by highlighting them with their color value. This is a handy timesaver for translating hex codes and variable names.

Image8

9) Indent Rainbow

Indent Rainbow is a great tool to add color and productivity to your setup. It can also help serve as an alignment check for your indentation. Each indentation is given an alternating rainbow color.

Image9

10) CSS Peek

The extension supports all the normal capabilities of symbol definition tracking, but does it for CSS selectors (classes, IDs and HTML tags).

Image10


Thank you for reading the article to the end!

My GitHub: click

Discussion (3)

Collapse
ahmad_butt_faa7e5cc876ea7 profile image
Ahmad

some really great ones here!

some others which i use ...

  • Prettier
  • Gitgraph
  • Git History
  • Github Copilot
  • Nuget Gallery
  • Bookmarks
  • To-Dos
Collapse
evanstjabadi profile image
Evans Tjabadi

Github Pull request is quite nice too

Collapse
iqahishamm profile image
Syafiqah Hisham

Thank you for sharing!! Definitely will try later!