DEV Community

Don Cadavona
Don Cadavona

Posted on

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.

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.