Add ability to change snippets icon

[BrunnerLivio]

I would like to colorize or optionally add a own icon for snippets.

Use Case:

I have snippets, which "converts" to hex codes. I don't want to write a whole extension, just to see the color of the outcoming hex code.

Example Image:

A solution to add styling could be :

"Material Active Icon Light": {
	"prefix": "md-active-icon-light",
	"body": [
		"rgba(255, 255, 255, 1)"
	],
        "display": {
                 "style" : {
                         "background-color": "green" 
                 }
        }
}

[GriNAME]

upd: I wanted to write +

[GriNAME]

I like how it looks in Atom

[jrieken]

You can achieve this when not using snippets but a CompletionItemProvider that returns completions of type color. Our css/less/sass tooling does exactly that.

[BrunnerLivio]

@jrieken Thanks for the response!

I know that it is possible using CompletionItemProvider. But do you consider adding this option also to a snippets configuration? So it would be easy for everyone to add color preview.

[aStonedPenguin]

@jrieken That's a bit much for most use cases don't you think? Custom colors/icons would be a great way to make use of the limited text space with snippets.

[jrieken]

So it would be easy for everyone to add color preview.

I'd learn more about this. It seems you think having a completion item provider isn't easy? Why is that? You shouldn't need much more than this

    vscode.languages.registerCompletionItemProvider('abc', new class implements vscode.CompletionItemProvider {
        provideCompletionItems(doc, pos) {

            return [
                this._createColorItem('$color-accent', 'rgb(0, 122, 204)'),
                this._createColorItem('$color-bg-dark', '#0000cc'),
                this._createColorItem('$color-bg-light', 'HSL(30%, 100%, 50%)'),
            ];
        }
        private _createColorItem(label: string, color: string) {
            let item = new vscode.CompletionItem(label);
            item.documentation = color;
            item.kind = vscode.CompletionItemKind.Color;
            return item;
        }
    }());

[vscodebot]

This issue is being closed to keep the number of issues in our inbox on a manageable level, we are closing issues that are not going to be addressed in the foreseeable future: We look at the number of votes the issue has received and the number of duplicate issues filed. More details here. If you disagree and feel that this issue is crucial: We are happy to listen and to reconsider.

If you wonder what we are up to, please see our roadmap and issue reporting guidelines.

Thanks for your understanding and happy coding!

[BoomRaccoon]

I was wondering why this has been layed off. I would love to have the option to add the default icons VSCode uses.
Having a visual help to differentiate between methods, objects and properties is great. And an additional JSON-key to add a background-color to snippets would make it clear which snippets are user defined.