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,
    "": 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)

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.

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.

kwadoskii profile image
Austin Ofor

Nice. But I'm keeping my line numbers 🙂

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.

curiousdev profile image

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

fenchu profile image

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

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.