Allow customisation of closing label prefix and font/size

[twoco]

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

[shujaatak]

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

[DanTup]

@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?

[twoco]

@DanTup Yes, thanks. It's much better.

The closing labels are very helpful. But it's also annoying when they look like comments. I don't like comments behind a line. And the pseudo comments are not selectable, which is right. But it triggers me. ^^ Especially when I'm refactoring code.

So it would be nice if the slashes // can be changed by the user.
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. So that users can define what they want. For example three slashes /// or a hash symbol # or hyphens -- or arrows > or xml like </ or just nothing (empty string).

It's just a suggestion. The color option is helpful as well. Personally, I wouldn't render syntax-reserved stuff because it can be as confusing as it currently is. Since it looks like real code. ... But to be honest, I have to try a few options first to find a suitable solution. I could simulate a few solutions with the dev mode inpsector and replace the after content in CSS to make a final decision.

If this is a trivial and painless solution then why not just put an option for this prefix.
Currently I tested some characters and just set the opacity (alphe #RRGGBBAA) to 0x32 (half of real comments.)

(Just a few first tries. Maybe not my final solution. Less prominent, but good to read without clashing with the rest of the code.)

What do you think? I would vote for it. But I submit to the crowd.

[shujaatak]

@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.

[DanTup]

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.

[infacto]

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. ...

[gazialankus]

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",