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.

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

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 ! ;)

Abdullah Miraz • Feb 21 '21

best of all to me, thanks man 😎

Rishabh Tyagi • Feb 21 '21

🤟🤟

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 😜

saurav sharma XenoX • Feb 17 '21 • Edited

this is how my current IDE setup look likes

Sarthak Sharma XenoX • Feb 17 '21

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

saurav sharma XenoX • Feb 17 '21

theme: Deepdark Material Theme

Sarthak Sharma XenoX • Feb 17 '21

Nice !!

Zul-fwz • Feb 20 '21

Extension?

ipramudya • Feb 24 '21

what font is that ?

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"

}

Jolene Langlinais • Feb 20 '21

Theme: Lucy
Font: Fira Code

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.

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

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!

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 XenoX • Feb 17 '21

How does it looks?

Zachary Stone • Feb 17 '21

Do you not see my picture in the post?

Sarthak Sharma XenoX • 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 XenoX • Feb 17 '21

But anyways, your setup looks cool. 🔥

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

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

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

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

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

Raymond Price • Feb 18 '21 • Edited

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

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!

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

relativelyrehan XenoX • Feb 17 '21

That is a nice setup, here's mine:

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

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

PuruVJ • Feb 18 '21

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

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

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.

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 XenoX • Feb 17 '21

Well I'm using Cascadia Code PL

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.

Imagineee • Feb 22 '21

mines don't have much but my new opensource project

LulaSvob • Feb 23 '21

mine's a joke of course :)

Sarthak Sharma XenoX • Feb 20 '21

Damn you revealed my evil plan. 😡

Andrew Baisden • Feb 18 '21

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

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

I'm using the slack theme and it looks amazing

Sarthak Sharma XenoX • Feb 18 '21

I use to have that too.

Abraham • Feb 17 '21

Sarthak Sharma XenoX • Feb 17 '21

Hows that indentation is coloured?

Abraham • Feb 17 '21

The Indent rainbow extension

Sarthak Sharma XenoX • Feb 17 '21

Adding to my list. 💯🚀

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

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

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

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.