DEV Community

Cover image for Recommended VS Code Extensions for 2020 and the years to come
Sanjaay R.
Sanjaay R.

Posted on

Recommended VS Code Extensions for 2020 and the years to come

Intro

Hey, I wanted to share my VS Code Extensions. I use 22, and I always make sure I only use 22. I don't like using more than 22(I have no idea why). Some of these 22 I don’t know what they do so I will just share the ones which I think are a must have.

My Extensions

1. Bracket Pair Colorizer 2

I use this extension as it is helpful in having my bracket pairs colorized. I sometimes lose the closing or opening bracket and I can't find where it is. This extension colorizes the bracket pairs. It also has a line which underlines or just sits on the left of all the content in those two brackets. This is version 2 and I use the second one as it says it is faster or something.

2. Code Runner

I installed this so I can give inputs in the terminal instead of the files running in the output console. I recommend everyone downloading this as you need inputs for most programs that are advanced and this lets you give inputs.

3. CSS Peek

This is an extension which helps you see the CSS applied to a HTML class or ID. If you hold command/control and hover over a HTML class or ID in a HTML document then you can see the CSS applied to that class or ID. If you then click after holding command/control it will take you to the file in which the CSS for that element is given. It will also take you to the line in which that CSS is applied. This is very useful when you have a huge CSS file.

4. GitHub Pull Requests and Issues

This is for viewing the GitHub pull requests and issues right from VS Code. It actually has proved useful before as I can also comment on the prs and issues right from VS Code.

5. GitHub Theme

This is the theme I use for VS Code. I am a GitHub lover so I use this theme. I also love the colors in this theme and it is way better than the Material Theme and the atom theme. This theme is new so not many people know about it. I recommend you try it out as you will absolutely love it.

6. indent-rainbow

This gives a color to every indent on your file. It actually helps a lot if you make mistakes in indenting, but if you have Prettier you don't really need it. I just keep it as it actually looks nice and it works well with the Bracket Pair Colorizer.

7. Live Server

This extension creates a live server and so whenever you make changes in a HTML, CSS, or JS file and you save the changes, the changes will reflect in the port opened in your browser immediately. This means you don't have to reload the browser to make the changes take place. It saves a few seconds.

8. Live Share

This is for coding live with other people. It is a major reason why people use VS Code.

9. Live Share Audio

This is an audio extension for the Live Share. This is so you can hop on audio calls with your friends.

10. Material Icon Theme

This is an icon theme for VS Code. That means it changes the icons VS Code comes with. There were two options for the icon themes, vs-code icons or the Material Icon Theme. Originally I choose the vs-code icons but I soon realized that the Material Icon Theme had an icon theme for .replit files and the vs-code icons didn't have an icon theme for .replit files so I switched to the Material Icon Theme. It is very nice, and I am currently helping the maker of the Material Icon Theme by giving him suggestions for other files ,in GitHub, that he hadn't put it yet(like a .lol file for LOLCODE).

11. Prettier - Code formatter

Well this has a load of downloads. I first didn't download it cause it didn't have support for C++, or so I thought. Later, because every single person on the planet had it, I downloaded it and found out that it actually did have support for C++ files as it started formatting my C++ files.

12. Project Manager

This is one of my FAVORITE extensions ever. It is sooo helpful, as before I installed this, I had to go to powershell and cd into the folder and then open it in VS Code or I had to press open folder and look for the folder. What this extension does is it gives you an extra tab in which it will show you your saved folders(you can save folders there) and if you give it a folder path, it will search that folder for cloned Git repos. I have all my Git repos in one folder so when I gave it the folder path, it put all my Git repos in the tab, meaning with two clicks(one open the tab and two press on the folder name) it will open the folder. Very Useful.

.replit

repl.it is another IDE which you can use on the web and you don't have to download anything like python or MinGW to use it. It is an online IDE which is very easy to use. In repl.it they have .replit files to configure the run button in repl.it. .replit files do nothing in VS Code, but I don't care, I use repl.it and so I need a .replit file icon.

Ending

Sorry more than half of them are boring, but I just don't have much info on those. I use VS Code for most coding but when I am in a different location and am not using my laptop, I use repl.it. I also use repl.it for checking shared posts and stuff. I suggest you use both VS Code and repl.it as they are very useful. Thank you for reading my first post, and I hope you have a fun time.

Discussion (6)

Collapse
cursorweb profile image
Junhao "Jerry" Zhang

add cookeylang ext plz here

Collapse
zdev1official profile image
ZDev1Official

Coder100 is here and do kookeylang have an ext tf smh

Collapse
whippingdot profile image
Sanjaay R. Author

Is it there? I will recommend it if it is there.

Collapse
codemonkey51 profile image
Codemonkey51

Cool I'll have to check some of these out!

Collapse
danhmanh profile image
Danh Manh Nguyen

"I downloaded this cause it had a lot of downloads. I have no idea what it does(lol)."

And you gonna recommend us but you don't know what it does?

Collapse
whippingdot profile image
Sanjaay R. Author

Well, what it actually does is lint JS code. It finds problems in the code and it tells you. It looks for certain patterns. I will edit the article.