DEV Community

Cover image for Show off your VSCode Setup πŸ‘©πŸ»β€πŸ’»πŸ’―

Show off your VSCode Setup πŸ‘©πŸ»β€πŸ’»πŸ’―

Sarthak Sharma on February 17, 2021

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. /...
Collapse
 
pavanjadhaw profile image
Pavan Jadhaw • Edited

screenshot

hi res screenshot
Theme: Karma
Font: Dank Mono

Collapse
 
marlonry profile image
marlonry • Edited

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

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

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
 
pavanjadhaw profile image
Pavan Jadhaw

here is the last snapshot of my settings

Thread Thread
 
sarthology profile image
Sarthak Sharma

Thanks man 😊

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

Try horizon

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
 
itmeaboutstuff profile image
Peter C

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

Collapse
 
ejabu profile image
Ejabu

I think you may love this

gist.github.com/ejabu/6452f6e7c3ca...

Collapse
 
killshot13 profile image
Michael R. • Edited

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
 
pavanjadhaw profile image
Pavan Jadhaw

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

Collapse
 
semsepioi profile image
Anshul Saini

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

Collapse
 
dni9 profile image
DNI9

hm..

Collapse
 
icecoffee profile image
Atulit Anand

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
 
sarthology profile image
Sarthak Sharma

TODO Highlight is a cool one. πŸ™ŒπŸΌ

Collapse
 
official_fire profile image
CoderZ90

Hey wowo nice theme and also love your settings its pretty clean
can you please provide your settings.json of your vscode want to try your settings lol

Collapse
 
official_fire profile image
CoderZ90

wow can you give your vscode settings file plz

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

Damn, gotta try this theme.

Collapse
 
dabibu153 profile image
saurav sharma • Edited

this is how my current IDE setup look likes

IDE

Collapse
 
sarthology profile image
Sarthak Sharma

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

Collapse
 
dabibu153 profile image
saurav sharma

theme: Deepdark Material Theme

Thread Thread
 
sarthology profile image
Sarthak Sharma

Nice !!

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
 
t7yang profile image
t7yang

Theme: Dark Lavender my theme
Font: Lilex

vscode

Collapse
 
khichinho profile image
Hardik Khichi

I want to try Lilex. What did you input in "editor.fontFamily" in settngs.json. "Lilex" is not working for me. Same with the nerdfont varient.

Collapse
 
t7yang profile image
t7yang • Edited

Here is the download page for Lilex, you need to install Lilex (either otf or ttf) then restart VSCode and add Lilex at the very beginning of editor.fontFamily:
"editor.fontFamily": "Lilex, ...other fonts",

Thread Thread
 
alexandru profile image
Alexandru019 • Edited

I can't get it to work, I have installed the font, I have put it in vs code and I have even restarted the computer and I do not get the same font, any ideas?

Thread Thread
 
t7yang profile image
t7yang

show your vscode settings

Thread Thread
 
alexandru profile image
Alexandru019

{
"editor.linkedEditing": true,
"tabnine.experimentalAutoImports": true,
"workbench.iconTheme": "material-icon-theme",
"workbench.productIconTheme": "fluent-icons",
"editor.renderWhitespace": "none",
"git.autofetch": true,
"git.confirmSync": false,
"window.zoomLevel": -1,
"php.validate.executablePath": "C:\php\php.exe",
"workbench.colorTheme": "Dracula",
"editor.fontLigatures": null,
"editor.fontFamily": "Lilex,Consolas, 'Courier New', monospace"

}

Thread Thread
 
alexandru profile image
Alexandru019

I have solved it by myself.
editor.fontLigatures was in null , i changed to true .
Thank you anyway

Thread Thread
 
t7yang profile image
t7yang

hmm... I'm not sure why. But some suggestions for you:

  • check Lilex font has installed properly on you os.
  • restart you os
  • use a portable fresh vscode to check whether it work with Lilex or not. (download vscode zip version, extract and run with a empty data folder same level with code.exe, if you running on Windows)
Collapse
 
sarthology profile image
Sarthak Sharma • Edited

Sweet

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
 
jolanglinais profile image
Jolene Langlinais

VSCode Theme

Theme: Lucy
Font: Fira Code

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
 
strawhatsai profile image
strawhatsai

damn son. this is amazing

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

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

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

Collapse
 
sarthology profile image
Sarthak Sharma

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

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

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

SynthWave πŸ₯² I always tried to use it but seems to complex to even setup.

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
 
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
 
kubadlo profile image
Jakub LeΕ‘ko
Collapse
 
patarapolw profile image
Pacharapol Withayasakpunt • Edited

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
 
darthbob88 profile image
Raymond Price • Edited

Screenshot of my VS Code setup
Theme: Kawaii
Font: Basic Consolas.
Full list of extensions
Recommended:

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Γ­ • Edited

Looks good πŸ‘πŸ½
I like gruvbox so much

Collapse
 
imagineeeinc profile image
Imagineee

love the subtle colours

Collapse
 
denvercoder1 profile image
Jonah Lawrence • Edited

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

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
 
tgifelix profile image
Felix Swinkels • Edited

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
 
tduyng profile image
Z • Edited

theme
Does anyone use theme: Shades of purple ?

I love theme dracula too.

Collapse
 
farooqahmedkhan profile image
FaRooQ Khan

Shadea of purple => Yes!

Collapse
 
tyu1996 profile image
Brian Ting • Edited

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

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

Well I'm using Cascadia Code PL

Collapse
 
jonyeezs profile image
Jonathan Yee • Edited

screenshot
𝗧𝗡𝗲𝗺𝗲: Valley
π—™π—Όπ—»π˜: Fira Code
In Zen mode

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

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
 
killshot13 profile image
Michael R. • Edited

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
 
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
 
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
 
andreslinares2211 profile image
Andres Linares

Screenshot

Theme: GitHub Light
Font: Dank Mono

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

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
 
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
 
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
 
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
 
cesareuseche profile image
cesaruseche18 • Edited

Theme: Tokio Night

Extensions:

  • ES6 React Snippets
  • Git Lens
  • Docker
  • Live Share
  • Prettier
  • Bracket Pair Colorizer 2
  • Material Theme Icons
  • Error Lens
Collapse
 
2kabhishek profile image
Abhishek Keshri

Nightbow

Here's mine πŸŒˆπŸ™ŒπŸ»
Theme: Nightbow
Font: Fira Mono

GitHub logo 2KAbhishek / Nightbow

Black VS Code theme with bright colors πŸŒƒπŸŒˆ

Collapse
 
anubra266 profile image
Abraham

Collapse
 
sarthology profile image
Sarthak Sharma

Hows that indentation is coloured?

Collapse
 
anubra266 profile image
Abraham

The Indent rainbow extension

Thread Thread
 
sarthology profile image
Sarthak Sharma

Adding to my list. πŸ’―πŸš€

Collapse
 
rashil2000 profile image
Rashil Gandhi

ss

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

Collapse
 
menurivera profile image
Manuel Rivera • Edited

SS

Here's mine

Theme: Aurora X
Font: Consolas

Collapse
 
krushndayshmookh profile image
Krushn Dayshmookh

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

Collapse
 
sarthology profile image
Sarthak Sharma

Nice πŸ‘πŸΌ

Collapse
 
bright profile image
bright • Edited
  • 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
 
codewithmercy profile image
π— π—˜π—₯𝗖𝗬 Ⓜ️

I'm using the slack theme and it looks amazing

Collapse
 
sarthology profile image
Sarthak Sharma

I use to have that too.

Collapse
 
jitunayak profile image
Jitu Nayak • Edited

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
 
purushottamkunwar profile image
Purushottam Kunwar
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
 
aravindakrishnan profile image
Aravinda krishnan

Try GitHub Theme

Collapse
 
nivesh7c profile image
nivesh7c • Edited

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

Upload picture too bro.

Collapse
 
thehungrybird profile image
Aryan Chaurasia • Edited

VSCode

Theme: CodeStackR
Font: Cascadia Code

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
 
erantona profile image
SUVENDU ROY

Tokyo Night is my favourite theme😍

Collapse
 
rznn profile image
Gabriel • Edited


Theme: GitHub Dark
Font: Fira Code

Collapse
 
brandondamue profile image
Brandon Damue

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

Collapse
 
clrh0 profile image
clara

good

Collapse
 
sarthology profile image
Sarthak Sharma

That’s a neat one.

Collapse
 
developeratul profile image
Minhazur Rahman Ratul
Collapse
 
erdemuslu profile image
Erdem Uslu • Edited

vs_code

Color theme: Nord
Icon theme: Material Icon Theme
Font: Dank mono

Collapse
 
michelledev3 profile image
michelledev • Edited

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

Collapse
 
faridsa profile image
farid

Theme Nord Native
Font JetBrain Mono with ligatures

Collapse
 
arthur40056743 profile image
Arthur

Cool

Collapse
 
shytan profile image
-

Theme: Poimandres
Font: Dank Mono
Image description