Allow customisation of closing label prefix and font/size

Please allow to change the character and / or other styles of the closing labels I see in VS Code.
Currently they look like comments. This triggers me.

For example change the // slashes to # hashtag or / single slash or - minus, etc.. (just an user input)
Or nothing. I don't think the syntax matters. No need for slashes.
Changing the color and / or opacity would be also great.

Setting: dart.closingLabels

Adding semantic token type for the closing labels would be highly appreciated as then it's color could be customizable by the user.

@shujaatak

@shujaatak it's not possible to add semantic tokens here, as this text is not part of the document and not included in semantic tokens requests.

However, there is an existing setting to control the color - see https://dartcode.org/docs/settings/#dartclosinglabels-1.

@twoco does this address your need?

@DanTup

@DanTup Thanks it helps but as @twoco said above they look confusing as one can expect them as part of the source code file just like real comments but if one open the same code in a simple text editor they don't show up.

So, I like the @twoco idea that there should be some other identifier for them. Personally I like the "-- Container" style shown in the above @twoco comment.

https://github.com/Dart-Code/Dart-Code/blob/v3.27.2/src/extension/decorations/closing_labels_decorations.ts#L60-L69
If this is the right code, we could replace this with a variable, a setting with a string input.

That would work today, though the closing labels will migrate to LSP soon (once microsoft/language-server-protocol#956 is merged) so they will be controlled by the language server instead. If we decide to make changes, we should ensure the changes made will work nicely there too so the feature doesn't disappear/regress).

Let's keep this issue open to collect 👍 s and see what the demand is like. I'm hopeful Inlay Hints will be merged soon, so if this is implemented it may make sense to do directly in the language server.

The close label indicator feature is great, but it's really annoying that it's hard to distinguish from real comments.

My current solution is adding this to settings.json:

{
  "workbench.colorCustomizations": {
    "dart.closingLabels": "#80808040"
  }
}

A less prominent appearance and different from comments. But you need a real comment as reference. Therefore it's maybe not the worst idea to use other characters to identify.

If we add an option to customize the text, I would suggest prefix and suffix. To allow something like -- Text an (Text) etc. Or just something like "dart.closingLabelsString": "/* $1 */" But only a suffix is also great. Maybe other style can also help. Like font-size? Idk. Just separate from real comments. Or improve Dart / Flutter design making closing labels annotations unnecessary. ...

Like font-size? Idk.

YES. See the inlay hints with the small font size? I would love it if I can get these closing labels to look the same. Then my eyes can group them similarly as not real code but suggestions. I really like this small font size for the inlay hints, so I'm pretty sure it will work perfectly for me if I can change the font.

For anyone wondering, here are the settings for the inlay hints:

    "[dart]": {
        "editor.inlayHints.enabled": "on",
        "editor.inlayHints.fontSize": 8,
        "editor.inlayHints.padding": false,
        "editor.inlayHints.fontFamily": "Arial",

I think it's a fair request to be able to customise these further and would accept PRs to do this. The styling is handled here:

Dart-Code/src/extension/lsp/closing_labels_decorations.ts

Lines 15 to 18 in 1ee5959

    
           after: { 
        
           	color: new vs.ThemeColor("dart.closingLabels"), 
        
           	margin: "2px", 
        
           },

And the prefix is handled here:

Dart-Code/src/extension/lsp/closing_labels_decorations.ts

Lines 78 to 86 in 1ee5959

    
           if (existingDecorationForLine) { 
        
           	existingDecorationForLine.renderOptions.after.contentText = " // " + r.label + " " + existingDecorationForLine.renderOptions.after.contentText; 
        
           } else { 
        
           	const dec = { 
        
           		range: new vs.Range(labelRange.start, endOfLine), 
        
           		renderOptions: { after: { contentText: " // " + r.label } }, 
        
           	}; 
        
           	decorations[endOfLine.line] = dec; 
        
           }

Allow Closing Label prefix and style to be customised (#5263)

Navigation Menu

Repository navigation

Allow customisation of closing label prefix and font/size #3628

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

	after: {
	color: new vs.ThemeColor("dart.closingLabels"),
	margin: "2px",
	},

	if (existingDecorationForLine) {
	existingDecorationForLine.renderOptions.after.contentText = " // " + r.label + " " + existingDecorationForLine.renderOptions.after.contentText;
	} else {
	const dec = {
	range: new vs.Range(labelRange.start, endOfLine),
	renderOptions: { after: { contentText: " // " + r.label } },
	};
	decorations[endOfLine.line] = dec;
	}

Allow customisation of closing label prefix and font/size #3628

Description

Activity

shujaatak commented on Oct 25, 2021

DanTup commented on Oct 25, 2021

shujaatak commented on Oct 26, 2021

DanTup commented on Oct 26, 2021

infacto commented on Apr 25, 2022

gazialankus commented on Dec 22, 2023

DanTup commented on Jan 3, 2024

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions