DEV Community

loading...
Cover image for 
Top 10 best extensions for VScode - #1

Top 10 best extensions for VScode - #1

Francisco
I am a Web Developer in progress 💻
・3 min read

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

Then we will have to go to the extensions box:

image

And now we only need to look for the following extensions

Prettier

image

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

We will click on install

image

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

To use the extension press the following key combination:

Ctrl + Shift + P.

And type Format Document and press Enter

image

Or simply

Shift + Alt + F

And with this we will have our code in order!

Live Server

image

As in the previous extension, simply click on install.

Usage

To use it, simply type

Ctrl + Shift + P.

And type Live server

image

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

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

image

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

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

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

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

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

And simply select the option One Monokai

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

image

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!

Discussion (1)

Collapse
franciscode profile image
Francisco Author • Edited

And... What extensions do you use for VSCode?