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

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

Solution 1:

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.

Solution 2:

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

[EDIT MAY 2020] The name of the undocumented setting has apparently been changed to editor.lineDecorationsWidth

Solution 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;"
}