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.

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
}

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

Comments

[Austin Ofor]

Nice. But I'm keeping my line numbers 🙂

[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!

[Don Cadavona]

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.

[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.

[Don Cadavona]

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.

[CuriousDev]

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

[fenchu]

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

[Don Cadavona]

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.

[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.