DEV Community

Cover image for What does your VS Code setup look like?
Madza
Madza

Posted on

What does your VS Code setup look like?

I'm using One Dark Pro theme, VS Code icons, FiraCode font and Git Bash terminal. It's pleasing to an eye and lets me stay productive.

Alt Text

Could you please share your screenshots?
Excited to see your setups!

Discussion (76)

Collapse
scroung720 profile image
scroung720 • Edited

Yes, I have my waifu(it is a VS Code extension). It is such a pitty that she only talks Chinese. I am planning to put some Spanish messages in there.
VS Code environment screenshot

Collapse
reiallenramos profile image
Rei Allen Ramos

What does your waifu do? Interesting extension!

Collapse
scroung720 profile image
scroung720

It follows your mouse with its eyes. When you start VS Code send messages when hover or click over it send messages. it has multiple animations. There are different characters to chose from.

You can give it a try. It's free: marketplace.visualstudio.com/items...

Thread Thread
madza profile image
Madza Author

I need to give it a try, I guess 😎

Collapse
karandpr profile image
Karan Gandhi

This. I need answers :) .

Thread Thread
scroung720 profile image
scroung720 • Edited

You can give it a try. It's free: marketplace.visualstudio.com/items...

Thread Thread
thinkverse profile image
Kim Hallberg

It's cool and all, but damn it's hard to get rid of, had to re-install vscode to get rid of the corrupted version error, and to stop my machine's fans from going haywire.

Collapse
elkhatibomar profile image
Omar

waifu extension is a must!

Collapse
elkhatibomar profile image
Omar

Actually I spend some time to make vim also have a waifu also but it's a picture not moving.
imgur.com/pqNTDit.png
Thanks for motivation

Thread Thread
windwp profile image
windwp

how do you display picture in vim?

Thread Thread
elkhatibomar profile image
Omar

the theme override background

Collapse
danielltw profile image
Daniel Leong 🇸🇬

Reading the readme, to uninstall, you need to disable the extension first, then you can uninstall to prevent issues.

Collapse
cloudmunk profile image
CloudMunk

Lol, this is way to cool! Do you know of any other such extensions that have a char like this? Or is this the only one?

Collapse
scroung720 profile image
scroung720 • Edited

I haven't found another similar extension. However, it seems that they are using a very standardized format for the animation in a way that you can use any character using that format. I did a fork of the project in Github and it is not difficult at all. Very easy anyone can create a language variation with different characters.

Collapse
eync profile image
Sanjiv

Here's my current simple setup:

  • "Popping and Locking" theme
  • Pomodore Timer (look down to left)
  • Intellisense for CSS class names in HTML
  • Insert numbers

Looks like many of who have already commented prefers darker themes!
Haha I love it, easier for eyes!

Collapse
iam_strawb profile image
Charlnz🌹💕🖤creativedesign

Hi Sanjiv, which extension are you using on your vs code

Collapse
eync profile image
Sanjiv

Hey, I am using just the ones I mentioned above. Nothing else, I promise!

Collapse
madza profile image
Madza Author • Edited

I've tried a couple of light themes as well, switched back immediately 😂
In general dark themes give me better contrast and are easier to work with for longer periods of time 😉

Collapse
eync profile image
Sanjiv

Yeah I feel you ! Thankfully we live such time when it's possible to have almost anything with darker theme! 😂

Collapse
reiallenramos profile image
Rei Allen Ramos • Edited

Heh very similar look and feel!

  • Dark+ theme (default dark)
  • Fira Code with ligatures
  • the highlighting at the start of the line, forgot what it's called

Can you share how you got the purple line the runs from line 6-23? That looks really helpful.

screenshot

Collapse
madza profile image
Madza Author • Edited

I'm using Bracket Pair Colorizer. They have v2 as well.
See which one do you like best 😉

Collapse
reiallenramos profile image
Rei Allen Ramos

awesome! will check it out :)

Collapse
noxasch profile image
Alexander Dischberg

same, i use default Dark+ theme as well with material icon theme. Other extensions are based on language and project.

Collapse
karandpr profile image
Karan Gandhi

alt text
Just Base2Tone themeset. Currently it's SeaDark.
marketplace.visualstudio.com/items...

Collapse
madza profile image
Madza Author

That SeaGreen looks nice on #1C252E for sure 🤩

Collapse
karandpr profile image
Karan Gandhi

Mood !

Thread Thread
madza profile image
Madza Author

Exactly 💯

Collapse
andrewbaisden profile image
Andrew Baisden • Edited

My current setup:

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

Collapse
madza profile image
Madza Author

Material icons look so nice on that setup 🤩

Collapse
pablohs1986 profile image
Pablo Herrero

😍😍😍I love Shades of purple, is my second theme after Night owl.

Collapse
andrewbaisden profile image
Andrew Baisden

Yeah it’s beautiful. Night Owl was my main for a long time I decided to try something different.

Collapse
keith0305 profile image
Ron

+1 for the 4 spaces indentation

Collapse
pablohs1986 profile image
Pablo Herrero • Edited

👋Nice setup, here's mine:

myVS

  • Night Owl theme.
  • VSCode icons.
  • Consolas font.
  • Rainbow Brackets.
  • Git Bash terminal.
Collapse
madza profile image
Madza Author

Night owl is awesome too 👌👍
I guess I'm still too much of an Atom fan to fade away from One Dark Pro 😂😂

Collapse
nikolahristov profile image
Nikola Hristov • Edited
Collapse
csgeek profile image
csgeek

That's really nice. I like that theme

Collapse
hasnayeen profile image
Nehal Hasnayeen
Collapse
zizaco profile image
Zizaco • Edited

vscode
"Panda Syntax" theme
"CaskaydiaCove Nerd Font Mono"
CaskaydiaCove font for the UI

Collapse
madza profile image
Madza Author

That's a nice font 🤩

Collapse
mikebarkmin profile image
Mike Barkmin • Edited

Theme: Tokyo-Night
Extensions:

  • Docker
  • ESLint
  • Java Extension Pack
  • LaTeX Workshop
  • PHP Intelephense
  • Prettier
  • Project Manager
  • Python
  • Vim
  • and some others

VSCode

Collapse
jamesthomson profile image
James Thomson

+1 for Tokyo Night

Collapse
stackdumper profile image
stackdumper

Theme: Ayu Mirage
File Icons: File Icons
Font Family: Fira Code
Plus a little bit of custom CSS to hide the left and bottom toolbars.

Screenshot

Collapse
madza profile image
Madza Author

Ayu Mirage keeping it basic, strictly avoids of reds 😂

Collapse
stackdumper profile image
stackdumper • Edited

Oranges FTW! 😄

Screenshot

Thread Thread
madza profile image
Madza Author

Yup 😄😄 I actually love the simplicity, it's like right in the middle between flashiness that could be hard for the eyes and no highlighting at all that could be bad for readability 😉 Good find! 👍

Collapse
sd_devto profile image
SD Dev.to • Edited

Today I launched a free Visual Studio Code theme called GitHub Dark Turbo. It's a fork of the official GitHub Dark theme, with some workbench goodies to help users focus. The sample images show Ruby on Rails source code. Enjoy =)

github.com/dubesoftware/github-dar...

Collapse
gulajavaministudio profile image
Gulajava Ministudio • Edited

Currently my vs code setup :

  • Mayukai Theme .
  • Iosevka Mayukai Font.
  • Material Theme Icon.
  • And for Terminal, using xfce terminal with Zsh/Ohmyzsh with starship theme.

Image1

Collapse
gulajavaministudio profile image
Gulajava Ministudio

Image2

Collapse
supportic profile image
Supportic • Edited

Theme: Horizon
Font: JetBrains Mono
Extensions: Bracket Pair Colorizer 2, Indent Block Highlighting

VSCode setup

Collapse
ombratteng profile image
Ole-Martin Bratteng • Edited

Theme: DA UI from ST3 (author deleted the public repo when he switched over to VS Code, luckily I had it locally on another machine) I kinda ported over to VS Code
VS Code

Collapse
madza profile image
Madza Author

Clean 🤩 I like how there is no background transition between folder tree and an actual coding space 👍

Collapse
mkanet profile image
MKANET • Edited

I made my own gray color theme from scratch to avoid headaches I got from traditional dark and light-colored themes. It also has custom icons.

Theme Screenshot
marketplace.visualstudio.com/items...

Collapse
elkhatibomar profile image
Omar

Thanks I use vim , but I like the scheme.

Collapse
cmohan profile image
Catherine Mohan • Edited

I'm using the Powershell ISE Theme with a few custom colors, VS Code Icons, Jetbrains Mono font, and Powershell 7 as my terminal since most of my work is in that language. I've tried black backgrounds but I've found that I like greys more.

VS Code Setup

Collapse
colinstark profile image
Colin Stark
  • My own "Stark Industries" Theme
  • SF Mono font (extracted from Terminal.app :D )
  • Bracket Pair Colorizer and some other Quality of Life extensions
  • Firebase & MongoDB Explorer

Stark VSCODE

Collapse
zarogon profile image
Kurapov Daniel • Edited

Here is mine setup:
- Tokyo Night Theme
- Operator Mono font
- Custom terminal color scheme

Collapse
madza profile image
Madza Author

Bright and sharp 🔥🔥
How is it for the eyes for longer periods of coding, tho? 🤔

Collapse
zarogon profile image
Kurapov Daniel

Precisely because of the bright colors, I use a monochrome theme for the terminal (the font is smaller) so my eyes can rest and there is a color balance. I coding for 9 hours a day. So I can say with confidence that with such a color theme, my eyes do not get tired.

Collapse
hohonuuli profile image
Brian Schlining • Edited

My setup is focused on Java/Scala development. I use Material Theme, Hasklig font, Fish Shell with Starship to configure the prompt.

Screen shot

Collapse
khunnaball profile image
Kieran • Edited

My current setup is:

  • Palenight Italic Theme
  • Dank Mono with ligatures Font
  • Indent Rainbow
  • Prettier

Collapse
madza profile image
Madza Author

Folder tree on the right? 👀
Interesting take, I guess it all falls down to individual taste anyways 👍

Collapse
khunnaball profile image
Kieran

I used to have it on the left for ages then one day I just decided to swap it and never looked back!

Collapse
nashpl profile image
Krzysztof Buczynski

I love VSCode for what it is, how it works and that it 100% free

But I am too addicted to JetBrains IDE :(

Collapse
l4znet profile image
Charly Escalona • Edited

(and some more.. tell me, if you want I can list them all)

Collapse
madza profile image
Madza Author

Nice one 😉 Thanks for sharing! 👍

Collapse
angelmtztrc profile image
Angel Martinez
  • Dobri Next -A01- Dark Theme
  • Material Icons
  • Bracket Pair Colorizer

VS Code

Collapse
the_codemaster profile image
Harutyun Mardirossian

Here is my VSCode setup looks like this
The difference is that this is not VSCode

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

Collapse
tomasalagoa profile image
Tomás Alagoa

Material Community Theme (High Contrast), Material Icons and fish terminal (the autocomplete is amazing)

Collapse
uncledev profile image
Fernando dos Santos

I'm using Omni theme, ZSH terminal, FiraCode Font, Material-icons.

Collapse
the_codemaster profile image
Harutyun Mardirossian

Here is my VSCode setup looks like this
The difference is that this is not VSCode

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

Collapse
cristianoasg profile image
Cristiano Augusto • Edited

Theme omni
Bracket pair colorizer 2
Material icon theme

Collapse
abdellatifdev profile image
abdellatif.dev

Sorry I can't supply with screen I just closed my machine but I'm using Eva dark theme, Vs code icons, hack nerd font,zsh terminal on Linux

Collapse
allenmiller304 profile image
Allen Miller

Why would anyone choose VS Code (the limited development environment) when you have Visual Studio 2019 (a very powerful development environment)
It is like having the option to choose between basic car with almost no internals vs the latest Mercedes SUV fully loaded, and choose the basic car? I never understood that.

Collapse
pmkroeker profile image
Peter

That is not a super fair comparison. VS Code is completely free, no paid version for Professional or Enterprise use.

Its like one is a Toyota, but its free, and the other is a Mercedes but you gotta pay for it, lots of people would opt for the free version that does 80% of the paid.

Collapse
allenmiller304 profile image
Allen Miller

If it is just the free part then it is ok, but I see it used more by people in large companies because it is “better”, and I see people spend days configuring, reconfiguring, adding extensions, etc, for stuff that is already there in VS 2019

And all that time is paid time, 70$ to 100$ an hour per person (internal cost), put a week for configurations per project, and this is around 20,000$ or more lost for a team of 7 people, 4 of them developers.

Sometimes the full thing cost is cheaper than the salary / time spent

Thread Thread
scroung720 profile image
scroung720

I have a C++/C# programming background I have experience in Visual Studio. In my opinion, Visual Studio is an overkill option for web development, it is unnecessary heavy for download, then you open the program and you start to see a lot of options that in my opinion doesn't make sense like debugging tools, debugging!? what JS or node JS? Which browser ? Which framework?

The difference is that web development is evolving very fast, all years we have new tools and I don't want to depend on Microsoft to integrate these new innovations. I prefer to trust the community that's why web developers tweak our IDEs/Editors. All this for free.

About the waster of time doing configurations. You can save your configuration once and share it among multiple users.

Collapse
zizaco profile image
Zizaco

Bloated !== Better

Collapse
allenmiller304 profile image
Allen Miller

So, installing a small editor VScode, then installing 10 to 50 extensions with thousands of files, then running projects with node_modules with tens of thousands of repeatable files is called “light” and VS 2019 which also have tons of files is called “bloated”? excellent logic!

VS Code starts faster, VS 2019 starts slower that is correct, but bloated? It should apply to both of them :-)

Thread Thread
zizaco profile image
Zizaco • Edited

Installing 10 to 50 extensions at least give you the option to hand-pick what you actually is going to use (and even disable what doesn't serve you). Visual Studio is like having 100 extensions "installed" and enabled out-of-the box.

vscode can become bloated, that's true.
Visual Studio is bloated.

Thread Thread
allenmiller304 profile image
Allen Miller • Edited

Maybe I am just reaching 50’s and getting older and stuck with what I know :-) but your replay is helping me understand how the market thinks today.

Performance is important, the more performant an app is the lighter it appears, if you look at the website we are using right now dev.to/ I did inspect element and I can see the site is loading and preparing the articles while you are scrolling, regardless if you will read them or now, this makes it feel extremely light and responsive, but in reality it is loading more content (small content) but still.

I am getting now why people describe VS 2019 as bloated, it is not written in a way to appear more performant, that is true, I suffered with that a lot, but now stopped noticing it due to this: