Is there a way to make vscode line number field smaller width?

Question

The vertical column that contains the code line number is VSC is too wide. Is there a way to narrow it down?

Answer 1

[EDIT MAY 2020] The name of the undocumented setting has apparently been changed to editor.lineDecorationsWidth, so updating answer below.

Actually, there is an undocumented setting in Visual Studio Code that will do exactly what you want. It's called "editor.lineDecorationsWidth", and although you will get some kind of warning Unknown setting parameters or underline squiggly, it will work.

This is the config for minimum possible space taken by line numbers (and keeping said line numbers, of course):

"editor.lineDecorationsWidth": 0,
"editor.glyphMargin": false,
"editor.folding": false,

source: https://github.com/Microsoft/vscode/issues/48791

Answer 2

You can't change the size of this column.

Actually there are three columns:

• left of the linenumber is the column called glyphMargin, the place to set debugging breakpoints (red dot). (When you edit settings, the column displays a pen when you point on the line as seen in the screenshots below)
• the line number itself
• right of it you can fold/unfold your code.

If all three are active, it looks like this (settings) or a like above (code)

To save space you can

• switch off the display of line numbers:

  "editor.lineNumbers": "off"
  

• switch off the code folding feature:

  "editor.folding": false
  

• if you don't use the debugger, disable the glyphMargin:

  "editor.glyphMargin": false
  

This is probably not what you want, but if you don't use code folding or the debugger or don't need linenumbers, you can at least save a little bit of space. To change these settings press ctrl, or click on the menu file/preferences/settings.

Answer 3

If you use the CustomizeUI plugin, you can edit the CSS to modify the width as follows... However, I notice one issue is that the click area of the folding arrows becomes a little misaligned (still usable, just a few pixels off). I'm not entirely sure how to fix it (didn't look hard enough possibly).

Here's some CSS for minifying the line number margin widths:

"customizeUI.stylesheet": {
    // Change width/appearance of line-number, breakpoints, code-folding arrows:
    ".monaco-editor .margin": "background: #111; width: 55px !important;",
    ".monaco-editor .glyph-margin": "width: 0px !important;",
    ".monaco-editor .margin-view-overlays": "width: 55px !important;",
    ".monaco-editor .margin-view-overlays .cgmr": "width: 0px !important; display: none;", // hide breakpoints (I don't use them) (not necessary if editor.glyphMargin = false)
    ".monaco-editor .cldr.codicon.codicon-folding-expanded, .monaco-editor .cldr.codicon.codicon-folding-collapsed": "left: 22px !important; width: 30px !important;",
    ".monaco-scrollable-element.editor-scrollable": "left: 50px !important;",
    ".monaco-editor .margin-view-overlays .line-numbers": "left: 3px !important;"
}

Answer 4

If you create a font specifically for it I suspect that either filling the font bounds more and then setting it as the pref font, then adjusting zoom in/out. Depending on the graphics output preprocessing sometimes that scales the display that vsCode is rendering from its software. If it is in fact the case that maybe you're zoomed in too much to a small font, it might look different for you than anyone else. It may help to change try installing vscode in a vm to see if defaults look the same. Maybe it's a setting or extension causing a graphical artifact on your machine.