DEV Community

Don Cadavona
Don Cadavona

Posted on

13 1

Make Visual Studio Code Pretty

Save your eyes from cluttered editor. Make Visual Studio Code more pleasing to look at. This is similar to my "Make Sublime Text 3 Pretty" setup.

Image description

The original looks okay. But, it looks cluttered. To make it prettier, copy and save this settings to your settings.json:



{
    "breadcrumbs.enabled": false,
    "editor.fontFamily": "Fira Code",
    "editor.fontLigatures": true,
    "editor.fontSize": 14,
    "editor.lineHeight": 1.75,
    "editor.lineNumbers": "off",
    "editor.minimap.showSlider": "always",
    "editor.padding.bottom": 10,
    "editor.padding.top": 10,
    "editor.wordWrap": "on",
    "explorer.autoReveal": false,
    "explorer.openEditors.visible": 0,
    "workbench.activityBar.visible": false,
    "workbench.colorTheme": "Material Theme Palenight",
    "workbench.statusBar.visible": false
}


Enter fullscreen mode Exit fullscreen mode

Also, you need to install Material Theme in Visual Studio Code and Fira Code in your Operating System.

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more →

Top comments (9)

Collapse
 
doncadavona profile image
Don Cadavona • • Edited

The breadcrumbs discourages you from keeping your code structures as simple or flat as possible. If my code is simple, I shouldn't be needing the breadcrumbs. Also, in complex projects, still, I've never actually looked at the breadcrumbs.

Collapse
 
bmw2621 profile image
Ben Winchester •

I disagree, when you work ina large codebase with lots of modules, you have a lot of index.ts files, breadcrumbs definitely help with that.

But to each their own.

Thread Thread
 
doncadavona profile image
Don Cadavona • • Edited

I've had complex projects that had many index.ts files. It was a mess. I didn't use the breadcrumbs. I prefer keyboard shortcuts to go to files. It's faster for me than hovering and clicking through deep trees of code structures. That's just me, maybe because I love Vim.

Collapse
 
kwadoskii profile image
Austin Ofor •

Nice. But I'm keeping my line numbers 🙂

Collapse
 
doncadavona profile image
Don Cadavona •

I have found that I rarely look at line numbers when writing code. Except when I have to take a screenshot/video of my editor to show some code to others. But if its just me, I can still see the current line number via CMD/Ctrl + P then type ":" and go to any line with Cmd/Ctrl + P then type :<LINE NUMBER>.

But that's up to you. Some people also hides the minimap, but I like it. Cheers!

 
doncadavona profile image
Don Cadavona •

I don't even know you, I can't be thinking that. I love Vim. I never said I'm good at it.

Collapse
 
curiousdev profile image
CuriousDev •

Thanks, this is a nice example for how you can set up Visual Studio Code!

Collapse
 
fenchu profile image
fenchu •

Just remove the minimap, and keep the line numbers. then it is ok. How can you debug code without line numbers?

Collapse
 
doncadavona profile image
Don Cadavona • • Edited

I can always hit Command/Ctrl + P then type : to go to a specific line that an error indicates. Typing is faster than the cursor and scrolling, especially on codes with lots of line numbers.