VSCode Extensions I'm in LOVE with
Tags: vscode, beginners
Published: 2022-04-14 10:06:27

## Table of Contents
1. [CodeSnap](#codesnap)
2. [Colorize](#colorize)
3. [Beautify](#beautify)
4. [Live Server](#live-server)
5. [autoDocstring](#autodocstring)
6. [GitLens](#gitlens)
7. [Remote - SSH](#remote-ssh)
8. [.gitignore](#gitignore)
9. [Auto Rename Tag](#auto-rename-tag)
10. [CSS Peek](#css-peek)
11. [Conclusion](#conclusion)


### [CodeSnap](https://marketplace.visualstudio.com/items?itemName=adpyke.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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wno9ihyp1fl5zlonkra4.png)


### [Colorize](https://marketplace.visualstudio.com/items?itemName=kamikillerto.vscode-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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2dft7uaz55d4u0ff8j87.png)


### [Beautify](https://marketplace.visualstudio.com/items?itemName=HookyQR.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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1vvwdp3rdotc9ss80ruu.png)

### [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer)
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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4z1eysq11a32zncdyzwj.png)


### [autoDocstring](https://marketplace.visualstudio.com/items?itemName=njpwerner.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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eontoe2k4fzgk6thv1xu.png)

### [GitLens](https://marketplace.visualstudio.com/items?itemName=eamodio.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](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tahxs672h2t03wwfjzby.png)

### [gitignore](https://marketplace.visualstudio.com/items?itemName=codezombiech.gitignore)
Lets you pull .gitignore templates from the https://github.com/github/gitignore repository. Language support for .gitignore files.

![gitignore](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mygzh74y302wwfp32cvu.png)

### [Auto Rename Tag](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag)
Auto rename paired HTML/XML tag

![auto rename](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3p4o76k0qb5hurpxyv73.png)

### [CSS Peek](https://marketplace.visualstudio.com/items?itemName=pranaygp.vscode-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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x3p0tdbskn8cxg71ogqc.png)


### 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!