VSCode Extensions I'm in LOVE with

Tina Huynh - Apr 14 '22 - - Dev Community

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!

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Terabox Video Player