DEV Community

Cover image for Show and tell: Show off your VS Code setup :)
Daniel Waller (he/him)
Daniel Waller (he/him)

Posted on

Show and tell: Show off your VS Code setup :)

Hey DEV community 👋

I primarily use VS Code for working with React/TypeScript and Python.
I could use some help and inspiration for really getting the most out of my VS Code experience!

I'd love to see your setups :)
From pretty themes and icon sets to your favorite plugins for productivity and ease of use.

Discussion (49)

Collapse
andrewbaisden profile image
Andrew Baisden

Heres mine

Theme: Dracula
Icons: Material Icon Theme
Font: Fira Code

https://dev-to-uploads.s3.amazonaws.com/i/t3mf6qfh89k6nkdhpflb.png

Collapse
arunmurugan78 profile image
Arun Murugan

This is exactly my setup too!

Collapse
nesci28 profile image
Mark Gagnon

Exactly my setup

Collapse
pablohs1986 profile image
Pablo Herrero

Damn hell... I was with Shades of Purple, but I have to go back to Dracula... it's really too good!!!

Collapse
klyse profile image
klyse

guess who just changed his theme <3

Collapse
georgedoescode profile image
George Francis

Snap!

Collapse
paulmicheli profile image
Paul Micheli

Ooooo I like this, thank you

Collapse
whoisbsa profile image
Matheus B.

Just the most beautiful setup, ever!

Collapse
pablohs1986 profile image
Pablo Herrero • Edited

Here's mine:

Theme (sorry, my heart is divided):

  • Dracula (best theme ever...)
  • Shades of purple (best theme ever... too)

Icons: VSCode icons
Font: Fira Code

myVSCode.
myVSCode

Collapse
andrewbaisden profile image
Andrew Baisden

Shades of purple was my previous theme I even had it for Hyper and iTerm 2. I would probably still be using it if it was not for the fact that I was doing a Kotlin tutorial with IntelliJ IDEA and the teacher was using Dracula which looked cool. Then I remembered that VS Code also has a Dracula theme with over a million downloads. I like my editors to look the same so I changed. But my mood can change like the weather and I never got bored of Shades of purple 😁

Collapse
pablohs1986 profile image
Pablo Herrero

Yesss, I love Dracula too, it was my previous theme :)

Collapse
danielw profile image
Daniel Waller (he/him) Author

Oh yes I've used that before as well!

If you like purple and feel really crazy, check out 'Cyberpunk' for maximum saturation purple and screaming green accents :D

Collapse
andrewbaisden profile image
Andrew Baisden

I might actually give that a try when the game Cyberpunk 2077 is released. Total immersion 😎

Collapse
mxarc profile image
Alfonso Reyes • Edited

I use lucy theme, it comes with 2 variations. I fell in love with the colors of this theme <3

For productivity plugins I like git graph since you can do a few things without the use of the git command and also visualize current branches and previous commits in a visual way just like GitKraken. I also use bookmarks plugin and GitLens to supercharge git support.

Icon theme: Material Icons

click me to see setup

Collapse
denvermullets profile image
denvermullets

that gitgraph looks really cool

Collapse
danielw profile image
Daniel Waller (he/him) Author

Oh yes that git graph does look very nice! Will definitely check out lucy as well :)

Collapse
shanmen profile image
ShanMen

What font is this?

Collapse
mxarc profile image
Alfonso Reyes

It's Cascadia Code

Collapse
whoisbsa profile image
Matheus B.

ultrawide monitor for see all this stuf

Collapse
get_hariharan profile image
Hari Haran😎

+1 for #Angular

Collapse
kapcash profile image
Florent Catiau-Tristant

This is actually NestJS, a nodes framework :)

Collapse
amberisvibin profile image
Amber 🏳️‍🌈

I am a fan of Jetbrains Mono as a font, it's ligatures are fantastic.
As far as plugins, I don't have much other than some Rust-related stuff.
I have my terminal set to zsh, for convenience.
I am still looking for a good theme.

Collapse
danielw profile image
Daniel Waller (he/him) Author

Oh they have ligatures as well? I never realized that...always just installed FiraCode. I'll need to check that out :D

Collapse
andrewbaisden profile image
Andrew Baisden

I am exactly the same I did not know either I just defaulted to FiraCode. I will do the same it looks cool.

Collapse
demenskiy profile image
Yaroslav Demenskiy • Edited

Hello! I use my own theme Mokka. It's developed especially for JavaScript and React development. Also, there is support for Python and PHP.

Theme: Mokka;
Font: Cascadia Code;
Icons: Material Icon Theme.

My theme Mokka is available on the marketplace: marketplace.visualstudio.com/items...

Mokka preview

Collapse
danielw profile image
Daniel Waller (he/him) Author

Ooh good work! Haven't seen Mokka before. I really like the soft color pallete and clear design goal of minimizing visual clutter. Will definitely try it out :)

Collapse
soorajsnblaze333 profile image
Sooraj • Edited

Here's my vs code setup :)

Theme: Ayu Dark Bordered
Icons: Material Icon Theme

I like this setup because of the darker background and the contrasting code colors and this makes the code clearly visible.

Collapse
worldwidejamie profile image
Jamie Smith • Edited

Theme:
SynthWave '84 – Gimme that sweet neon glow.

Icons:
vscode-icons – If it's good enough for the Goonies, it's good enough for me.

Font:
Fira Code – The first alternative-to-default font I ever used. Nostalgia.

Extensions:
GitLens – Must have
Dash – Use it all the time to look-up documentation
Snake Trail – Completely useless but something feels off without it

Collapse
danielw profile image
Daniel Waller (he/him) Author

Wooah Synthwave Looks glorious 😍🤯

Collapse
paritosh_pundir profile image
Paritosh Pundir • Edited

I try to keep things very simple.

Sometimes dark and sometimes light.
Sidebar on the right and mostly hidden.
Font - Fira Code
Theme - Github light and dark


Collapse
danielw profile image
Daniel Waller (he/him) Author

Yes! Github Light ftw I love how clean it looks

Collapse
gulajavaministudio profile image
Gulajava Ministudio

Here my VS Code setup, feel free to try.

Theme : Mayukai Theme (Mirage and Mono)
Icon : Material Icon Theme
Font : Iosevka Mayukai

VSCode11

VSCode11

Collapse
gbrantunes profile image
Gabriel Antunes • Edited

Theme: Palenight
Icons: Material Icon
Font: Cascadia Code

Alt my Vscode Setup

Collapse
casonadams profile image
Cason Adams

I went down this route of endless customization of VSCode (and others). Tried some cool note taking plugins too. But in the end I found I was more productive with a basic terminal and neovim using coc.vim. I try to keep things as vanilla as I can, and when I find I do something a lot I make it easier(shortcut key / plugin). Kind of like setting an alias in your shell.

Collapse
redoxeon profile image
Mike Harding

VS Code screenshot

Theme: Dank Neon (I modified it a bit)
Icons: Material Theme Icons (Pale Night)
Font: Dank Mono

GitLens is great, Live Share basically makes VS Code work like Google Docs on your editor, Error Lens makes seeing errors really nice and clear.

Collapse
mrbandler profile image
mrbandler • Edited
Collapse
whobeu profile image
Robert G. Schaffrath

I have nothing fancy. My theme is called "Neon (Deep Dark)" and is theme I derived from a theme called "Neon Vomit" that was in the extensions marketplace. I tweaked a few colors and made the background black.

Theme: Neon (Deep Dark)
Icons: No file icon theme enabled
Font: Consolas, 'Courier New', monospace

screen capture

Collapse
torqu3wr3nch profile image
TorqueWrench

I'm big into remote development with VS Code, so most of my setup centers around integrating Visual Studio Code with a remote development server (which itself is actually a VM) as well as Docker:
Connecting VS Code with a Remote Development Server

Collapse
_ronini profile image
Ronnie Villarini

Just read your articles and it looks interesting! Might be giving it a go. I'm getting ready to switch jobs and I'll be given an equipment budget.. was thinking of moving to something more lightweight and portable because I have a rather beefy desktop already, this would definitely solidify that option!

Do you have to do any extra port forwarding when running web dev tasks? Like starting up a Vue dev server for instance?

Collapse
jonrandy profile image
Jon Randy • Edited

Theme: Afterglow Orange
Font: Fira Code
Color scheme: Railscasts

Sublime Text 4

😁

Collapse
jonrandy profile image
Jon Randy

Yes, this is Sublime Text 👍

Collapse
gmarokov profile image
Georgi Marokov • Edited

Here is mine. Cobalt2 theme which claims to be the most friendly theme for you eyeballs.
My setup

Collapse
mranthonysutton profile image
Anthony Sutton • Edited

Theme: AYU Dark Bordered
Icons: vscode icons
Font: MonoLisa

vscode

Collapse
keshavashiya profile image
Keshav Ashiya • Edited

Theme: One Dark Pro
Icons: Material Icon Theme
Font: Jetbrains Mono

Additional Ext: Code Time, to track daily code time.

dev-to-uploads.s3.amazonaws.com/i/...

Collapse
gheorghitahurmuz profile image
Hurmuz Gheorghiță • Edited

VSCodium
Theme: Monokai Pro (Filter Spectrum)
Icons: Monokai Pro (Filter Spectrum) Icons
Font: Dank Mono
VSCodium

Collapse
mehtanilay10 profile image
Nilay Mehta

Theme: GitHub Dark
Font: Fira Code
Icons: Seti (Default one)

VS Code

Collapse
_ronini profile image
Ronnie Villarini • Edited

Theme: Nord
Font: Victor Mono
Nord theme VSCode setup

Collapse
sno2 profile image
Carter Snook • Edited

Theme: Tokyo Night Storm
Font: Cascadia Code PL SemiLight
Icons: Seti
VS Code Setup

Collapse
sno2 profile image
Carter Snook • Edited

Wow, I just realized that it looks a lot better with Windows Night Light at 85% which is what I always have it on at.