The vertical column that contains the code line number is VSC is too wide. Is there a way to narrow it down?
-
14as I see you never accepted an answer on your questions. Pls. read stackoverflow.com/help/someone-answers and consider which answers (also to your older questions) you want to accept. Thanks– jpsJul 11, 2017 at 7:18
-
why cannot the crowd make a decision– Martian2049Jan 25 at 21:35
5 Answers
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.
-
-
1@Brendan with folding activated, you'll see a square box with a
-
sign in that column (when your mouse pointer is in it) in front of classes, functions, if blocks etc. ,. When you click on that-
, you'll fold away that class, function etc, which means you're reducing it to one line. The-
also changes to+
. When you click on that+
, you'll unfold the code again.– jpsAug 14, 2019 at 7:51 -
Thanks for helping me understand why it's so damn wide! Ultimately I want both of those tools, but I wasn't thinking of them when I was craving to tighten things up. I'm used to Netbeans where the folding tools were outside the "line numbers" visually (and the debugging stuff was "on top of" the line numbers). Considering all the utility, the default spacing isn't so wasteful. Jul 11, 2020 at 23:18
-
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
-
1
"editor.lineNumbersMinChars": 1,
is not working. I have that or not, it shows nothing changes– Thinh NVApr 23, 2020 at 10:14 -
1yeah,
"editor.lineNumbersMinChars": 1,
doesn't work for me either. However"editor.lineDecorationsWidth": 0,
seems to work, and is similarly undocumented. May 2, 2020 at 11:20 -
1I was wondering when (and why) this had stopped working, thanks for your comment! I've updated my answer above accordingly– daniiMay 8, 2020 at 10:16
-
I get "unknown configuration setting" for both
editor.lineNumbersMinChars
andeditor.lineDecorationsWidth
. Neither have any effect, either. Jul 7, 2020 at 3:50 -
How can I reach those settings? Where is this config located? I can't find them inside the Tools/Options. Jul 7, 2020 at 9:51
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;"
}
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.
[Just in case people get here searching for how to change the glyph margin I'll note this coming "feature".]
A setting is being added to expand! the glyphMargin
- that portion to the left of the line numbers where the breakpoint dots go for instance.
glyphMarginRightPadding
It is in v1.61 Insiders now and should be released to Stable early October 2021. But the default value 0
is the current width - you can only expand it with positive numbers unfortunately.