DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 970,177 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
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.

Top comments (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 on

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 on

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
 
y_demenskiy profile image
Yaroslav Demenskiy • Edited on

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 (PS) • Edited on

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 on

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 on

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 on

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 on
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?

🌚 Browsing with dark mode makes you a better developer.

It's a scientific fact.