DEV Community

loading...
Cover image for Show off your VSCode Setup ๐Ÿ‘ฉ๐Ÿปโ€๐Ÿ’ป๐Ÿ’ฏ
XenoX

Show off your VSCode Setup ๐Ÿ‘ฉ๐Ÿปโ€๐Ÿ’ป๐Ÿ’ฏ

sarthology profile image Sarthak Sharma ใƒป1 min read

If you are like me you also like changing your theme and font of VSCode frequently. I also love to find new themes and fonts. Here is mine.

image

๐—ง๐—ต๐—ฒ๐—บ๐—ฒ: Cobalt2 Rocket
๐—™๐—ผ๐—ป๐˜: Cascadia Code PL
๐—ฃ๐—ฒ๐—ฎ๐—ธ๐—ฐ๐—ผ๐—ฎ๐—ธ ๐˜๐—ต๐—ฒ๐—บ๐—ฒ: Svelte Orange

Top 3 Plugins I โค๏ธ

So tell me what's your current VSCode theme and font look like? I'm Curious.

Discussion (123)

pic
Editor guide
Collapse
pavanjadhaw profile image
Pavan Jadhaw

screenshot

hi res screenshot
Theme: Karma
Font: Dank Mono

Collapse
marlonry profile image
marlonry

Game changer to have the side bar on the right :o

Collapse
hellovietduc profile image
Duc Nguyen

Whatโ€™s the benefit though? Iโ€™ve tried a few times but keep going back to having it on the left. It feels weird to have the code indent all the way to left of the screen.

Thread Thread
menaaziz27 profile image
menaaziz27

the benefit is noticed if you're using Ctrl+B very often .. the code would be indented every time if you have the side bar on the left.

Thread Thread
killshot13 profile image
Michael R.

And until Microsoft added the option to switch the control bar to the right, the code always looked like ๐Ÿ’ฉ until you formatted it when you were ready to push to GitHub. I remember very well ๐Ÿ™„

Thread Thread
marlonry profile image
marlonry

It all comes down to your preference. To me it just looks less cluttered on the left side.

Collapse
sarthology profile image
Sarthak Sharma Author

Dank mono is such a good font. I still gotta try that right sidebar thing. Whatโ€™s your settings.json?

Collapse
pavanjadhaw profile image
Pavan Jadhaw

here is the last snapshot of my settings

Thread Thread
sarthology profile image
Sarthak Sharma Author

Thanks man ๐Ÿ˜Š

Collapse
nicklleite profile image
Nicholas @ 127.0.0.1 (::1)

I'm now trying the sidebar on the right. Its making more sense to have it like this. Good one!

Thread Thread
samuelmugi profile image
samuelmugi

i have always had mine on the right. Not going back soon

Collapse
dev117uday profile image
Uday Yadav

Nice theme

Collapse
semsepioi profile image
Anshul Saini

Can you pls tell me what extension you're using for indentation like this?

Collapse
pavanjadhaw profile image
Pavan Jadhaw

Its indent rainbow and bracket pair colorizer

Collapse
heyamyk8 profile image
Amy-Kate Andrews

Alt text of image

Theme: 1984 - Light
Font: Dank Mono
Extensions: Alphabetical Sorter, Bracket Pair Colorizer, Git Blame, PHP Intelephense, Prettier, Snippet Creator, TODO Highlight

Collapse
promikecoder2020 profile image
ProMikeCoder2020

You use light theme?

Collapse
heyamyk8 profile image
Amy-Kate Andrews

Yep! It feels better on my eyes.

Thread Thread
sarthology profile image
Collapse
smonff profile image
๐ŸŒŒ Sรฉbastien Feugรจre โ˜”

Dark themes are better for the night times or cloudy weather. Used in a very bright atmosphere (like in an office with neons) they don't make a lot of sense and could hurt your eyes.

I switch between light and dark themes many times a day. There are even extensions to toggle them automatically (not a VSCode thing: the Opera browser does this natively).

Collapse
pavanjadhaw profile image
Pavan Jadhaw

This looks really sweet, I might give light theme a try. Thanks for sharing Amy

Collapse
killshot13 profile image
Michael R.

I would need sunglasses to code in this IDE, but very beautiful job with the theme, it's certainly eye-catching!

Also I have a theory that there is a shared trait between devs who use light-themed IDEs must also be morning people. @heyamyk8 are you a morning person?

I like to code at night, so I love defined, sharp shadows, layered UIs, and of course, dark theme. ๐Ÿ™ƒ๐Ÿ™ƒ๐Ÿ™ƒ

Collapse
itmeaboutstuff profile image
Peter C

Nice to see a good light theme, I find them much easier on the eye.

Collapse
ejabu profile image
Collapse
rubenk profile image
Ruben Kharel

No offense, but it's horrible for me

Collapse
semsepioi profile image
Anshul Saini

Can you pls suggest me some good light themes like this?

Collapse
dni9 profile image
DNI9

hm..

Collapse
sarthology profile image
Sarthak Sharma Author

TODO Highlight is a cool one. ๐Ÿ™Œ๐Ÿผ

Collapse
icecoffee profile image
atulit023

Its pretty fresh. Thanks for suggestion.
You should definitely checkout the GitHub theme for vscode it's dope

Collapse
daniely93 profile image
daniely-93

Have you tried a dark theme? I can't imagine staring for a few hours this theme ๐Ÿ˜‚

Collapse
rish7223 profile image
Rishabh Tyagi

image
Cool ๐Ÿ”ฅ
Here's mine
Theme: BeardedTheme Monokai Metallian
Extensions: Color Highlight, Bracket Pair Colorizer.

Collapse
ridhikgovind profile image
Ridhik Govind

This is looking amazing bruh ! ;)

Collapse
lelouchbrowneyes profile image
LelouchBrowneyes

Thanks for the cap.

Collapse
jitunayak profile image
Jitu Nayak

Thanks for the color highlight extension. I never used it before. But i knew that i need this functionality ๐Ÿ˜œ

Collapse
abdullahmiraz1 profile image
Abdullah Miraz

best of all to me, thanks man ๐Ÿ˜Ž

Collapse
rish7223 profile image
Rishabh Tyagi

๐ŸคŸ๐ŸคŸ

Collapse
sarthology profile image
Sarthak Sharma Author

Damn, gotta try this theme.

Collapse
dabibu153 profile image
saurav sharma

this is how my current IDE setup look likes

IDE

Collapse
sarthology profile image
Sarthak Sharma Author

Woah !! that's dope. What's the theme name?

Collapse
dabibu153 profile image
saurav sharma

theme: Deepdark Material Theme

Thread Thread
sarthology profile image
Collapse
zulfwz profile image
Zul-fwz

Extension?

Collapse
ipramudya profile image
ipramudya

what font is that ?

Collapse
imagineeeinc profile image
Imagineee

love the darknes

Collapse
gulajavaministudio profile image
Gulajava Ministudio

my vs code setup

My current VS Code Setup :
Theme : Mayukai Theme
Font : Iosevka Mayukai

Currently using VS Code Plugin :

  • Vetur
  • ES6 Snippets
  • Docker
  • Gitlens
  • indent-rainbow
  • Bracket Pair Colorizer 2
Collapse
irmerk profile image
Collapse
yoursunny profile image
Junxiao Shi

I didn't bother to look for the buttons for changing fonts and colors. The default looks fine.

Plugins:

  • trailing spaces to delete unnecessary whitespaces
  • code spell checker
  • Go, Python, C++, โ€ฆ
  • markdownlint, Better TOML, โ€ฆ
  • PlatformIO (disabled by default, enable in IoT workspace only)
Collapse
patarapolw profile image
Pacharapol Withayasakpunt

Used to use Markdownlint too.

It is nice, but it is one of a few plugins, that shouldn't be ON be default; otherwise, you can't cooperate with others...

Collapse
yoursunny profile image
Junxiao Shi

I have Markdownlint configuration in the repository, and CI fails the build if there's any violation. I don't see a problem here.

Thread Thread
patarapolw profile image
Pacharapol Withayasakpunt

I made PR to people who don't have Markdownlint, too.

Collapse
zacharythomasstone profile image
Zachary Stone

Theme: Arbitor
Font: Jetbrains Mono w/ font ligatures
My Visual Studio Code setup

Collapse
sarthology profile image
Sarthak Sharma Author

How does it looks?

Collapse
zacharythomasstone profile image
Zachary Stone

Do you not see my picture in the post?

Thread Thread
sarthology profile image
Sarthak Sharma Author

Shit, it wasn't showing in the Notification section my bad. ๐Ÿ˜…

Thread Thread
zacharythomasstone profile image
Zachary Stone

No worries! I was having issues myself and had to refresh my page.

Thread Thread
sarthology profile image
Sarthak Sharma Author

But anyways, your setup looks cool. ๐Ÿ”ฅ

Thread Thread
zacharythomasstone profile image
Zachary Stone

Thanks! I really enjoy Jet Brains Mono and their support of ligatures. I was rocking a very SynthWave 80s retro theme for a while, but it was hard on the eyes haha.

Thread Thread
sarthology profile image
Sarthak Sharma Author

SynthWave ๐Ÿฅฒ I always tried to use it but seems to complex to even setup.

Collapse
shinigami92 profile image
Shinigami

๐—ง๐—ต๐—ฒ๐—บ๐—ฒ: Dark+ (default dark)
๐—™๐—ผ๐—ป๐˜: MesloLGS NF

VSCode

hi-res link

Must have extensions:

eamodio.gitlens
pflannery.vscode-versionlens
wmaurer.change-case
Enter fullscreen mode Exit fullscreen mode

Other extensions:

argiolasriccardo90.regions-with-colors
bierner.docs-view
bierner.markdown-emoji
CoenraadS.bracket-pair-colorizer-2
cssho.vscode-svgviewer
dariofuzinato.vue-peek
dbaeumer.vscode-eslint
docsmsft.docs-markdown
EditorConfig.EditorConfig
esbenp.prettier-vscode
hollowtree.vue-snippets
icrawl.discord-vscode
jcbuisson.vue
jebbs.plantuml
jgclark.vscode-todo-highlight
joaompinto.vscode-graphviz
kaangokdemir.vue-pug-snippets
lannonbr.vscode-js-annotations
lokalise.i18n-ally
lucaslpsan.vuetify-pug-snippet
mrmlnc.vscode-puglint
octref.vetur
PKief.material-icon-theme
shaharkazaz.git-merger
SonarSource.sonarlint-vscode
SPGoding.datapack-language-server
streetsidesoftware.code-spell-checker
streetsidesoftware.code-spell-checker-german
stylelint.vscode-stylelint
VisualStudioExptTeam.vscodeintellicode
vscode-icons-team.vscode-icons
Enter fullscreen mode Exit fullscreen mode
Collapse
felipecustodio profile image
Felipe Scrochio Custรณdio

"Docs View" was exactly what I needed, thanks!

Collapse
imagineeeinc profile image
Imagineee

my setup

Theme: Custom theme made on Themer.dev
Font: IBM Plex Mono
Extensions: materiel Icon Theme, vim, wakatime, rust, Remote WSL, Markdown Preview Enhanced, Glitch, MS-Dos Theme

Collapse
tgifelix profile image
Felix Swinkels

gif

Not very original, but;
Theme: Dracula
Font: JetBrains Mono

Two of my favourite theme related plugins I didn't see mentioned yet:

Link to gif

Collapse
justinhhorner profile image
Collapse
erantona profile image
SUVENDU ROY

Tokyo Night is my favourite theme๐Ÿ˜

Collapse
sarthology profile image
Sarthak Sharma Author

Thatโ€™s a neat one.

Collapse
kozmicluis profile image
Luis Lopez

ws

Theme: Gruvbox Material + Webstorm Icon Theme
Font: Pragmata Pro Mono (though I also enjoy Jetbrains Mono)
Top 3 Plugins:

  • indent-rainbow
  • TODO Highlight
  • Todo Tree
Collapse
halivert profile image
Halรญ

Looks good ๐Ÿ‘๐Ÿฝ
I like gruvbox so much

Collapse
imagineeeinc profile image
Imagineee

love the subtle colours

Collapse
patarapolw profile image
Pacharapol Withayasakpunt

Screenshot

Theme: Solarized Dark
Icon theme: Material Icon Theme

Recommended Plugins:

  • Non-language specific:
    • Bracket Pair Colorizer 2
    • DotENV
    • Ignore files
    • Remote - SSH
    • Better TOML
    • Indent 4-to-2
    • Markdown Preview Enhanced
    • SQLite
  • TypeScript is the richest programming language
    • Comment tagged templates
    • EJS language support
    • Prettier - Code formatter AND Prettier ESLint
    • sort-imports
  • Others
    • Python Docstring Generator

Relevant settings.json

{
  "workbench.colorCustomizations": {
    "terminal.background": "#102130"
  },
  "editor.tabSize": 2,
  "files.eol": "\n",
  "editor.renderWhitespace": "trailing",
  "explorer.autoReveal": false,
  "files.associations": {
    ".*ignore": "ignore",
    "Dockerfile.*": "dockerfile"
  },
  "[json]": {
    "editor.defaultFormatter": "vscode.json-language-features"
  },
  "editor.wordWrap": "on",
  "material-icon-theme.files.associations": {
    "*.db": "database"
  }
}
Enter fullscreen mode Exit fullscreen mode
Collapse
denvercoder1 profile image
Jonah Lawrence

vscode

Theme: Cobalt 2 (with some customizations)
Font: Fira Code

My theme customization settings: gist.github.com/DenverCoder1/6573f...

Collapse
sarthology profile image
Sarthak Sharma Author

Customisation like?

Collapse
denvercoder1 profile image
Jonah Lawrence

Darker background colors, more teal highlights, changed the comment color to have more contrast, etc. It's all in the settings.json I linked above.

Collapse
barelyhuman profile image
Reaper


Plugins : Go , TSlint, Prettier, advanced-new-file
Theme: Horizon Italic
Font: Comic Mono

Collapse
thisisleobro profile image
thisisleobro

This is so beautyfull. The theme, the font, go, panel to the right... God

Collapse
barelyhuman profile image
Reaper

Haha thanks ๐Ÿ˜Š

Collapse
tienduynguyen profile image
Tien Duy

theme
Does anyone use theme: Shades of purple ?

I love theme dracula too.

Collapse
kubadlo profile image
Collapse
darthbob88 profile image
Collapse
puruvj profile image
PuruVJ

Theme: One Dark Pro
Font: Fira Code
File icon theme: Material icon theme
System Icon theme(sidebar icons): Fluent icons

Collapse
killshot13 profile image
Michael R.

Themes Fonts
Palenight (Mild Contrast): colortheme Cascadia Code: 16pt/300wt editorfont
Material Palenight: fileicontheme Fira Code: 14pt/300wt supportingfont
Fluent: producticontheme Hack: 16pt/400wt terminalfont

๐Ÿ˜Ž๐Ÿ‘

Collapse
andreslinares2211 profile image
Andres Linares

Screenshot

Theme: GitHub Light
Font: Dank Mono

Collapse
relativelyrehan profile image
relativelyrehan

That is a nice setup, here's mine:

alt

THEME: One Dark Pro
Extensions: Insert an emoji, rfc, Beautify

Collapse
sarthology profile image
Sarthak Sharma Author

Insert an emoji. Damn thatโ€™s cool.

Collapse
giovanniincammicia profile image
Giovanni Incammicia

Hi Sarthak, on Windows you can use the shortcut "windows+." to open an emoji keyboard. You can use it in every program; it's quite handy

Collapse
andrewbaisden profile image
Andrew Baisden

https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rlmnvqqz7epw177z9hdd.png

Theme: Dracula ๐Ÿง›๐Ÿปโ€โ™‚๏ธ
Font: JetBrains Mono
Icons: Material Icon Theme

Collapse
lulasvob profile image
LulaSvob

Now because everyone posted so much of their internal code base I will be able to hack every one of you.

Collapse
sarthology profile image
Sarthak Sharma Author

Damn you revealed my evil plan. ๐Ÿ˜ก

Collapse
imagineeeinc profile image
Imagineee

mines don't have much but my new opensource project

Collapse
lulasvob profile image
LulaSvob

mine's a joke of course :)

Collapse
timdeschryver profile image
Tim Deschryver

I also like to switch setups, that's why I created ๐ŸฆŽChameleon. It's a vscode extension that changes the theme and font when a new instance of vscode is opened. I think you're going to like it, for more info see dev.to/timdeschryver/new-vscode-ex...

Collapse
hasnaindev profile image
Muhammad Hasnain

Can you give me the exact font name and the weight? I just downloaded the font you are using but mine looks kind of clunky and unsmooth!

Collapse
hasnaindev profile image
Muhammad Hasnain

Guys, for Windows 10, use the OTF format. For some reason TTF is very jagged and unclean!
You may download the font here: github.com/microsoft/cascadia-code...

Collapse
sarthology profile image
Sarthak Sharma Author

Well I'm using Cascadia Code PL

Collapse
tyu1996 profile image
Brian Ting

VSCode
Color Theme: Mayukai Mono
File Icon Theme: Material Icon Theme
Font: Cascadia Code

Collapse
t7yang profile image
t7yang

Theme: Dark Lavender my theme
Font: Lilex

vscode

Collapse
sarthology profile image
Collapse
jonyeezs profile image
Jonathan Yee

screenshot
๐—ง๐—ต๐—ฒ๐—บ๐—ฒ: Valley
๐—™๐—ผ๐—ป๐˜: Fira Code
In Zen mode

Collapse
menurivera profile image
Manuel Rivera

SS

Here's mine

Theme: Aurora X
Font: Consolas

Collapse
bright profile image
bright
  • Theme: Gruvbox Dark Hard
  • Font: MesloLGS NF
  • Extensions: Todo Tree, Material Icon Theme, Python, Python Docstring Generator, python-string-sql, Path Intellisense, Vim, vscode-database

I love Gruvbox.

Collapse
rashil2000 profile image
Rashil Gandhi

ss

Theme: Bluloco Light
Font: Dank Mono
Extension: VSCode Vibrancy

Collapse
jitunayak profile image
Jitu Nayak

image

Font - Jetbrains Mono (Current Fav ๐Ÿ”ฅ )
Theme - Community Material Theme

Extensions ๐Ÿงจ
Settings sync ( ๐ŸŒฉ cloud backup of current settings )
Colour HighLight
Auto rename tag
Bracket Pair colorizer
ES7
Liver Server
Monokai Theme
Polacode
Prettier
TabNine

Collapse
cesareuseche profile image
cesaruseche18

Theme: Tokio Night

Extensions:

  • ES6 React Snippets
  • Git Lens
  • Docker
  • Live Share
  • Prettier
  • Bracket Pair Colorizer 2
  • Material Theme Icons
  • Error Lens
Collapse
gargakshit profile image
Akshit Garg

screenshot

Theme: GitHub Dark
Font: JetBrains Mono
Extensions: Go, ReScript, ElixirLS, Error Lens, Prettier, Quote Flipper, SQLite, Tailwind CSS Intellisense, Resource Monitor, etc

Collapse
sharozijaz profile image
Sharoz Ijaz

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

Theme: CyberPunk Theme(Umbra Protocol)
Font: Fira Code
Extensions: Color Bracket Pair, ES7 Snippets, Live SASS Compiler.

Collapse
codewithmercy profile image
๐— ๐—˜๐—ฅ๐—–๐—ฌ โ“‚๏ธ

I'm using the slack theme and it looks amazing

Collapse
sarthology profile image
Sarthak Sharma Author

I use to have that too.

Collapse
anubra266 profile image
Collapse
sarthology profile image
Sarthak Sharma Author

Hows that indentation is coloured?

Collapse
anubra266 profile image
Abraham Anuoluwapo

The Indent rainbow extension

Thread Thread
sarthology profile image
Sarthak Sharma Author

Adding to my list. ๐Ÿ’ฏ๐Ÿš€

Collapse
machineno15 profile image
Tanvir Shaikh

Any good theme for php ?
font i always stick to fira code .

you guysz can suggest me themes & extensions specially for php

Collapse
gulajavaministudio profile image
Gulajava Ministudio

Maybe you can try Mayukai Theme and Iosevka Font.

Collapse
machineno15 profile image
Tanvir Shaikh

I tried thin & it's really Awesome, Thanks man..

Collapse
itachiuchiha profile image
Itachi Uchiha

Why everyone uses right sidebar? Is there a benefit?

Thanks <3

Collapse
thisisleobro profile image
thisisleobro

You dont move your editor panel every time you toggle the sidebar. Thats why i put it to the right

Collapse
krushndayshmookh profile image
Krushn Dayshmookh

Theme: Gruvbox (Midnight)
Icons: Material Icon Theme
Font: JetBrains Mono

Collapse
sarthology profile image
Sarthak Sharma Author

Nice ๐Ÿ‘๐Ÿผ

Collapse
michelledev3 profile image
michelledev

I love this game and changing up my vs themes After Dark is my new flavor of the day!

Collapse
faridsa profile image
faridsa

Theme Nord Native
Font JetBrain Mono with ligatures

Collapse
thehungrybird profile image
Aryan Chaurasia

VSCode

Theme: CodeStackR
Font: Cascadia Code

Collapse
nivesh7c profile image
nivesh7c

Theme: Community Material Theme
Extensions: ES7 React/Redux/GraphQL/React-Native snippets

VS Code is going to play a pivotal role in the development of software.

Collapse
sarthology profile image
Sarthak Sharma Author

Upload picture too bro.

Collapse
purushottamkunwar profile image
Collapse
gabj profile image
Gabriel


Theme: GitHub Dark
Font: Fira Code

Collapse
aravindakrishnan profile image
Aravinda krishnan

Try GitHub Theme

Collapse
brandonbawe profile image
Brandon Bawe

Theme: Dark Material Theme | Full Dark Version
Font-family: Dank mono
Font-size: 13