Add `editor.contentLeftPadding` to add padding between the `editorGutter` and `editor`.

[shujaatak]

Note: Please see BOTH screenshots below and also TWO possible solutions at the end!

Please add some option like editor.contentLeftPadding or whatever you want to name it, to resolve at least these two issues:

1. Currently in VS Code, the gutter and the code editor are so close that while clicking in the beginning of a line one can accidentally click on collapse button in the gutter region which sometimes really bother the user.

2. When a user apply a different background color to gutter for either theming purpose or to show that it's not part of the editor region, the code in the editor and also the vertical lines between the first pair of curly braces of code blocks basically touch the gutter. See the following first screenshot.

If we had editor.contentLeftPadding then the user could just add that to settings.json like this:

"workbench.colorCustomizations": {
        "editor.contentLeftPadding": 8px;
        "editorGutter.background" : "#454545",
    },

which could separate code from the gutter and look like this:

There are two ways to solve this issue:

1. Adding editor.contentLeftPadding setting. It will not create any changes to VS Code by default as it would take effect only when the user use this setting, hence, those users who are used to the current user interface of the VS Code will not notice this change.
2. However, if a little padding is added by default in the VS Code , it will not be much noticeable to those users who are used to the current look and feel of the user interface while resolving the above mentioned issues at the same time!

As VS Code doesn't allow users to add custom CSS in it so a setting like editor.contentLeftPadding or built-in default padding for editor's content is required.

If built-in default padding is added to VS Code then a setting to remove that built-in default padding can also be added so that the user can remove it if the user doesn't like it, just like the following settings to remove folding, glyphMargin and lineNumbers:

"editor.folding": false,
"editor.glyphMargin": false
"editor.lineNumbers": "off",

Proof of concept Implementation and Observation

For proof of concept, I added the following CSS code to the end of this CSS file /usr/share/code/resources/app/out/vs/workbench/workbench.desktop.main.css:

.monaco-editor .lines-content {
    padding-left: 8px;
}

which produces the following neat and required result, such that, now neither I can't accidentally click on folding buttons nor the code touches the gutter:

But I noticed that unlike HTML textarea tag which allows a user to click in the padding area to place cursor at the start of the nearest line no matter how wide padding you set, in VS Code I can't place the cursor at the start of the line by clicking in the padding region which might be desirable by some users.

My VS Code settings.json:

The following are the settings for those who wonder what settings I have for the colors of gutter, tabs and breadcrumb of my VS Code. Note that these color settings look best with Dart+(default dark) theme.

{
    // Look best with "Dart+(default dark)" theme.
    "workbench.colorCustomizations": {
        "editorGutter.background" : "#454545",

        "editorGroupHeader.tabsBackground": "#454545",        
        "tab.inactiveBackground":  "#454545",

        "tab.activeBackground": "#5b5b5b",
        "breadcrumb.background": "#5b5b5b",     
    },
}

[shujaatak]

One can see a similar issue with monaco-editor here microsoft/monaco-editor#200.

As VS Code doesn't allow users to add custom CSS in it so a setting like editor.contentLeftPadding or built-in default padding for editor's content is required.

[alexdima]

cc @roblourens . I think you also needed something like this in Notebooks? (I noticed a commit from you)

[roblourens]

I added padding to the glyph margin (breakpoints) then removed it when we didn't need that option anymore. That wouldn't have helped here

[shujaatak]

Please note that I made this comment the part of the issue's description as it seems relevant.

For proof of concept, I added the following CSS code to the end of this CSS file /usr/share/code/resources/app/out/vs/workbench/workbench.desktop.main.css:

.monaco-editor .lines-content {
    padding-left: 8px;
}

which produces the following neat and required result, such that, now neither I can't accidentally click on folding buttons nor the code touches the gutter:

But I noticed that unlike HTML textarea tag which allows a user to click in the padding area to place cursor at the start of the nearest line no matter how wide padding you set, in VS Code I can't place the cursor at the start of the line by clicking in the padding region which might be desirable by some users.

[shujaatak]

@alexdima Can you please somehow expedite the process to resolve this issue?
Almost all code editors provide default feature to avoid the issues mentioned above but unfortunately vs code lacks this.
We all would be so grateful to you if you please resolve this issue as soon as possible. By the way, I could have helped in resolving this but I don't know very well the internals of vs code.

[mckeed]

There are already settings for editor.padding.top and editor.padding.bottom, so the setting should be editor.padding.left and should result in the same amount of spacing as those do.

[realSilasYang]

When can we get the function satisfifed ... have noticed so many similar issues been proposed !!

[pmeaney]

Echoing OP -- This would be great to have.

So much dead space here-- I don't need empty space in my editor. Please work on adding a way to reduce the gutter around the line numbers. I only need about 2-5 pixels on either side of the line number.

Currently I think there's about 25-30 pixels to the left of line number, and 15-20 to the right.

I'd like to have those 50 pixels available for useful space please. No need for empty, unused space. 😅 😜

In fact, it would be great if there was a "Concise Theme" or "Space Minimalism Theme" that removed as much empty space as possible across Tabs in the editor & terminal, the left & right-side gutters, etc.

Sidenote for anyone trying to reduce unnecessarily large Activity Bar space-- Check out the "Activitus Bar" extension.

[ishazel]

Hoping for a solution soon :)

[mckeed]

@pmeaney if you want less space in the gutter to the left of the line numbers, the ticket for that is #93887 or #30795

Also, FYI, you can currently reduce the space to the right of the line numbers by setting "editor.showFoldingControls": "never", and it looks like you have some other things enabled that are increasing the line decorations space (to the left of the line numbers) because mine is only 20px wide.

[shujaatak]

@alexdima @bpasero Waiting for a year and counting 🥱

[yCodeTech]

Just stumbled on this looking for this exact solution. Not sure why it's so difficult to get an answer, it's not like it's difficult to implement, as the preliminary work is already there for the padding top and bottom as previously said. Please can we get this implemented.

[ChristopherHaws]

I am constantly accidently hitting the collapse button when trying to select code starting at the start of a line! Hope this gets implemented at some point. :)

[mraheelkhan]

Maybe it helps someone.

"editor.lineDecorationsWidth" : 100
"editor.glyphMargin": false,

It will put space between the line start and the line numbers/folding icon.

I have plenty of space between the folding icon and the line start. It helps me to avoid accidental clicks on folding.

[matprophet]

Would love to see this implemented. "lineDecorationsWidth" gets my view part of the way there but a real margin would be a nice visual change.

[MariuzM]

So this "editor.padding.top": 5, works but not "editor.padding.left": 5,

But this "editor.lineDecorationsWidth": 15, works even with

  "editor.folding": false,
  "editor.lineNumbers": "off",
  "editor.glyphMargin": false,

for now i'm using these settings

  "editor.lineDecorationsWidth": 15,
"editor.padding.top": 10,

"editor.folding": false,
"editor.lineNumbers": "off",
"editor.glyphMargin": false,