plugin: add support for CompletionItemLabel

[vince-fugnitto]

What it does

The commit adds support for CompletionItemLabel for CompletionItem. The change also adjusts the styling of monaco suggestions to more closely resemble vscode (using monospaced fonts) and fixing an issue when rendering the detail due to a superflous line-height.

How to test

1. include the following test extension completions-sample-0.0.2.zip
2. open a .txt file
3. execute the command Trigger Suggest
4. the quick-suggestion should appear (the detail and description)
5. the styling of the suggestion should be correct (monospaced font, alignment)

Review checklist

• As an author, I have thoroughly tested my changes and carefully followed the review guidelines

Reminder for reviewers

• As a reviewer, I agree to behave in accordance with the review guidelines

Signed-off-by: vince-fugnitto [email protected]

[colin-grant-work]

The provided extension works as described and show styling identical to VSCode, and I see no regressions from the changes to CSS.

[msujew]

I'm a bit confused by the missing margin between console and detail, but its the exact same behavior as in VSCode, so I guess it works as intended. LGTM!

[vince-fugnitto]

I'm a bit confused by the missing margin between console and detail, but its the exact same behavior as in VSCode, so I guess it works as intended. LGTM!

Right! It’s the same in VS Code (not a huge fan of it) and is actually documented as such in the API:

        /**
          * An optional string which is rendered less prominently directly after {@link CompletionItemLabel.label label},
          * without any spacing. Should be used for function signatures or type annotations.
          */
         detail?: string;