My 2025 VS Code setup: sleek, efficient, and tailored for clarity. Let’s build yours step by step
⚙️ 1. Configuring settings.json for a Clean VS Code Setup
open the Command Palette in VS Code, press:
Code
Loading content...
Just a moment while we prepare your experience
My 2025 VS Code setup: sleek, efficient, and tailored for clarity. Let’s build yours step by step
open the Command Palette in VS Code, press:
it will open the Command Palette
Then type:
1settings.jsonFrom the list, select: Preferences: Open User Settings (JSON)
screen shot of command palette
This opens your personal configuration file, where you can fine-tune everything from themes to editor behavior.
Once you’ve opened your settings.json file via the Command Palette, paste the following configuration.
1{
2 "editor.fontSize": 16.3, // 👓 Slightly larger font for better readability
3 "editor.lineHeight": 20.1, // 📏 Adjusts line spacing for a more breathable layout
4 "editor.padding.top": 5, // 🧘 Adds top padding to center the code visually
5 "workbench.secondarySideBar.showLabels": false, // 🧭 Hides labels in the secondary sidebar for a cleaner look
6 "workbench.statusBar.visible": false, // 🚫 Removes the status bar to reduce visual noise
7 "terminal.integrated.tabs.hideCondition": "singleTerminal", // 🧵 Hides terminal tabs when only one is open
8 "window.commandCenter": false, // 🧭 Disables the command center from the title bar
9 "window.menuBarVisibility": "toggle", // 🧼 Menu bar toggles on hover — minimal until needed
10 "explorer.compactFolders": false, // 📁 Keeps folder structure expanded for clarity
11 "explorer.confirmDragAndDrop": false, // 🖱️ Removes confirmation prompts for drag-and-drop
12 "explorer.confirmDelete": false, // 🗑️ Removes confirmation prompts for delete actions
13 "workbench.startupEditor": "none", // 🚀 Starts with an empty editor — no welcome screen
14 "workbench.tips.enabled": false, // 🧠 Disables random tips on startup
15 "window.zoomLevel": 0.6 // 🔍 Slight zoom for better visibility without clutter
16}
17Now that your VS Code is visually cleaner,
Install the Custom CSS and JS Loader extension. This lets you inject your own styles and scripts into VS Code — perfect for hiding unwanted elements or tweaking the interface beyond what settings.json allows.
a screen of Custom CSS and JS Loader extension from extension marketplace
Now let’s create the file that will hold your custom styles.
Now that you’ve created your custom-code-style.css file, paste the following configuration into it. These styles will clean up and personalize your VS Code interface — from font smoothing to scrollbar removal and subtle UI tweaks:
1/* Apply custom font to all elements except codicons */
2* :not(.codicon) {
3 font-family: 'Dank Mono', 'SF Mono', Monaco, Inconsolata, 'Roboto Mono', 'Source Code Pro', Menlo, Courier, monospace !important;
4}
5
6/* Center the command palette vertically */
7.quick-input-widget {
8 top: 25vh !important;
9}
10
11/* UI customizations */
12.notification-toast,
13.quick-input-widget.show-file-icons,
14.editor-widget.find-widget {
15 box-shadow: none !important;
16}
17
18.editor-widget.find-widget {
19 border-radius: 4px;
20}
21
22.quick-input-list .scrollbar,
23.monaco-action-bar.quick-input-inline-action-bar,
24.monaco-scrollable-element > .shadow.top,
25.monaco-editor .scroll-decoration,
26.monaco-editor .cursors-layer {
27 display: none;
28}
29
30.quick-input-titlebar {
31 background: #100B15 !important;
32}
33
34.monaco-workbench .part.editor > .content .editor-group-container > .title.title-border-bottom:after {
35 display: none;
36}
37
38.sidebar .title-label {
39 padding: 0 !important;
40}
41
42.sidebar {
43 border: none !important;
44}
45
46.monaco-workbench .monaco-list:not(.element-focused):focus:before,
47.monaco-list-row.focused {
48 outline: none !important;
49}
50
51.title.show-file-icons .label-container .monaco-icon-label.file-icon {
52 justify-content: center;
53 padding: 0 !important;
54}
55
56.title .monaco-icon-label:after {
57 margin-right: 0;
58}
59
60.monaco-workbench .part.editor > .content .editor-group-container > .title > .label-container > .title-label {
61 padding-left: 60px;
62}
63
64.title .monaco-icon-label.file-icon {
65 margin: 0 35px;
66}
67
68.monaco-editor .cursors-layer .cursor {
69 background-image: linear-gradient(135deg, #ffaffc 10%, #DA70D6 100%);
70}
71
72/* Safer: only affect icons in the Explorer sidebar */
73.explorer-viewlet .monaco-list-rows .codicon {
74 color: #ffffff3b !important;
75}
76now, open settings.json file and add this code the existing configuration
1 //my example
2"vscode_custom_css.imports": [
3
4 "file:///run/media/murali/Backup/custom-code-style.css"
5
6],
7
8//replace [cssfilepath] with your custom-code-style.css
9"vscode_custom_css.imports": [
10
11 "file://[cssfilepath]"
12
13],To make your VS Code look exactly like mine, you’ll need to install the fonts used in the configuration:
To complete the look and feel of your customized VS Code setup, head over to the Dank Mono GitHub repository and download the following font files.
DankMono-Bold.otf < click to download
DankMono-Italic.otf < click to download
DankMono-Regular.otf < click to download
Once downloaded, install each font manually by right-clicking on the file and selecting: Install
To keep your workspace clean and distraction-free:
To streamline your workspace even further, reposition the Activity Bar:
a screenshot of configuring activity bar
To complete your VS Code setup, head to the Extensions Marketplace and install the following:
configuration of visual studio code theming
To make Prettier work automatically, enable Format on Save in your settings:
1Ctrl + ,
🧠 Now every time you hit save, your code gets cleaned up instantly — no extra steps, no mess.
You’ve just transformed VS Code into a sleek, focused, and personalized coding environment — from deep settings.json tweaks to custom CSS injections and handpicked extensions. This isn’t just a setup… it’s a statement.
If you found this guide helpful, follow me on GitHub and LinkedIn — I share more tips like this to help developers build intentional, distraction-free workflows.
GitHub : https://github.com/tobioffice
LinkedIn: https://www.linkedin.com/in/tobioffice
Discover more programming insights, technology deep-dives, and development best practices.
Explore More Articles