VSCode: Gain space by customizing the line number column

#productivity #tooling #vscode #dx

This is just another post of how to gain some spaces for reading code on VSCode when you don't have time to touch grass.

I wrote this because it's worth for learning and sharing about how we could have good developer experience in our daily tools.

Problem

And here in below is the one that I want after applying the change.

Solution

I read many blog posts and also issues on VSCode GitHub repository about tricks to maximize the free spaces here by adjusting the settings. I want to show the settings and also explain in below that why you should or should not adjust it.

{
    // How to gain some little spaces to see more code?
    // 1. If you dont want to see debugging breakpoints
    "editor.glyphMargin": false,
    // 2. If you dont want to see folding
    "editor.folding": false,
    // 3. If you dont want to see line numbers
    "editor.lineNumbers": "off",
    // 4. If you still want to see line numbers but make the right space be smaller
    // This config isn't officially documented, so it's blur
    "editor.lineDecorationsWidth": 6,
}

Everything is ok as long as you don't miss any ability after disabling settings, right?

1. Glyph margin

I would call it as debugging breakpoints region/area

Note: It also be useful for using Bookmark extension because the bookmark icons will also be shown as this column as well.

Breakpoints are useful for debugging purpose, obviously. But if your style is only about dump and die in PHP or console.log and return in Javascript, then this feature is almost useless. This is not wrong or right in your way to debug your code, as long as your languages allow it.

But what if I want to disable this feature for almost all languages and only enabled it on some specific languages that I actually use breakpoints for debugging?

Thanks to VSCode as they supported language-scoped settings and it's very simple:

{
    "editor.glyphMargin": false,
    // Enable features for Go files
    "[go]": {
        "editor.glyphMargin": true
    },
}

And this is the result:

Additionally, this is an interesting issue which has been declined to fix: https://github.com/Microsoft/vscode/issues/63215

2. Folding

What is the folding? It's actually expand and collapse code blocks actions.

If you disable this folding setting, the shortcuts along with expand/collapse actions will also be disabled which mean you will lose the feature.

After found this issue, I feel it's quite unexpecting and to be honest, I think the behavior should be corrected to let users control what happens on UI but still be able to use its shortcuts.

I actually created an issue but sadly it has been closed as it didn't have enough minimum thumb ups to make it happen in the planning backlog: https://github.com/microsoft/vscode/issues/229267

3. Line numbers

I never seen developers who want to disable it, to be honest. But i think it might be still very useful in case I want to right markdown stuffs as it's not too important to look at no-code stuffs with line numbers. I probably want to use the language-scoped settings like the (1) point to have it disabled on markdown.

So enable or disable this setting is subjective.

Toggle settings group

You may want to know if there is a way to quickly toggle a group of settings instead of manually changing one by one as it's quite inconvenient, right?

So here is a beautiful extension called Settings Cycler - which will help you on that.

See their blog to understand about it more: https://medium.com/hack-visual-studio-code/toggle-any-setting-in-vs-code-using-keyboard-shortcut-arguments-cdb5ddc56955