Customize Codelens Font

[GitClickOk]

• VSCode Version:
  1.7.2
• OS Version:
  Windows 10

Steps to Reproduce:

The actual implementation of Codelens on VSCode is annoying. I did a research, and I can disable Codelens with "editor.codeLens": false.

But I think will be good if, instead of full disable, I can customize the font size. If the codelens have at least on half of the current size, maybe it can be usable... With the current size, it looks with an actual line of code. So, maybe you can do some options like:
"editor.codeLens.fontFamily": "Consolas, 'Courier New', monospace",
"editor.codeLens.fontWeight": "normal",
"editor.codeLens.fontSize": 7,

[nodrogyad]

This would be a great addition as codelens currently is almost unusable with a "editor.fontSize" < 14

[sillyotter]

In addition to setting the size, weight, etc, I also noticed while trying to track this down this morning that the vertical-alignment for the thing is set to sub, which clips the bottom of the line off if your not careful. Even if we can change the fonts, this might need to be set to baseline to prevent clipping.

[Xenya0815]

What's status? It would be really good to be able to change the font size.

[feafarot]

This feature would be really handy. Usually, you want to decrease the size of "codelens" text since this information is minor and should not take that much space.

[liri2006]

Any info on this one?

[jrieken]

How about a PR? Anyone? I am happy to advice.

[boyedarat]

I would like CondeLens to pick up the fontFamily and fontLigatures from the editor:
this._domNode.style.fontFamily=fontInfo.fontFamily this._domNode.style.fontLigatures=fontInfo.fontLigatures

Would it be possible to do the above at least for now?

[TomasHubelbauer]

@jrieken I'd like to try implementing the support for setting the CodeLens font size. Would you be able to advise on where to start and where to look trying to implement this?

[jrieken]

Sure, codeLensWidget.ts is your starting point. Our code lens is slight weird as there are two pieces involved: (1) a view zone which makes space between lines and (2) a content widget which we position onto that space. So, the former defines the height (today as being that of one line, you can also have hightInPx tho) and the latter is the actual rendering and the place where different fonts styles go. Just checkout that code, esp this. Then add a new editor configuration which is a bit boilerplate: check out editorOptions.ts and follow all occurrences of an existing option, e.g showFoldingControls:boolean or codeLens:boolean.

[boyedarat]

@TomasHubelbauer Any luck with a fix for this?

[TomasHubelbauer]

@boyedarat I haven't picked it up yet, will at some point when I have time I want to dedicate to OSS. Feel free to pick this up in parallel if you want to, I cannot commit to a specific deadline if you're waiting on this.

[TomasHubelbauer]

I have started a PR in #53990. @boyedarat I am aiming to provide a compound FontInfo setting so it will allow you to just set it to the same value as the one for editor. I don't agree CodeLens should inherit font family from the editor font, so I won't implement that.

[TomasHubelbauer]

@jrieken Can you please spare a moment on a quick review? Nothing detailed as this is just a WIP PR, but I'd like to know I am heading in the right direction as I continue by figuring out how to reuse the FontInfo class for my own CodeLens font setting property.

[boyedarat]

@jrieken any plans to merge this?

[mikeerickson]

I too would love to see this. This appearance (assuming what you are speaking of) is quite intrusive for my liking. Is this information already stylable?

[Feofilakt]

Correct me if I'm wrong, the MR with half-done work has been merged into repository?

[TomasHubelbauer]

It has not been merged, I have closed it as a part of spring cleaning after it has gotten no feedback for a year. I am open to continue working on it, but researching the VS Code internals on my own takes too much of my personal time I am willing to dedicate to OSS so I am hoping for some feedback still to help speed me up and head me in the right direction as to what APIs to use and how to get the PR merged.

[Feofilakt]

Oh, I see. Thank you for attempt. It is sorry that misrosoft's team not consider this feature as priority.

[TomasHubelbauer]

I might pick it up again when I'm willing to invest more time into VS Code specifically. I sympathize with the VS Code members being busy and unable to guide each and every person attempting to contribute. Maybe one day the VS Code team will have a dedicated community person whose job will be supporting would-be contributors rather than coding themselves. That'd be cool 🙂

[Feofilakt]

They could be done this themselves. Obviosly they don't consider this feature much priority for some reason.

[dannymcgee]

I'm taking a look at this now — can't make any promises, but I've just discovered CodeLens for TypeScript and I love it but desperately want to make it smaller, so motivation is high. 😉 The code looks pretty straightforward, but I'll reach out if I run into any roadblocks.

[mikeerickson]

@dannymcgee while in there, i would love to set the background color as well to at least make it easier to reason about, difficult to use as-is on a 13” screen using Material Theme

[dannymcgee]

@dannymcgee while in there, i would love to set the background color as well to at least make it easier to reason about, difficult to use as-is on a 13” screen using Material Theme

That might be a little trickier (and maybe tougher to get approved) since it'll require messing with the theme API, but I'll start with the font/font size/line height and see where I can go from there.

[jrieken]

Next insiders will have these settings: editor.codeLensFontSize and editor.codeLensFontFamily

[jrieken]

To verify

• make sure that there are two code lens font settings (size, face) that allow to customise the code lense appearance
• try font features like ligatures