DEV Community

loading...
Cover image for Show off your VSCode Setup 👩🏻‍💻💯
XenoX

Show off your VSCode Setup 👩🏻‍💻💯

Sarthak Sharma
JavaScript Nerd👨🏻‍💻| Philosopher🧘🏻‍♂️ | Life Hacker🔧 | Health enthusiast🏋🏻‍♂️
・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 (134)

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

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
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. • 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
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
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
dni9 profile image
DNI9

hm..

Collapse
rish7223 profile image
Rishabh Tyagi

image
Cool 🔥
Here's mine
Theme: BeardedTheme Monokai Metallian
Extensions: Color Highlight, Bracket Pair Colorizer.

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
ridhikgovind profile image
Ridhik Govind

This is looking amazing bruh ! ;)

Collapse
sarthology profile image
Sarthak Sharma Author

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

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

Sweet

Collapse
irmerk profile image
Jolene Langlinais

VSCode Theme

Theme: Lucy
Font: Fira Code

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
barelyhuman profile image
Reaper


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

Collapse
strawhatsai profile image
strawhatsai

damn son. this is amazing

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
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
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 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
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
justinhhorner profile image
Justin Horner
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
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
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
kubadlo profile image
Jakub Leško
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
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 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
darthbob88 profile image
Raymond Price • Edited

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

Collapse
tienduynguyen profile image
Tien Duy • 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
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
tyu1996 profile image
Brian Ting • Edited

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

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
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
jonyeezs profile image
Jonathan Yee • Edited

screenshot
𝗧𝗵𝗲𝗺𝗲: Valley
𝗙𝗼𝗻𝘁: Fira Code
In Zen mode

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