VS Code : Aesthetics
Tags: vscode, productivity, javascript, webdev
Published: 2021-12-11 01:06:45


**Visual Studio Code** is the most popular software development environment at the moment. It is developed by the guys at **[Microsoft](https://code.visualstudio.com/)** and has a **GREAT** community and ecosystem to support it. You can browse through the community-created open-source extensions that help fill in the gaps in productivity needs. 

You can truly accelerate your development with these tools and improve your collaboration with teammates. However, the sheer number of options make it difficult to choose the ones that will be most useful. Therefore, I've curated a series detailing many _extensions_ I personally think you should try.

> If you like my **_Series_**, make sure to click the :heart: icon on every post and :bookmark: bookmark to save for later :smile: .


---

### 1. <u>[Editor Themes](https://marketplace.visualstudio.com/search?target=VSCode&category=Themes&sortBy=Installs)</u> & <u>[Icon Packs](https://marketplace.visualstudio.com/search?term=icon&target=VSCode&category=All%20categories&sortBy=Relevance)</u>
Color themes let you modify the colors in Visual Studio Code's user interface to suit your preferences and work environment. My personal favorites are:
* [One Dark Pro](https://marketplace.visualstudio.com/items?itemName=zhuangtongfa.Material-theme)
![one dark pro](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/doafzdfxad473nkgg1jn.png)
* [Github Themes](https://marketplace.visualstudio.com/items?itemName=GitHub.github-vscode-theme)
![github theme](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3weyffb179k8h0xybkxb.png)
* [Noctis](https://marketplace.visualstudio.com/items?itemName=liviuschera.noctis)
![noctis theme](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zisdn96cmo17asxi020f.png)

#### Icon Themes
The best **icon themes** give meaningful good looking icons to Files & the Editor:
* [vscode-icons](https://marketplace.visualstudio.com/items?itemName=vscode-icons-team.vscode-icons) (files)
* [material-product-icon-theme](https://marketplace.visualstudio.com/items?itemName=PKief.material-product-icons) (editor) 

---
### 2. <u>[Beautify](https://marketplace.visualstudio.com/items?itemName=HookyQR.beautify)</u> & <u>[Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)</u>
![beautify vs prettier](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i86g076sdz5u2kdx6o1s.png)
Even if you're a good programmer, if you don't take care of proper formatting, your work will get messy **QUICK !!**. _Code Formatters_ aid in the efficient cleaning up of code. It appears more organized, and when someone looks at your code, it will also help to give a <u>positive impression</u>.
These extensions give you the power to format hundreds of lines of code with a click of a button. But Prettier doesn’t work for all languages. I would recommend **Beautify** (~~prettier~~ :-1:), I prefer the styling scope to that of Prettier's.

---
### 3. <u>[Peacock](https://marketplace.visualstudio.com/items?itemName=johnpapa.vscode-peacock)</u>
![peacock windows](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/050q8yzvy4qirn3inglr.png)
With this extension you can "subtly change the color of your Visual Studio Code workspace". This is helpful when you have multiple VS Code instances opened up and you want to classify them by color :rainbow:. And also when using [Live Share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare) to quickly identify your own editor.

---
### 4. <u>[Better Comments](https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments)</u>
![better comments](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0t3ytbb4cxzhocw8tacc.png)
This extension will help you create _more human-friendly comments_ in your code. Color coding for **categories** of Comments. 
With this extension, you will be able to categorise your annotations into:
* Alerts
* Queries
* TODOs
* Highlights

---
### 5. <u>[Code Snap](https://marketplace.visualstudio.com/items?itemName=adpyke.codesnap)</u> & <u>[Fira Code Font](https://fonts.google.com/specimen/Fira+Code#standard-styles)</u>
![code snap with fira code font](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kxte8959hymaimj6n0ha.png)

* **FIRA CODE** : Programmers utilize a lot of symbols, which are frequently encoded with many characters. Sequences like ->, =, or == are single logical tokens for the brain thus the creation of this font. <br />
* **CODE SNAP** : enables you to be able to "Take beautiful screenshots of your code in VS Code!". All in a "Mac" like :smirk: Desktop frame.

---
### 6. <u>[Bracket Pair Colorizer 2](https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer-2)</u>
![bracket pair colors](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a5uikzrubvij0l8pqcxd.png)
The purpose of this extension is pretty obvious & the name is self-explanatory... 
> **NB:** "This feature is now native to vscode with a recent [_update_](https://code.visualstudio.com/blogs/2021/09/29/bracket-pair-colorization) to the Editor"

---
<br />
> **Ohh !! and One more trick** :star:, "**move your Sidebar to the RIGHT**" :wink:

<br />
What other extensions add to the aesthetic feel of your personal <br />VS Code experience :question:. _Drop a suggestion_ in the Comments section :point_down:...

<br />
> [@ free_one](https://GitHub.com/michael-azogu) Follow me on GitHub
> Check out the next POST :+1: