Vscode: Integrated terminal width too narrow

Created on 5 Dec 2019  路  25Comments  路  Source: microsoft/vscode


  • VSCode Version: 1.41.0-insider
  • OS Version: macOS Catalina version 10.15.1

Steps to Reproduce:

  1. start Visual Studio Code Insiders 1.41.0
  2. Toggle the integrated terminal
  3. When the terminal has started, it is narrower than the full width available. A very noticeable gap is visible to the right of the terminal. The problem is worse the more horizontal width available.

Screenshot showing gap

This behaviour is new in 1.41.0-insider. 1.40.2 does not have the problem.


Does this issue occur when all extensions are disabled?: Yes

bug integrated-terminal verified z-author-verified

Most helpful comment

I can also confirm this behaviour on my existing Stable install:

Version: 1.41.0 (user setup)
Commit: 9579eda04fdb3a9bba2750f15193e5fafe16b959
Date: 2019-12-11T18:37:42.077Z
Electron: 6.1.5
Chrome: 76.0.3809.146
Node.js: 12.4.0
V8: 7.6.303.31-electron.0
OS: Windows_NT x64 10.0.18362

and a clean Insiders install:

Version: 1.42.0-insider (user setup)
Commit: cbeff45f80213db0ddda2183170281ed97ed3b12
Date: 2019-12-13T07:08:57.560Z
Electron: 6.1.5
Chrome: 76.0.3809.146
Node.js: 12.4.0
V8: 7.6.303.31-electron.0
OS: Windows_NT x64 10.0.18362

The problem persists with terminal.integrated.rendererType set to auto, canvas and experimentalWebgl. dom does not exhibit this behaviour.

All other renderers seem to be more compact than the dom renderer. For example, here is it set to auto:
image

and here is it set to dom:
image

The terminal width (in characters) seems to be the same, but non-dom renderers render characters more compactly than dom, resulting in the space on the right.

All 25 comments

(Experimental duplicate detection)
Thanks for submitting this issue. Please also check if it is already covered by an existing one, like:

Can you share your settings?

Absolutely. My Code settings are synced to this gist https://gist.github.com/Mellbourn/2cb4e0da308c4bb3b086d64370238de7
My other macOS settings files are here https://github.com/Mellbourn/dotfiles

I have tested running VS Code Insiders without my VS Code settings, and the problem is still there, though not as pronounced.

The width of the gap seems to vary with the font used. Fira Code is worst (widest gap). Then Menlo, and finally Cascadia Code is the least bad. terminal.integrated.fontSize also matters.

But I have now discovered that the most important settings is terminal.integrated.rendererType. I usually set it to canvas, because it is faster for me than dom, but now I see that the problem disappears completely if I set it to dom.

I can confirm the same behavior on a brand new install of VSCode Insiders:

Version: 1.41.0-insider (user setup)
Commit: 9579eda04fdb3a9bba2750f15193e5fafe16b959
Date: 2019-12-10T21:44:16.632Z
Electron: 6.1.5
Chrome: 76.0.3809.146
Node.js: 12.4.0
V8: 7.6.303.31-electron.0
OS: Windows_NT x64 10.0.14393

No extensions are installed and the renderer is set to either auto or canvas.

I can also confirm this behaviour on my existing Stable install:

Version: 1.41.0 (user setup)
Commit: 9579eda04fdb3a9bba2750f15193e5fafe16b959
Date: 2019-12-11T18:37:42.077Z
Electron: 6.1.5
Chrome: 76.0.3809.146
Node.js: 12.4.0
V8: 7.6.303.31-electron.0
OS: Windows_NT x64 10.0.18362

and a clean Insiders install:

Version: 1.42.0-insider (user setup)
Commit: cbeff45f80213db0ddda2183170281ed97ed3b12
Date: 2019-12-13T07:08:57.560Z
Electron: 6.1.5
Chrome: 76.0.3809.146
Node.js: 12.4.0
V8: 7.6.303.31-electron.0
OS: Windows_NT x64 10.0.18362

The problem persists with terminal.integrated.rendererType set to auto, canvas and experimentalWebgl. dom does not exhibit this behaviour.

All other renderers seem to be more compact than the dom renderer. For example, here is it set to auto:
image

and here is it set to dom:
image

The terminal width (in characters) seems to be the same, but non-dom renderers render characters more compactly than dom, resulting in the space on the right.

Copied over from https://github.com/microsoft/vscode/issues/87153#issuecomment-569307120

Note that this depends on the renderer being used, the char width differs between dom and the others and we use the dom sizing to determine the size as it's the widest. Since renderers aren't changed much I guess we should do a resize to fix this up.

This is blocked on an upstream API to pull char dimensions https://github.com/xtermjs/xterm.js/issues/702

@Tyriar thanks for pointing out the external issue, which unfortunately doesn't seem to be making much progress. Is there anything we can do to mitigate that behavior when using canvas? dom is rather slow and resource-intensive :-(

Thanks.

Lubuntu user here, same issue. canvas and experimentalWebGl have this bug. dom renderer fixes this, but it is slower.

There is no way I'm moving back to dom, it's way too slow :-(.
However, I've noticed that setting an even number for the integrated terminal font size mitigates the behavior. For instance, I've set 12 instead of 13 and it's much better.

It's not perfect but I hope that helps until we really fix this issue.
Thanks!

There is no way I'm moving back to dom, it's way too slow :-(.
However, I've noticed that setting an even number for the integrated terminal font size mitigates the behavior. For instance, I've set 12 instead of 13 and it's much better.

It's not perfect but I hope that helps until we really fix this issue.
Thanks!

Can confirm :). This is getting hilarious :100:

1.43.0
78a4c91400152c0f27ba4d363eb56d2835f9903a
x64
Win10

can confirm bug

However, I've noticed that setting an even number for the integrated terminal font size mitigates the behavior. For instance, I've set 12 instead of 13 and it's much better.

this is really ridiculous; however size 12 reduces that padding 馃槂

I just played with my settings and I get the worse result when "terminal.integrated.fontSize": 18 and "window.zoomLevel": -1 I also would like to be able to set both margins (or pading probably)
Capture d鈥櫭ヽran, le 2020-04-05 脿 08 03 59
Capture d鈥櫭ヽran, le 2020-04-05 脿 08 04 50

Bot wasn't happy with the latest Insiders release being on a separate branch. Fixed and retriggered. With luck, this will be automatically commented upon when Insiders goes back to master (and thus this gets shipped).

馃

Should it be fixed now ?? it does not do what I was hoping for ...

Version: 1.44.0-insider
Commit: 15297a9a4ee8d611d37f48cb59c33b3cb6145c70
Date: 2020-04-06T21:40:56.222Z (12 hrs ago)
Electron: 7.1.11
Chrome: 78.0.3904.130
Node.js: 12.8.1
V8: 7.8.279.23-electron.0
OS: Darwin x64 18.7.0

Capture d鈥檈虂cran, le 2020-04-07 a虁 05 59 50

@Tyriar Please tell me what to do
Either it messes with my icons using "terminal.integrated.rendererType": "dom" or it messes with the padding/margins using "terminal.integrated.rendererType": "canvas"...

Capture d鈥檈虂cran, le 2020-04-07 a虁 06 06 06
Capture d鈥檈虂cran, le 2020-04-07 a虁 06 06 31

Version: 1.44.0-insider
Commit: 15297a9a4ee8d611d37f48cb59c33b3cb6145c70
Date: 2020-04-06T21:40:56.222Z
Electron: 7.1.11
Chrome: 78.0.3904.130
Node.js: 12.8.1
V8: 7.8.279.23-electron.0
OS: Darwin x64 18.7.0

@Luxcium it's fixed when an insider's build goes out based on master. We're about to release stable though so that will be a few days to a week before that happens. It should work in the first 1.45.0-insider version.

@Luxcium it's fixed when an insider's build goes out based on master. We're about to release stable though so that will be a few days to a week before that happens. It should work in the first 1.45.0-insider version.

I would like to be more fluent (professional) at doing stuff at your level and to be able to understand the workflow of your projects to be able to contribute... Many times I have ideas but don't know how to implement them so I am not wasting your time by opening Feature Request issues...

Very interesting to have access to such a nice workflow, even to a layman. I would like to be more up to the game I feel like playing soccer in my backyard, you are the ultimate football team players, the only difference is I can't have posters of my favorite players because it would be awkward to have a picture of you Daniel(@Tyriar) and Matt (@mjbvz) on the walls of my room... Probably I could have one of Anders Hejlsberg (@ahejlsberg)

(Sorry for this unrelated comment but it's my way of telling you to keep up with your great work, you guys, and obviously also all the other team members I didn't mention for both VS CODE and TypeScript)

hello @Tyriar it's annoying me again 馃槃I say annoying because I will probably still be sending a message that doesn't seem to be constructive... I understand that it is not helping you but I am just curious (also it's not a big deal for me in fact. But let's say its a 'deal' for me a small one but yeah ...)

I did cmd+a to select the area of the terminal and did a screen capture:

Capture d鈥檈虂cran, le 2020-04-10 a虁 07 20 30

Version: 1.45.0-insider
Commit: c12bd56a8886f31e353a45f5846f0a35a52f908e
Date: 2020-04-10T05:39:20.415Z
Electron: 7.1.11
Chrome: 78.0.3904.130
Node.js: 12.8.1
V8: 7.8.279.23-electron.0
OS: Darwin x64 18.7.0

@Luxcium can you share your settings? Works fine for me on Windows and Mac.

This bug has been fixed in to the latest release of VS Code Insiders!

@Mellbourn, you can help us out by confirming things are working as expected in the latest Insiders release. If things look good, please leave a comment with the text /verified to let us know. If not, please ensure you're on version c12bd56a8886f31e353a45f5846f0a35a52f908e of Insiders (today's or later - you can use Help: About in the command pallete to check), and leave a comment letting us know what isn't working as expected.

Happy Coding!

Removed all my settings and I have no problem anymore

{
    "editor.fontSize": 18,
    "window.zoomLevel": -1,
      "terminal.integrated.fontSize": 16,
      "terminal.integrated.fontFamily": "Monofur NF,TerminessTTF NF",
    "terminal.integrated.rendererType": "canvas"
} 

Capture d鈥檈虂cran, le 2020-04-21 a虁 02 05 14

sorry (I feel bad now): // "terminal.integrated.letterSpacing": 1, is the bad boy

{
// ...
        "terminal.integrated.fontSize": 16,
        "terminal.integrated.fontFamily": "Monofur NF,TerminessTTF NF",
        "terminal.integrated.rendererType": "canvas",
        "terminal.external.osxExec": "iterm2.app",
        "terminal.integrated.copyOnSelection": true,
        "terminal.integrated.cursorBlinking": true,
        "terminal.integrated.cursorStyle": "line",
        "terminal.integrated.enableBell": true,
        "terminal.integrated.experimentalUseTitleEvent": true,
        // "terminal.integrated.letterSpacing": 1,
        "terminal.integrated.lineHeight": 1,
        "terminal.integrated.scrollback": 10000,
        "terminal.integrated.shell.osx": "/usr/local/bin/zsh",
        "terminal.integrated.showExitAlert": true,
        "code-runner.runInTerminal": true,
        "terminal.integrated.shellArgs.osx": [
    "-l",
    "-i"
  ],
// ...
}

@Luxcium thanks can repro. Not sure why you'd be sorry about finding a bug that I can now fix for all users?

This bug has been fixed in to the latest release of VS Code Insiders!

@Mellbourn, you can help us out by confirming things are working as expected in the latest Insiders release. If things look good, please leave a comment with the text /verified to let us know. If not, please ensure you're on version 9328b32008089c515f39a13db9c71e57c7d36823 of Insiders (today's or later - you can use Help: About in the command pallette to check), and leave a comment letting us know what isn't working as expected.

Happy Coding!

/verified

Was this page helpful?
0 / 5 - 0 ratings

Related issues

shanalikhan picture shanalikhan  路  3Comments

v-pavanp picture v-pavanp  路  3Comments

philipgiuliani picture philipgiuliani  路  3Comments

trstringer picture trstringer  路  3Comments

omidgolparvar picture omidgolparvar  路  3Comments