DEV Community

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

What does your VS Code setup look like?

Madza on August 27, 2020

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. Could you...
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
 
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
 
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

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

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

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
 
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
 
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
 
l4znet profile image
Charly Escalona • Edited

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

Collapse
 
madza profile image
Madza

Nice one 😉 Thanks for sharing! 👍

Collapse
 
jamesthomson profile image
James Thomson

+1 for Tokyo Night

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

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
 
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
 
crusty0gphr 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
 
crusty0gphr 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
 
angelmtztrc profile image
Angel Martinez
  • Dobri Next -A01- Dark Theme
  • Material Icons
  • Bracket Pair Colorizer

VS Code

Collapse
 
csgeek profile image
csgeek

That's really nice. I like that 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