FrontEnd VSCode extensions

Hi Devs,

In this post I'll be covering the most useful front-end related VSCode extensions.

1 Live Server

• This extension gives us a dev server on which we can run any web application. It supports auto-reload.

2 Live Sass Compiler

• Used to compile the css pre-processer sass.

3 HTML CSS Support

• This extension helps in ID and Class attribute completion.

4 Auto Rename tag

• It helps in editing the HTML tag names. When we make any modifications to the opening tag, it updates the closing tag as well and vice-versa.

5 Prettier

• It's a code formatter which works seamlessly with HTML, CSS and JS. It helps in organising the lines, brackets, quotes, semi-colons, spacing, functions and etc every time we save the file.

6 JavaScript ES6 Code Snippets

• Useful templates for destructing, arrow functions and many other JS features

7 Bracket Pair colorizer

• Colors the brackets, arrows. Helps in visualising the code blocks.

8 Code Spell Checker

• Very useful extension which helps in catching the spell errors in the code.

9 REST Client

• This extension is similar to postman and helps in making a request to REST endpoints from the VSCode itself.

10 GitLens

• Gives a lens into the git repository, displays the branches, contributors, git stats.