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!

Top comments (78)

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

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
 
omarkhatib profile image
Omar

waifu extension is a must!

Collapse
 
omarkhatib 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
 
omarkhatib 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
DevCharlnz

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 • 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 • 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

That SeaGreen looks nice on #1C252E for sure ๐Ÿคฉ

Collapse
 
karandpr profile image
Karan Gandhi

Mood !

Thread Thread
 
madza profile image
Madza

Exactly ๐Ÿ’ฏ

Collapse
 
andrewbaisden profile image
Andrew Baisden • Edited

My current setup:

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

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
 
madza profile image
Madza

Material icons look so nice on that setup ๐Ÿคฉ

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

Night owl is awesome too ๐Ÿ‘Œ๐Ÿ‘
I guess I'm still too much of an Atom fan to fade away from One Dark Pro ๐Ÿ˜‚๐Ÿ˜‚

Collapse
 
hasnayeen profile image
Nehal Hasnayeen
Collapse
 
stackdumper profile image
Elijah Atamas

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

Ayu Mirage keeping it basic, strictly avoids of reds ๐Ÿ˜‚

Collapse
 
stackdumper profile image
Elijah Atamas • Edited

Oranges FTW! ๐Ÿ˜„

Screenshot

Thread Thread
 
madza profile image
Madza

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
 
zizaco profile image
Zizaco • Edited

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

Collapse
 
madza profile image
Madza

That's a nice font ๐Ÿคฉ

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:

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

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
 
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
 
omarkhatib profile image
Omar

Thanks I use vim , but I like the scheme.

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

Some comments may only be visible to logged-in visitors. Sign in to view all comments.