Top 10 VS Code Extensions
Published: 2021-08-31 20:26:30

**Visual Studio Code** also known as **VS Code** is a famous open source text editor made by Microsoft for Windows, Linux and MacOS. VS Code supports a wide range of programming languages that includes **Java, JavaScript, Go, Node.js, Python,** and **C++**. Vs Code provides many extensions for better functionality, productivity, speed and debugging. In this blog we will cover the top 10 extensions that will make your code a lot more friendlier and your life a lot more easier!

**`1) Auto Close Tag -`** 
Auto Close Tag automatically closes **HTML** or **XML** tags for you in the **integrated development environment (IDE)**. This extension saves you a great deal of time by ensuring that you don't spend hours trying to figure out why your code isn't working just to realise that it's because you forgot to close a tag!

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2fqzxz9v8yg9dqp94z62.png)



**`2) Live Server -`** 
The live server extension in Vs code allows you to launch a development local server with a click of a button. Once you make changes in your code, upon saving it the browser will automatically refresh itself and you will be able to see the changes instantly.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xk5e75mt3znjo9c9ny6d.png)

**`3) Prettier -`**
Prettier is a helpful tool for formatting your code. Prettier automatically makes your code more readable and consistent. It enforces consistent style by parsing your code and re-printing it with it's own rules.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4vwof02w6c9yvykil4kw.png)

**`4) Bracket Pair Colorizer -`**
In coding as our functions get more complex we make use of a lot of brackets, parentheses etc. It gets challenging to keep track of all the opening and closing brackets. This extension allows us to assign colours to matching brackets making it easier for us to identify them.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z19lddk5zslhijdltodd.png)

**`5) Import Cost -`**
The Import Cost extension shows you the size of an imported third party library when it is imported. It indicates the size with colour, Incase of heavy imports it will seek your attention immediately by indicating the size in red.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0nm94o7udvra0m31netl.png)

**`6) Javascript (ES6) Code Snippets -`**
This extension lets you set shortcuts for JavaScript code that can be used to invoke a full code block. Snippets help you write repetitive code quickly. This is one of the most popular JavaScript snippet extensions it provides code snippets for **JavaScript, TypeScript, Vue, React,** and **HTML**

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0m5785qigeo6io3arwvv.png)

**`7) CSS peek -`**
**CSS Peek** is an extension that supports **HTML** and **JavaScript** files. It allows you to peek into CSS ID and class strings as definitions from html files to the respective CSS. **CSS Peek** Allows peek and go to definition  by extending HTML and Embedded JavaScript templates with Go To Definition support for CSS classes and IDs that is found in your markup.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jlfw2j7r64qr5g39bqm2.png)

**`8) Better Comments -`**
The Better Comments extension in VS Code lets you be more organised with your comments by letting you specify different types of comments and colour them accordingly. It helps you create more human friendly comments by letting you categorise your annotations into **`Alerts`, `Queries`, `TODO's`** and **`highlights`**.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/75qti3mjdseregddn3xu.png)

**`9) REST Client -`**
REST Client allows us to test **application programming interfaces** also known as **`API's`**. This extension allows you to send HTTP requests and view the response directly in VS Code.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5c4r8sop3azhoaamqd0j.png)

**`10) ESLint -`**
The **ESLint** extension integrates **ESLint** into VS Code. **ESLint** analyse your **JavaScript** code, it checks your code for common mistakes and lets you fix errors within the editor itself.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kczk69gx0y3ceuizxffx.png)