Sarthak Sharma for XenoX

Posted on Feb 17, 2021

Show off your VSCode Setup 👩🏻‍💻💯

#watercooler #discuss #productivity

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.

𝗧𝗵𝗲𝗺𝗲: Cobalt2 Rocket
𝗙𝗼𝗻𝘁: Cascadia Code PL
𝗣𝗲𝗮𝗸𝗰𝗼𝗮𝗸 𝘁𝗵𝗲𝗺𝗲: Svelte Orange

Top 3 Plugins I ❤️

Polacode : Carbon like Polaroid for your code
ES7 React/Redux/GraphQL/React-Native snippets
Todo+: Manage todo lists with ease. Powerful, easy to use and customizable.

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

Top comments (140)

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?

Sarthak Sharma • Feb 17 '21

TODO Highlight is a cool one. 🙌🏼

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 😂

DNI9 • Feb 19 '21

hm..

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.

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

🤟🤟

Ridhik Govind • Feb 19 '21

This is looking amazing bruh ! ;)

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

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

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

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

strawhatsai • Mar 1 '21

damn son. this is amazing

thisisleobro • Feb 23 '21

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

Reaper • Feb 23 '21

Haha thanks 😊

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

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!

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.

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

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

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

View full discussion (137 comments)

DEV Community

Show off your VSCode Setup 👩🏻‍💻💯

Top comments (140)

Read next

Postman 101 Workshop

How do you Reach the Flow State While Programming?

How Do You Define "Meaningful Work?"

API GOVERNANCE CHECKLIST FOR MANAGERS IN 2024