DEV Community

Cover image for VS Code : Aesthetics
Michael
Michael

Posted on • Updated on

VS Code : Aesthetics

Visual Studio Code is the most popular software development environment at the moment. It is developed by the guys at Microsoft 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 โค๏ธ icon on every post and ๐Ÿ”– bookmark to save for later ๐Ÿ˜„ .


1. Editor Themes & Icon Packs

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:

Icon Themes

The best icon themes give meaningful good looking icons to Files & the Editor:


2. Beautify & Prettier

beautify vs prettier
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 positive impression.
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 ๐Ÿ‘Ž), I prefer the styling scope to that of Prettier's.


3. Peacock

peacock windows
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 ๐ŸŒˆ. And also when using Live Share to quickly identify your own editor.


4. Better Comments

better comments
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. Code Snap & Fira Code Font

code snap with fira code font

  • 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.
  • CODE SNAP : enables you to be able to "Take beautiful screenshots of your code in VS Code!". All in a "Mac" like ๐Ÿ˜ Desktop frame.

6. Bracket Pair Colorizer 2

bracket pair colors
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 to the Editor"


Ohh !! and One more trick โญ, "move your Sidebar to the RIGHT" ๐Ÿ˜‰



What other extensions add to the aesthetic feel of your personal
VS Code experience โ“. Drop a suggestion in the Comments section ๐Ÿ‘‡...

@ free_one Follow me on GitHub
Check out the next POST ๐Ÿ‘

Discussion (43)

Collapse
mike_andreuzza profile image
Michael Andreuzza • Edited on
Collapse
elefint profile image
elefint

Had a look and it looks great but struggling to find the Jetbrains version or is not ready yet?

Collapse
mike_andreuzza profile image
Michael Andreuzza

I have a link here in the landing page, i think i forgot to link from the repo. so sorry.

serendipitytheme.com/
On jetbrains is only available the text. I still don't know how to create the whole ui...

Thread Thread
elefint profile image
elefint

Great, thank you mate, I'll download it now and give it a try.

Really like the colours you have used!

Thread Thread
mike_andreuzza profile image
Michael Andreuzza

thank you so much!

Collapse
sefatanam profile image
Sefat Anam

you made my vs code beautiful ๐Ÿ’–

Collapse
mike_andreuzza profile image
Michael Andreuzza

Oh wow Sefat! That makes me happy. Which one did you go with Serendipity or Sinequanone?

Thread Thread
sefatanam profile image
Sefat Anam

Serendipity ๐Ÿ’–

Collapse
free_one profile image
Michael Author

this is very nice ๐Ÿ‘
Could you take me through the steps it takes to code up an Extension.
I'm well versed in JavaScript, but a little familiar with typescript

Collapse
mike_andreuzza profile image
Michael Andreuzza

I am so happy that you like it.

Not all extensions are created equally, it depends of what kind of extension is.

you can read here more about.

Thread Thread
free_one profile image
Michael Author

thanks alot, I'll try to create a fun extension soon & post about it.

Thread Thread
mike_andreuzza profile image
Michael Andreuzza

you are going to fun.

the worst part isto navigate through Azure... Microsoft platform....

looking forward to what you build!

Thread Thread
free_one profile image
Michael Author

Can I get a High Quality picture of your theme. I want to share it.

Thread Thread
mike_andreuzza profile image
Michael Andreuzza • Edited on

Absolutely, I am on mobile but you can find them here.

producthunt.com/posts/serendipity-3

edit:Is the. ost clear I have.

Thread Thread
free_one profile image
Michael Author

awesome ๐Ÿ˜Ž

Collapse
sirmomster profile image
M. Mitch

In your header text it says them instead of theme. Might want to change that as the theme itself looks very nice ๐Ÿ‘

Collapse
mike_andreuzza profile image
Michael Andreuzza

oops!

thank you so much! will fix it!

Collapse
free_one profile image
Michael Author

make sure to click the โค๏ธ button ๐Ÿ˜

Collapse
roseck16 profile image
YolticCruzTello

I once saw an extension that changed the welcome page to something like a Hub that showed up your latest projects, popular github repos, even a todo list and the weather in your location. Sadly I don't remember the name and I can't find it. Does someone know an extension like that?

Collapse
roseck16 profile image
YolticCruzTello

I did some extensive research and finally found it. It's called Marquee.

Collapse
free_one profile image
Michael Author

I'm gonna check it out right away !

Collapse
free_one profile image
Michael Author

if you do find it
please notify us

Collapse
free_one profile image
Michael Author

wow ๐Ÿ˜ณ all in one ?
my closest guess is the PROJECT DASHBOARD extension for your latest projects.

Collapse
nkuwakwe profile image
Nelson Uwakwe

Peacock and Noctis look great!

Collapse
free_one profile image
Michael Author

how many extensions do you have out of the few I've mentioned

Collapse
nkuwakwe profile image
Nelson Uwakwe

CodeSnap and Noctis

Collapse
simplytimilehin profile image
Timmyy3000

Wonderfully presented and deffs helpful ๐ŸคŒ๐Ÿพโœจ

Collapse
free_one profile image
Michael Author

I'll keep going at it. โœŒ๐Ÿผ

Collapse
geraldmuvengei06 profile image
Gerald

I switched to coding after being a writer for (proswriters.com). In writing, I only has one theme - the light theme of google docs/microsoft word. Now that I'm coding, vscode is my daily driver. And I like how themes can be changed. Its really great

Collapse
nnanyereclinto1 profile image
NoLE Clinton

Great article thanks

Collapse
free_one profile image
Michael Author

๐Ÿ’ฏ

Collapse
free_one profile image
Michael Author

Any suggestions ? ๐Ÿค”

Collapse
hrrarya profile image
Hridoy Mozumder

What is the font name in the Noctis theme?

Collapse
free_one profile image
Michael Author

I don't know, but I will find out

Collapse
free_one profile image
Michael Author

it turns out, "Noctis" is a font itself.
It has 15+ variations.

Collapse
sergei profile image
Sergei Sarkisian

You don't need Brackets Pair Colorizer anymore as it's built-in feature in VS Code.
Also, check out pretty cool font from JetBrains: jetbrains.com/lp/mono/

Collapse
free_one profile image
Michael Author

I did mention that it's now native.

Collapse
grenmath profile image
Mathieu Grenier

Bracket Pair Colorizer 2 is deprecated! VSCode support natively
Notice VSCode send warning about "Bracket Pair Colorizer 2" will be deprecated and not longer maintained

Collapse
yanivnoema profile image
Yaniv Noema

๐Ÿ‘๐Ÿ‘

Collapse
free_one profile image
Michael Author

thanks ๐Ÿ‘

Collapse
free_one profile image
Michael Author

part two is out

Collapse
shanvirk profile image
Shan-Virk

Can you tell me please in Noctis theme which font isused ?

Collapse
free_one profile image
Michael Author

the Noctis font