DEV Community

Luciano Menezes
Luciano Menezes

Posted on

HOW TO CUSTOMIZE YOUR VS Code AND Windows TERMINAL!

This post is a translation of a Thread posted by me on Twitter! Feel free to see the original version here

Image description

Image description

⭐WHAT DO WE DO???

In this Post, we will go through themes, vscode settings, fonts, icons, color palette, terminal styling in Windows, EVERYTHING YOU CAN IMAGINE

πŸŽ† - VS CODE THEME

The theme I'm using is called "Min Theme", which is very simple, but very good!

If you want to use a livelier theme, there's "Shades of Purple" which I used for a long time! In addition to "Andromeda", "Tokyo Night" and the famous "Dracula" that you already know!

Here are the links, choose the one you prefer! Everyone is amazing

Min Theme
Image description

Shades of Purple (Super Dark)
Image description

Andromeda
Image description

Tokyo Night
Image description

Dracula
Image description

πŸ—‚οΈ- FILE ICONS

Currently, I'm using 'vscode-icons", which I really like! However, one that goes REALLY well with this theme is "Symbols", which follows the minimalist aesthetic!

These two are the ones I recommend! It's up to you to choose!

vscode-icons
Image description

Symbols
Image description

πŸ…°οΈ- VSCODE FONTS

This is the BEST FONT I found, called "JeiBrains Mono"!

It is a very complete font for devs, containing EVERYTHING you need, such as fontLigatures, Nerd Fonts, etc...

Another good one is Geist Mono, launched by Versel, which also contains ALL OF THIS

You choose!

JetBrains Mono
Image description

Geist Mono
Image description

⌨️ - GENERAL SETTINGS

This is where everything will change! I'll show you how to really make VSCode your own!

Press Ctrl + Shift + P in VsCode and search for "Preferences: Open User Settings (JSON)"

This is the JSON that goes into all the VS CODE configs! There's a lot to put here, so here is a link to the Rocketseat video explaining everything! (Portuguese)

If you just want to get the configs, you can look at his github repository, in the description of this video

If you want to leave it EXACTLY as mine is, just read it here, which is a simpler version that I customized, but it's not very different!



{
"symbols.hidesExplorerArrows": false,
"tabnine.experimentalAutoImports": true,
"workbench.colorTheme": "Dracula",
"workbench.iconTheme": "symbols",
"editor.fontFamily": "JetBrains Mono",
"vscode-pets.theme": "forest",
"editor.fontSize": 14,
"editor.lineHeight": 1.8,
"workbench.startupEditor": "newUntitledFile",
"editor.renderLineHighlight": "gutter",
"editor.fontLigatures": true,
"workbench.editor.labelFormat": "short",
"explorer.compactFolders": false,
"editor.semanticHighlighting.enabled": false,
"breadcrumbs.enabled": false,
"editor.minimap.enabled": false,
"workbench.statusBar.visible": false,
"apc.electron": {
"titleBarStyle": "hiddenInset",
"trafficLightPosition": { "x": 11, "y": 10 },
"frame": false
},
"window.commandCenter": false,
"apc.header": {
"height": 36
},
"apc.stylesheet": {
".title-label > h2": "display: none",
".editor-actions": "display: none",
".nosidebar .inline-tabs-placeholder": "width: 75px",
".pane-header": "padding: 0 8px",
".pane-body": "padding: 8px",
".split-view-view:first-child .pane-header": "display: none !important;",
".monaco-list-row": "border-radius: 4px;",
".monaco-workbench .monaco-list:not(.element-focused):focus:before": "display: none;"
},
"apc.listRow": { "height": 24 },
"explorer.fileNesting.enabled": true,
"explorer.fileNesting.patterns": {
".ts": "${capture}.js",
".js": "${capture}.js.map, ${capture}.min.js, ${capture}.d.ts",
".jsx": "${capture}.js",
".tsx": "${capture}.ts",
"tsconfig.json": "tsconfig.*.json",
"package.json": "package-lock.json, yarn.lock, pnpm-lock.yaml, bun.lockb"
},
"terminal.integrated.fontSize": 14,
"terminal.integrated.fontFamily": "JetBrainsMono Nerd Font",
"window.density.editorTabHeight": "compact"
}
Enter fullscreen mode Exit fullscreen mode




🎲- MISCELLANEOUS IMPROVEMENTS

To improve it further, go to each panel you don't like, right-click and select "Hidden"

Do this with "Overview" in Explorer, for example, with "Problems" in the terminal, "Timeline", etc...
Image description

😺- VS CODE PETS

She adds PETS THAT STAY WITH YOU! There are several different animals, you can change the litter, play with them, play ball, EVERYTHING!!!

BEST EXTENSION EVER!
Leaves the aesthetics AMAZING!!

vscode-pets
Image description

πŸ–₯️- NOW IN TERMINALLLL

Here, I will style the WINDOWS terminal based on this video
, SORRY TO THOSE WHO USE MAC/LINUX MY BAD

If you want to watch his video, I highly recommend it! VERY good video!

🎨- TERMINAL COLOR PALETTE

To see a theme, just choose one you like in the Windows Terminal Theme

In my case, I'm using the "JetBrains Dracula" theme, but when the terminal is inside VS Code, it won't make a difference lol

INSTRUCTIONS:

When you find the theme you like on the website, click the "Get Theme" button, which will copy the theme

In the terminal, click on the arrow -> settings -> Open JSON file (last option) and look for the value "schemes"

Then, just paste the theme you had copied at the end of the Array and select it from the options! ENJOY!
Image description

πŸ…°οΈ- NERD FONTSSS

A "Nerd Font" is a font that contains dev symbols, such as the node symbol, etc... which REALLY improves the aesthetics of the terminal

For the terminal font, I will be using the FiraCode Nerd Font, but you can find several others here!
(If you want, you can even use the JetBrains Mono that is already installed!)

To install the font, search for it on github, download and install the font by right click + install on all of them

Then, just go to the terminal and press the arrow -> settings -> Default -> Appearance and select the font you installed!

Just restart the terminal and be happy!
Image description

πŸŽ†- TERMINAL THEMES (GOOD PART)

To put those themes in the terminal, we'll use Oh-My-Posh!

The instructions for doing everything are a little more extensive, but just read the documentation and you'll get the hang of it! Anyway, it's a shame to see the config video I posted!

It offers VARIOUS themes for your terminal! What I'm using is a simple one, called "neko", just install it and run for the hug

Make sure WinGet is installed first, otherwise just install the "App Installer" by searching for "WinGet" in the Microsoft Store

If you have any problems with initializing the theme configuration file, a post that helped me was this one, on StackOverflow!
Image description

🎲- OTHER SETTINGS

To improve the terminal a little more, you can make some general settings in the arrow -> Settings -> Appearance

Then, you can put a background image (Default->Appearance), make the navigation bar transparent (acrylic mode), put a clear theme, among MANY other things

Then it's up to you to explore!
Image description

πŸ˜„- THANK YOU!

That was Thread, I hope you liked it and found it a good customization for your VS Code!

If you have any questions, just DM me on Twitter! I'm always available!

My socials:
Twitter
GitHub

My projects:
DayKeeper
better-format

Thank you!

Top comments (0)