DEV Community

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

Read full post

Pavan Jadhaw • Feb 17 '21 • Edited

hi res screenshot
Theme: Karma
Font: Dank Mono

marlonry • Feb 18 '21 • Edited

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

Duc Nguyen • Feb 18 '21

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.

menaaziz27 • Feb 21 '21

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.

Michael R. • Feb 21 '21

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 🙄

marlonry • Feb 22 '21

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

Sarthak Sharma • Feb 17 '21

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

Pavan Jadhaw • Feb 17 '21

here is the last snapshot of my settings

Sarthak Sharma • Feb 17 '21

Thanks man 😊

Nicholas @ 127.0.0.1 (::1) • Feb 18 '21

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

samuelmugi • Feb 18 '21

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

Uday Yadav • Feb 21 '21

Nice theme

Anshul Saini • Feb 19 '21

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

Pavan Jadhaw • Feb 19 '21

Its indent rainbow and bracket pair colorizer

Amy-Kate Andrews • Feb 17 '21

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

ProMikeCoder2020 • Feb 17 '21

You use light theme?

Amy-Kate Andrews • Feb 18 '21

Yep! It feels better on my eyes.

Sarthak Sharma • Feb 18 '21

Try horizon

🌌 Sébastien Feugère ☔ • Feb 21 '21

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

Peter C • Feb 19 '21

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

Ejabu • Feb 22 '21

I think you may love this

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

Pavan Jadhaw • Feb 18 '21

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

Michael R. • Feb 21 '21 • 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. 🙃🙃🙃

Anshul Saini • Feb 19 '21

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

DNI9 • Feb 19 '21

hm..

Atulit Anand • Feb 21 '21

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

daniely-93 • Feb 20 '21

Have you tried a dark theme? I can't imagine staring for a few hours this theme 😂

Sarthak Sharma • Feb 17 '21

TODO Highlight is a cool one. 🙌🏼

CoderZ90 • Jul 16 '22

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

CoderZ90 • Jul 23 '22

wow can you give your vscode settings file plz

Rishabh Tyagi • Feb 18 '21

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

Ridhik Govind • Feb 19 '21

This is looking amazing bruh ! ;)

LelouchBrowneyes • Feb 21 '21

Thanks for the cap.

Jitu Nayak • Feb 22 '21

Thanks for the color highlight extension. I never used it before. But i knew that i need this functionality 😜

Abdullah Miraz • Feb 21 '21

best of all to me, thanks man 😎

Rishabh Tyagi • Feb 21 '21

🤟🤟

Sarthak Sharma • Feb 18 '21

Damn, gotta try this theme.

saurav sharma • Feb 17 '21 • Edited

this is how my current IDE setup look likes

Sarthak Sharma • Feb 17 '21

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

saurav sharma • Feb 17 '21

theme: Deepdark Material Theme

Sarthak Sharma • Feb 17 '21

Nice !!

Zul-fwz • Feb 20 '21

Extension?

ipramudya • Feb 24 '21

what font is that ?

Imagineee • Feb 22 '21

love the darknes

Gulajava Ministudio • Feb 18 '21

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

t7yang • Feb 18 '21

Theme: Dark Lavender my theme
Font: Lilex

Hardik Khichi • Mar 4 '21

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.

t7yang • Mar 4 '21 • 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",

Alexandru019 • May 25 '21 • 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?

t7yang • May 25 '21

show your vscode settings

Alexandru019 • May 25 '21

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

}

Alexandru019 • May 25 '21

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

t7yang • May 25 '21

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)

Sarthak Sharma • Feb 18 '21 • Edited

Sweet

Jolene Langlinais • Feb 20 '21

Theme: Lucy
Font: Fira Code

Reaper • Feb 18 '21

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

thisisleobro • Feb 23 '21

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

Reaper • Feb 23 '21

Haha thanks 😊

strawhatsai • Mar 1 '21

damn son. this is amazing

Junxiao Shi • Feb 18 '21

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)

Pacharapol Withayasakpunt • Feb 18 '21 • 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...

Junxiao Shi • Feb 18 '21

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

Pacharapol Withayasakpunt • Feb 18 '21

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

Imagineee • Feb 22 '21

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

Zachary Stone • Feb 17 '21 • Edited

Theme: Arbitor
Font: Jetbrains Mono w/ font ligatures

Sarthak Sharma • Feb 17 '21

How does it looks?

Zachary Stone • Feb 17 '21

Do you not see my picture in the post?

Sarthak Sharma • Feb 17 '21

Shit, it wasn't showing in the Notification section my bad. 😅

Zachary Stone • Feb 17 '21

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

Sarthak Sharma • Feb 17 '21

But anyways, your setup looks cool. 🔥

Zachary Stone • Feb 17 '21

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.

Sarthak Sharma • Feb 17 '21

SynthWave 🥲 I always tried to use it but seems to complex to even setup.

Shinigami • Feb 20 '21

𝗧𝗵𝗲𝗺𝗲: Dark+ (default dark)
𝗙𝗼𝗻𝘁: MesloLGS NF

hi-res link

Must have extensions:

eamodio.gitlens
pflannery.vscode-versionlens
wmaurer.change-case

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

Felipe Scrochio Custódio • Feb 21 '21

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

Raymond Price • Feb 18 '21 • Edited

Theme: Kawaii
Font: Basic Consolas.
Full list of extensions
Recommended:

Jonah Lawrence • Feb 17 '21 • Edited

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

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

Sarthak Sharma • Feb 18 '21

Customisation like?

Jonah Lawrence • Feb 18 '21

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.

Jakub Leško • Feb 18 '21

Color theme: Monokai Pro (Filter Octagon)
Icon theme: Monokai Pro (Filter Octagon) Icons
Product icons: Fluent Icons
Font: JetBrains Mono

Felix Swinkels • Feb 19 '21 • Edited

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

Luis Lopez • Feb 20 '21

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

Halí • Feb 22 '21 • Edited

Looks good 👍🏽
I like gruvbox so much

Imagineee • Feb 22 '21

love the subtle colours

Pacharapol Withayasakpunt • Feb 18 '21 • Edited

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

Z • Feb 19 '21 • Edited

Does anyone use theme: Shades of purple ?

I love theme dracula too.

FaRooQ Khan • Mar 14 '21

Shadea of purple => Yes!

Sharoz Ijaz • Feb 18 '21

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

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

Andrew Baisden • Feb 18 '21

Theme: Dracula 🧛🏻‍♂️
Font: JetBrains Mono
Icons: Material Icon Theme

PuruVJ • Feb 18 '21

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

relativelyrehan • Feb 17 '21

That is a nice setup, here's mine:

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

Sarthak Sharma • Feb 17 '21

Insert an emoji. Damn that’s cool.

Giovanni Incammicia • Feb 18 '21

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

Brian Ting • Feb 18 '21 • Edited

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

Andres Linares • Feb 19 '21

Theme: GitHub Light
Font: Dank Mono

LulaSvob • Feb 20 '21

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

Sarthak Sharma • Feb 20 '21

Damn you revealed my evil plan. 😡

Imagineee • Feb 22 '21

mines don't have much but my new opensource project

LulaSvob • Feb 23 '21

mine's a joke of course :)

Tim Deschryver • Feb 18 '21

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

Jonathan Yee • Feb 22 '21 • Edited

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

Michael R. • Feb 21 '21 • 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

😎👍

Muhammad Hasnain • Feb 17 '21

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!

Muhammad Hasnain • Feb 17 '21

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

Sarthak Sharma • Feb 17 '21

Well I'm using Cascadia Code PL

Akshit Garg • Feb 19 '21

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

cesaruseche18 • Feb 19 '21 • Edited

Theme: Tokio Night

Extensions:

ES6 React Snippets
Git Lens
Docker
Live Share
Prettier
Bracket Pair Colorizer 2
Material Theme Icons
Error Lens

Abraham • Feb 17 '21

Sarthak Sharma • Feb 17 '21

Hows that indentation is coloured?

Abraham • Feb 17 '21

The Indent rainbow extension

Sarthak Sharma • Feb 17 '21

Adding to my list. 💯🚀

Abhishek Keshri • Aug 5 '21

Here's mine 🌈🙌🏻
Theme: Nightbow
Font: Fira Mono

2KAbhishek / Nightbow

Black VS Code theme with bright colors 🌃🌈

Manuel Rivera • Feb 20 '21 • Edited

Here's mine

Theme: Aurora X
Font: Consolas

Rashil Gandhi • Feb 21 '21

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

bright • Feb 24 '21 • 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.

Krushn Dayshmookh • Feb 27 '21

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

Sarthak Sharma • Feb 27 '21

Nice 👍🏼

𝗠𝗘𝗥𝗖𝗬 Ⓜ️ • Feb 18 '21

I'm using the slack theme and it looks amazing

Sarthak Sharma • Feb 18 '21

I use to have that too.

Jitu Nayak • Feb 22 '21 • Edited

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