This post is a translation of a Thread posted by me on Twitter! Feel free to see the original version here
⭐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
🗂️- 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 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!
⌨️ - 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"
}
🎲- 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...
😺- 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!!
🖥️- 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!
🅰️- 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!
🎆- 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!
🎲- 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!
😄- 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 projects:
DayKeeper
better-format
Thank you!
Top comments (0)