Top 10 best extensions for VScode - #1
Tags: vscode, plugin, discuss, editor
Published: 2021-04-23 21:01:06

Hello everybody! This is my first post in English, today we will see the 10 best extensions for Visual Studio Code.

VSCode extensions serve to speed up certain tasks that can take away valuable seconds in our work, that's why the community of this code editor has created several tools for its useful operation.

Today I bring you, my top 10 extensions for Visual Studio Code.

When we start Visual Studio Code we will have what we should be used to, that's right, the typical welcome screen in every code editor.

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qztcpi4trwmifpl72vmb.png)

Then we will have to go to the extensions box:

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dyv5pe1uyj6acrx1yp0r.png)

And now we only need to look for the following extensions

## Prettier

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4vgxjx4ifaw2seoe6pc8.png)

We simply search for its name in the text box, and select the first one.

We will click on install

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ucl0j37j8qel20jk1xp2.png)

What does this extension do?

### Usage

This extension is used to format the document, in other words to tidy it up and clean it up.

To use it we will simply have to be in the file in which we want to clean it, for example this very, very messy HTML file 😂.

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/confeiojvuopfjvppmej.png)

To use the extension press the following key combination:

``Ctrl + Shift + P``.

And type Format Document and press Enter

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8o6mwtiv65kjrl4iuakz.png)

Or simply 

``Shift + Alt + F`` 

And with this we will have our code in order!

## Live Server

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qx3t1dvvjp21hdxkga5f.png)

As in the previous extension, simply click on install.

### Usage

To use it, simply type

``Ctrl + Shift + P``.

And type Live server

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3q7fabxbsrsrikno5qae.png)
  

Select the one that says **"Open with live Server"**.

Or to make it shorter, we will make the following combination

``Alt + L + O``

This will open our default browser and give us a view of our HTML file, this extension allows us to simply save the files with VSCode with

``Ctrl + S``

And the changes will already be in the browser.


## Material Icon Theme

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3znfo5hp8ubfs318ljo8.png)


This extension will give us a wide variety of icons for a wide variety of files:

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fmh2w1kykx1zc0or4muh.png)

As in the previous ones, we will look for it by its name and click on install.


Once installed, the following window will appear

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xer0t1x2jec12j90ye2i.png)

 
We should select the one that says Material Icon Theme

And that's it! we have new icons for our visual studio code!




> Ok ok, we already have 3 extensions, there is still a lot left, but let's not be discouraged!!! We will have our very nice Code Editor at the end of this post.



## Indent Rainbow

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rblh59epae8ioxi8pdy2.png)

This extension will help us a lot to order our code, the installation is the same as we have followed before, (The search for it, and simply give the button to install)

The installation is very fast and to check that it is ready we will go to our test file.

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xry3gk868724s7e2e3r2.png)

As we can see this extension will help us to guide us, to see where a tag or key starts and where it ends.  

And now the following extension will give an excellent essence to our editor

## One Monokai Theme

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3hui3hh2qzpwpr1in6wg.png)

This is the One Monokai theme, to install it we must follow the procedure previously discussed and when we install it, the following will appear

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/84jvkng7dtqjxg1wy3ml.png)

And simply select the option One Monokai

When we go back to our test HTML file it will look like this.

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6fg2gqkeopt0qamg74sp.png)
   


Well well, then I decided to leave this post until here so as not to extend it too much, and also not to fill the reader with so much information haha.
I hope this post will be very supported as it is my first post in English, thank you very much for reading, remember to leave the Heart, Unicorn and save

Keep Programming!