DEV Community

loading...
Cover image for 💡 10 VS Code extensions I can't code without

💡 10 VS Code extensions I can't code without

godcrampy profile image Sahil Bondre ・4 min read

VS Code is my favourite text editor. It is the most extensible and popular code editors out there. And surprisingly it's made by Microsoft (i know). In my opinion, no other IDE or editor comes even half as close as to what VS Code does. What makes it so robust is it's extension system. It allows you to write an extension for every possible use case you can think of. Here are my top 10 extensions.

1. Beautify

Beautify

ext install HookyQR.beautify

Beautify allows you to format html, js, css, JSON and sass file with your own custom style configuration. It extends over the internal js-beautify and makes it customizable to your personal style.

2. Better Comments

Better Comments

ext install aaron-bond.better-comments

This extension allows you to add semantics to your comments. It categorizes into categories like comments into alerts, queries, todos and highlights.

Better Comments Screen Shots

3. Bookmarks

Alt Text

This one is a lifesaver, especially if you find yourself lost in hundreds of lines of code. This extension allows you to bookmark any line of code. Then when you need to go back all you need to do is browse through the list of bookmarks and select the line you want to visit.

Alt Text

4. Bracket Pair Colorizer 2

Bracket Pair Colorizer

ext install CoenraadS.bracket-pair-colorizer-2

This one does exactly what its name suggests. It colour codes correlated pairs of brackets. This helps a lot when you end up several scopes deep into code.

Bracket Pair Colorizer

5. Format in Context Menus

Alt Text

ext install lacroixdavid1.vscode-format-context-menu

This extension allows you to format all your files by just selecting them from the side-bar. This is especially useful when you have tonnes of files, and your environment does not support formatters and linters.

Alt Text

6. Git Graph

Alt Text

ext install mhutchie.git-graph

It allows you to view a Git Graph of your repository, and quickly perform Git actions from the graph. It is highly configurable and has lots of features. Explaining the goodness of this extension will probably take a whole new post.

Alt Text

7. Git Lens

Alt Text

ext install eamodio.gitlens

GitLens helps you to reflect code authorship at a glance via Git blame annotations and code lens. It enables you to seamlessly navigate and explore Git repositories, gain valuable insights via robust comparison commands, and so much more.

Alt Text

8. indent-rainbow

Indent Rainbow

ext install oderwat.indent-rainbow

This extension colourizes the indentation of code, in different colours on each indent level. This is especially helpful in deep scopes with languages like Python.

9. Path Intellisense

Alt Text

ext install christian-kohler.path-intellisense

Path Intellisense adds auto-completion to file paths. While VS-Code natively supports auto-completion, it is limited to only HTML, CSS and JavaScript files. This extends it to all languages and file types.

Alt Text

10. Total Lines

Alt Text

ext install praveencrony.total-lines

This a handy little extension add the number of lines of the currently opened file in the status bar. A neat addition to your extension collection.


And that is it folks. These are my top VS Code extensions. I'd like to hear your favorite extensions in the comments. Oh, BTW do you want to learn Bash? Here's my crash-course post on Shell Scripting:


🌟 I made some Cheat-Sheets
🚀 Stalk me on Instagram | Github | Twitter | Website
😄 Have a wonderful day!

Discussion

pic
Editor guide
Collapse
robole profile image
Rob OLeary

I started using VSCode as my primary IDE recently, but one thing I was curious about is the performance of having a big list of extensions installed. It is something I need to research more.

I was going to use VSCode for HTML, CSS, JS, Java, Node, and Ruby; but as I was looking for certain features that I would be accustomed to using in other IDEs for different languages or use cases, I found the list was growing too large. So, I decided to use VSCode for frontend only

Collapse
sangram profile image
Sangram

You won't need all the extensions all the time, my approach is creating extension packs as per development environment equipment and enable/disable them accordingly. Like Web Development, Python, .Net , Docker, Utility extension packs

Collapse
robole profile image
Rob OLeary

That might be what I'm looking for. I must look into it soon. Thanks for sharing.

Thread Thread
sangram profile image
Sangram

Here is my development extension pack, if you are interested.
github.com/sangram-chavan/producti...

Cheers !!

Collapse
godcrampy profile image
Sahil Bondre Author

Agreed. Sometimes VS Code does slow down. But the performance requirements of Code is way lesser than IDEs like IntelliJ or Android Studio. I think the reason Code is popular is coz it sits right in between Text Editors and IDEs. Almost as robust as IDEs while being almost as performant as text editors. VSC has found the sweet spot.

Collapse
robole profile image
Rob OLeary

Yes, that's been my experience with an older laptop also. Android Studio is a monster, I have to close almost everything when I use it. IntelliJ is pretty good. If VSCode only loaded extensions based on the codebase or a configuration, I would be encouraged to use it for more languages/project types. For now, I will keep my extension list on the lower side

Thread Thread
empz profile image
Emiliano Parizzi

You know you can have all the optional extensions disabled and enable the ones you need for each workspace/project? The settings get saved in the .vscode folder in the project.

Collapse
javaarchive profile image
Raymond

I've only been using VS Code and it's extensions for like half an year and when I read this blog post I'm like "Where have I been?". The bookmark extension could literally save me lots of minutes everyday. Bracket Colorizer would also improve my workflow, especially when I'm lost in mountains of code.

Collapse
ama profile image
Adrian Matei

If you'd like to bookmark your "code snippet" also for other projects or from the web check this feature Bookmarking code snippets with Codelets I added to bookmarks.dev

Collapse
godcrampy profile image
Sahil Bondre Author

sounds like a neat idea 🔥

Collapse
godcrampy profile image
Sahil Bondre Author

I discovered bookmarks lately too. It has doubled my productivity indeed.

Collapse
totallymustafa profile image
Syed Ahmad Mustafa

Great posts, I wasn't aware about many of these. I also made a post regarding my favourite Vs Code extensions as well. I guess everyone has their own set of useful extensions.

Collapse
godcrampy profile image
Sahil Bondre Author

Thanks 😄.
Will definitely check out your collection of extensions.

Collapse
niltongmjunior profile image
Nilton Gomes Martins Junior

These are great! Thanks for sharing Sahil!

Collapse
dmahely profile image
Doaa Mahely

I immediately installed Bookmark! I take too many screenshots of code blocks to refer to later 😅

Collapse
godcrampy profile image
Collapse
laszland profile image
Laszlo Roland Kiss

I'm really thankful for your post, some of the extentions were unknown for me but I will try them for sure.

Collapse
godcrampy profile image
Sahil Bondre Author

i am glad 😊

Collapse
deepslam profile image
Dmitry Ivanov

Thank you so much! The post is so useful! I didn't hear about many of these plugins.

Collapse
godcrampy profile image
Sahil Bondre Author

I am glad 😃

Collapse
charmingtribble profile image
TribbleCharming

Most things work in IntelliJ by default. And lots more. Why bother with VSCode?

Collapse
godcrampy profile image
Sahil Bondre Author

Less memory usage! (Although not as less)

Collapse
mohnnadbahaa profile image
Mohannad Bahaa

thanks , the only one i do not have it is git graph , i am using sourcetree but i will try git graph ext

Collapse
godcrampy profile image
Sahil Bondre Author

need to have a look at sourcetree as well 😄

Collapse
pavermakov profile image
Pavel Ermakov

These are nice. I will definitely give them a try. Thank you!

Collapse
godcrampy profile image
Sahil Bondre Author

thank you 😊

Collapse
minkhant285 profile image
Collapse
sangram profile image
Sangram

Here is my development extension pack, if any one is interested.
github.com/sangram-chavan/producti...
I have created clone repo & run mom install.
You will vsix file, which will help install all packages automatically
Cheers !!

Collapse
marianicole profile image
MariaNicole

Thanks for sharing this list. Quite useful tools. I particularly liked the Bracket pair colorizer... didn't know something that existed.. gonna make my coding life a little easier!

Collapse
sarahob profile image
Sarah 🦄

Great collection 👍 I haven't heard of Bookmarks before, it's gonna be a game changer 🙏😅

Collapse
godcrampy profile image
Sahil Bondre Author

Well thank you for reading 😄

Collapse
delta456 profile image
Swastik Baranwal

Thanks for listing these, I am sure now my productivity will increase now!

Collapse
godcrampy profile image
Sahil Bondre Author

Thanks to you man for reading!

Collapse
johnsoncarl profile image
AMAN PANDEY

Great. Thank you for compiling this list.

I am a customization freak. And haven't heard many of these plugins before.
Keep up.😉

Collapse
godcrampy profile image
Collapse
nickcoffey profile image
Nicholas Coffey

Bracket Colorizer looks like a game changer!

Collapse
godcrampy profile image
Sahil Bondre Author

Indeed it is 😊

Collapse
ashc0des profile image
Aishwarya Borkar

This is a wonderful list! I wish I'd known about Path Intellisense earlier, file imports in Ruby are giving me a big headache. 🤣

Collapse
godcrampy profile image
Sahil Bondre Author

Even I discovered it when React started giving me headache 😂

Collapse
kujian profile image
前端开发博客

Hello,nice post and nice extensions, can you authorize me to translate it into Chinese?