DEV Community

Cover image for 5 VSCode Extensions You Must Use
Murtuzaali Surti
Murtuzaali Surti

Posted on • Updated on

5 VSCode Extensions You Must Use

Here are the 5 most useful Visual Studio Code extensions to improve your workflow!

1. Error Lens

Error Lens is an extension which allows you to see error, warning and diagnostic messages in line with your code without having to hover or click on anything! It also highlights the line with different colors to help you better visualize and differentiate between errors, warnings and other messages!

errorlens_demo


2. CSS Peek

With this extension, you can search for relevant CSS files by using CSS classes in html file and edit CSS files there itself! Here's how it works:

CSS Peek working


3. GitLens

GitLens is a powerful extension which can display when a particular line was committed, by whom it was committed and in which pull request it was included along with the commit message! All of this information is inline with the line upon which your cursor is currently located.

You can also hover over the message to get even more information about a particular line of code!

gitlens inline message

gitlens hover

There are many more features in GitLens which you can explore and play around with!


4. Import Cost

Import Cost allows us to see the size of the imported package inline in the editor itself!

import cost


5. Version Lens

Version Lens fetches information about dependency versions and displays it on top of the dependency! You can also change to the latest version just by clicking on the latest label!

Version Lens


These were the 5 VSCode extensions which are powerful, useful and can improve your productivity and workflow!

Signing off.


I started a blog, Syntackle

Twitter | GitHub | LinkedIn

Top comments (79)

Collapse
 
j471n profile image
Jatin Sharma • Edited

All of them are already installed. Nice work though :)

Collapse
 
murtuzaalisurti profile image
Murtuzaali Surti

Awesome! How many total extensions are installed on your system?

Collapse
 
j471n profile image
Jatin Sharma

Around 75+

But I Don't use all of them at the same time, because they eat RAM. Initially I disable all the extension and I enable it when I need it, It totally depend on the workspace.

Thread Thread
 
murtuzaalisurti profile image
Murtuzaali Surti

Yeah, even I have 60 installed but I don't require them all at once.

Thread Thread
 
j471n profile image
Jatin Sharma

Yes exactly, Otherwise vs code beats chrome in terms of RAM consumption.

Thread Thread
 
murtuzaalisurti profile image
Murtuzaali Surti

Oh, I probably need to check that on my machine

Collapse
 
wjk22 profile image
Wojtek Kalka

Hehe and after all that extensions I still moved over to nvim most of the time

Collapse
 
harithzainudin profile image
Muhammad Harith Zainudin

im still thinking either I wanna try vim/nvim or still using vs code. hm

Collapse
 
murtuzaalisurti profile image
Murtuzaali Surti

use what's best for your use case

Thread Thread
 
harithzainudin profile image
Muhammad Harith Zainudin

im quite a noob here. will it be okay if you give what kind of use case that is better for which one?
cause, it will take time to get used to vim tho.

Thread Thread
 
murtuzaalisurti profile image
Murtuzaali Surti

If you are a beginner, start with VS code because it's simple and easy to use. When you become quite experienced enough, you can try vim too.

Thread Thread
 
harithzainudin profile image
Muhammad Harith Zainudin

Nice! thanks for the suggestions. Nevertheless, will start using vim sooner or later to try it out!

Thread Thread
 
murtuzaalisurti profile image
Murtuzaali Surti

Great

Collapse
 
sercan profile image
Sercan Sebetçi

I think the most important problem of plugins in Visual Studio Code isn't knowing which plugin has which effect. For example, today I used the ?? (nullish coalescing operator) while working with JavaScript. A plugin inserted a space character between characters in this operator when I saved the file. I was able to avoid this effect after opening and saving the file in another editor. I tried all the suggestions in the forums but it didn't work. Someone tell me this is a joke!

Collapse
 
micahfang profile image
Micah Fang

I used to use import cost too, but now i found that it's will cost a bit seconds to wait the size to calculator. It's kind of slowing down my coding for me.
Maybe it's just for me, do you also has this problem?

Collapse
 
stivncastillo profile image
Stiven Castillo

Yes, this consumes a lot of memory and the vscode is very slow. I don't reccommend install Import Cost.

Collapse
 
murtuzaalisurti profile image
Murtuzaali Surti

Yeah it takes some time to calculate

Collapse
 
andrewbaisden profile image
Andrew Baisden

Good list I know some of them already and have them installed.

Collapse
 
murtuzaalisurti profile image
Murtuzaali Surti

That's great!

Collapse
 
towfiqi profile image
Towfiq I.

Thanks so much for CSS Peek. Its a so useful. I can't believe I have been wasting my life switching between files and searching for css classes like a caveman when this existed.

Collapse
 
murtuzaalisurti profile image
Murtuzaali Surti

Thanks! CSS Peek is certainly useful!

Collapse
 
abdrzqsalihu profile image
Abdulrazaq Salihu

Thanks for sharing

Collapse
 
murtuzaalisurti profile image
Murtuzaali Surti

🙌

Collapse
 
skitzdev profile image
Justin Praßl

1 and 2... Makes it all so easy 😂 Thanks!

Collapse
 
murtuzaalisurti profile image
Murtuzaali Surti

🚀

Collapse
 
mjcoder profile image
Mohammad Javed

Numbers 1 & 2 look great, I'll be sure to install this - they'll come in handy.

Collapse
 
5alidshammout profile image
5alidshammout

after looking at my extensions when I added what I need from those, they become 50,
after removing unused ones they become 27, so much less