Useful VS Code extensions for Web Developers

The best part about VS Code is the ton of extensions available that make software developers love the editor so much.

It is lightweight and easily customizable. But there are some extensions that is super useful for someone starting out or for someone that doesn't know they exist, here are some of my favorites.

Table of Content

  1. live server
  2. beautify
  3. css peak
  4. bookmarks
  5. bracket pair colorizer

1. Live server

This is one of the most useful extensions I have come across. Live Server launches a local development server with a live reload feature both for web pages.

Every time you save your code, you'll instantly see the changes reflected in the browser. So you don’t have to hit refresh in the browser every time you make changes.

2. Beautify

Beautify is a code formatter that works particularly well if you have a big project and don't have the time to use tabs and spaces every time, because the extension enforces a consistent style.

It can be used on multiple languages/files and can save a lot of time while you can focus on writing code instead of styling it.

3. Css peek

It allows peeking to CSS ID and class strings as definitions from Html files to respective CSS. Allows peek and goto definition.

This extension extends HTML and ejs code editing with Go To Definition and Go To Symbol in Workspace support for CSS/scss/less (classes and IDs) found in strings within the source code.

4. Bookmarks

It gives us the ability to bookmark lines in the files. This helps remember important code snippets by assigning a label to them so that you can access them later on.

It helps you to navigate in your code, moving between important positions easily and quickly by adding bookmarks.

5. Bracket pair colorizer

It is a great extension if you are programming in a language that utilizes brackets and parenthesis.

It allows matching brackets & parenthesis with multiple colors options to be identified with colors and adds some UI sugar to make it easy to identify what scope you're typing in.

You can comment below if you have any favorite extension that I missed or would like to be added for part 2.

Thank you for reading.