DEV Community

Cover image for VSCode Extensions I'm in LOVE with
Tina Huynh
Tina Huynh

Posted on • Updated on

VSCode Extensions I'm in LOVE with

Table of Contents

  1. CodeSnap
  2. Colorize
  3. Beautify
  4. Live Server
  5. autoDocstring
  6. GitLens
  7. Remote - SSH
  8. .gitignore
  9. Auto Rename Tag
  10. CSS Peek
  11. Conclusion

CodeSnap

Quickly allows you to create screenshots of your code by simply highlighting the respective snippet within your project. It's that easy! No more opening a new tab, copying over the code, and saving the photo. The image will be generated live side by side with options to cut, copy, and paste.

Codesnap

Colorize

Colorize visualizes color variables by highlighting them with their color value. This is a handy timesaver for translating hex codes and variable names.

colorize

Beautify

Beautify will easily help you with any kind of problems with readable your code and so on. Everything that you need is: Press F1 and choose “Beautify file”. It will automatically fix what you want.

beautify

Live Server

When you write your HTML, CSS, or JavaScript file you can press “Go Live” at the bottom of your VSCode window and it will automatically add your changes on a webpage without any reloads, etc.

Image description

autoDocstring

The docstrings are declared using ”'triple single quotes”' or “””triple double quotes””” just below the class, method or function declaration. All functions should have a docstring.

python docs

GitLens

GitLens is an open-source extension for Visual Studio Code. GitLens simply helps you better understand code. Quickly glimpse into whom, why, and when a line or code block was changed. Jump back through history to gain further insights as to how and why the code evolved.

Remote SSH

The Remote - SSH extension lets you use any remote machine with a SSH server as your development environment. This can greatly simplify development and troubleshooting in a wide variety of situations.

remote ssh

gitignore

Lets you pull .gitignore templates from the https://github.com/github/gitignore repository. Language support for .gitignore files.

gitignore

Auto Rename Tag

Auto rename paired HTML/XML tag

auto rename

CSS Peek

Allow peeking to css ID and class strings as definitions from html files to respective CSS. Allows peek and goto definition.

css peek

Conclusion

What are your favorite VSCode extensions? I excludes icon packs and themes but I would love to see what everyone is using out there!

Happy coding!

Discussion (44)

Collapse
nickytonline profile image
Nick Taylor (he/him) • Edited on

Nice list!

I was a huge fan of the Settings Sync extension for the longest time.

VS Code has native sync now, so the extension is no longer necessary. 😎

Looking forward to your next post!

Collapse
rishabh570 profile image
Rishabh Rawat

I've recently used settings sync to clone my VSCode setup onto the new laptop. It makes things really seamless 👌🏻

Collapse
jeremyf profile image
Jeremy Friesen

It's always great seeing the list of extensions that folks love. Even as an Emacsian, seeing how others are using their editor helps me envision what may be worth looking to add / experiment with in my text editor.

Collapse
chrisfoste profile image
Christian Foster

Emacsian 😂 I just thought of another one, emacsimalist. Cool kids use emacs or vim.

Collapse
jonaspetri profile image
Jonas Petri

How do you call someone that uses VSCode then? VSCoder? That sounds lame.

Thread Thread
jeremyf profile image
Jeremy Friesen

A VSCodeller (as in yodeling?)

Collapse
jonaspetri profile image
Jonas Petri

Good list! I use several of these! For Live Server, you should try Five Server instead. Live Server is no longer maintained, and Five Server also has some other nice features like updates WITHOUT saving.

Collapse
ajulio761 profile image
Julio Andre

Well, the last release is from March... Look: github.com/ritwickdey/vscode-live-... so it is maintained.

Collapse
jonaspetri profile image
Jonas Petri

Yeah ok, it is maintained, but Five Server still has more features.

Collapse
tmchuynh profile image
Tina Huynh Author

Noted! Thanks <3

Collapse
genesmith profile image
Gene Smith

If you are looking for a lightweight replacement for Postman, you should really check out Thunder Client. Indispensable for testing APIs within VSCode. thunderclient.com/

Collapse
tmchuynh profile image
Tina Huynh Author

Oh thank you! Will definitely look into it

Collapse
youpiwaza profile image
max

Great article, there's a couple I didn't know but will definitly check out.

(Also, some of the picture aren't explicit enough, IMO :3) but still thanks for sharing.

Here's a couple I use a lot :

  • Better comments > simple syntax for colored comments
  • Bookmarks > easily jumps accross file or files
  • change-case > Easily switch from one case to another, oh god so much time gained
  • eslint > JS linter
  • indent-rainbow > Helps for indentation
  • Markdown > documentation made easy
    • all in one
    • preview enhanced
    • lint
  • Material Icon Theme > Better browser tree
  • Todo Tree > Set "TODO: " as comment for stuff to do later, and this plugins help retreiving all
  • Toggle quotes > So much time gained too. In one shortcut circle through ' > " > `

Have a good day :)

Collapse
tmchuynh profile image
Tina Huynh Author

Thanks for the suggestions

Collapse
aladin002dz profile image
Mahfoudh Arous

nice list, I installed codesnap. I use also "Path Intellisence", "HTML End Tag Labels", "Live Sass Compiler", "indent-rainbo":
marketplace.visualstudio.com/items...
marketplace.visualstudio.com/items...
marketplace.visualstudio.com/items...
marketplace.visualstudio.com/items...

Collapse
tmchuynh profile image
Tina Huynh Author

Oooo interesting thanks for sharing

Collapse
khuongduybui profile image
Duy K. Bui • Edited on

No. 8: As many people mentioned, this is now a built-in feature.
No. 9: I'd suggest Auto Complete Tag bundle, which also includes Auto Close Tag from the same author of Auto Rename Tag.

Collapse
speedopasanen profile image
Toni

If you're a TS / JS dev like me:

  • ESLint
  • Prettier

If you're an Angular dev like me:

  • Angular Extension Pack

Anyone:

  • GitLens
  • Github Copilot (at the moment you need to be accepted for beta testing i guess)
Collapse
tmchuynh profile image
Tina Huynh Author

Thanks for the suggestions!

Collapse
spaboi profile image
SPABOI

There’s also a monokai theme extension which I personally love and use while coding

Collapse
tmchuynh profile image
Tina Huynh Author

I'm trying to look for a better icon and overall theme :/ I'm not very satisfied with mine at the moment. If anyone has any suggestions, I'd greatly appreciate it!

Collapse
dominik90 profile image
Dominik Bartsch

I use the material icons addon now for quite some years and like it very much.

Collapse
spaboi profile image
SPABOI

Will definitely keep on exploring more helpful extensions or VS Code

Collapse
kadeesterline profile image
Kade Esterline

I hadn't heard of most of these, thanks for sharing!

Collapse
tmchuynh profile image
Tina Huynh Author

Of course! Glad it was helpful

Collapse
paramo9 profile image
Paramo9

I really love Tabnine, it's a really really good AI assistance for fast coding, it predicts code such as name functions, parameters, string structures, and things like that, it's perfect if you like the "snippet" thing, it really saves much time. Here's the link:

https://www.tabnine.com/install/vscode?utm_term=&utm_source=google.com&utm_medium=cpc&utm_campaign=14854202152&utm_content=&gclid=Cj0KCQjw3v6SBhCsARIsACyrRAmN2fqJIWFS5PQt9yL7mcmAEm-tfFaAcgngcno9LqkZtDRNr5Uuom4aAjEfEALw_wcB

Collapse
tmchuynh profile image
Tina Huynh Author

Thanks for sharing!

Collapse
wjk22 profile image
Wojtek Kalka

Vim extension the most important :)

Collapse
josegus profile image
Gustavo Vasquez

I moved my settings a few weeks ago to the native setting sync included in vscode. Best decision of 2022, really easy to use and it synchronize with all my computers automatically.

Collapse
lizardkinglk profile image
sndp

Material icon theme for icons.
Github Dark High Contrast is the best theme imo.

Collapse
tmchuynh profile image
Tina Huynh Author

Beautiful!

Collapse
code_with_ali profile image
AlixaProDev

wow, this is quite interesting. though I have most of them already installed.
Happy coding Tina.

Collapse
arthurassuncao profile image
Arthur Nascimento Assunção

Please try Github Copilot (need to subscribe for beta tester)

Collapse
tmchuynh profile image
Tina Huynh Author

Will look into it... is there only beta right now?

Collapse
arthurassuncao profile image
Arthur Nascimento Assunção

Yes, but it's getting easier become beta tester.

Thread Thread
tmchuynh profile image
Tina Huynh Author

Ahh interesting

Collapse
harshitkumar31 profile image
Harshit Kumar • Edited on

I have a lot of love for code tour - marketplace.visualstudio.com/items...
It makes sharing knowledge about a codebase so easier.

Collapse
tmchuynh profile image
Tina Huynh Author

Thanks for sharing

Collapse
marifm1986 profile image
Arif Matubber

Thank you so much

Collapse
dongseoki profile image
dongseoki

My favorite vs code extension is code converter~!
It makes me to change snake case to camel case, and also change reversly works too!

Collapse
tmchuynh profile image
Tina Huynh Author

Oh interesting

Collapse
raaj profile image
Raaj

Nice

Collapse
ivis1 profile image
Ivan Isaac

Wonderful post