We should have HTML attribute snippet completion of the =""

[stijns96]

Describe the bug
When I type clas, the editor will suggest me to auto complete class. Normally it's smart enough to add =""`` as well where your cursor will be placed within "". This is not the case. It only autocompletes the word, but without =""`.

Source

<div class></div>

Expected behaviour
When I hit tab when a suggestion pops up, I expect that it will be completed with ="" at the end with my cursor inside "".

Actual behaviour
When I hit tab when a suggestion pops up, it only autocompletes the word.

Debugging information

• OS Mac
• OS 14.2.1 (23C71)
• Theme Check Version v2.3.0 (extension)

Additional context
I created my own extension ones which is working correctly. At that time, HTML autocompletion was not working yet with the Shopify extension. Since it is kind of working now, I got the suggestions twice.

Might be worth to checkout vscode-html-languageservice as well.

Handy links

• Microsoft vscode-htmll-languageservice

Good to know
vscode-html-languageservice is checking for tags that doesn't have the valueSet set to 'v'. If it has 'v', the attribute doesn't support any value.

[stijns96]

My apologies. I now also see this issue. I'll leave this one open, so you can read a little bit of my additional context as well.

[charlespwd]

It's all good I prefer the context in this one :) I'd love to get around doing that one.

We support snippet completion in the codemirror-language-client now (had to do it for JSON completion in the Shopify admin), so there's nothing stopping us from adding snippet completions in our HtmlAttributeCompletionProvider

Things to look at for is making sure we do re-add them if the equal sign is already there.

From the spec, what we need to add is this:

• When the editor supports it, a snippet insertTextFormat in the completionItem
• an insertText that includes the =, " and $1. Something like${name}="$1"$0.
• a textEdit that replaces the entire attribute
• An if statement that turns all that stuff off if the stars are not aligned (e.g. there might already by an =, etc.)

Resources

• Snippet syntax

[charlespwd]

(Updated above comment with more breadcrumbs in case it isn't me that implements it :))

[stijns96]

Hi @charlespwd,

I try to contribute here and figured out what to do. The only thing is that debugging is quite hard... I added the following (WIP), but this should do the easy trick.

HtmlAttributeCompletionProvider

function toCompletionItem(tag: Attribute): CompletionItem {
  return {
    label: tag.name,
    kind: CompletionItemKind.Value,
    insertText: tag.valueSet !== 'v' ? `${tag.name}="$1"` : tag.name,
    documentation: {
      kind: 'markdown',
      value: renderHtmlEntry(tag),
    },
  };
}

I did a format -> build -> test and have it running with pressing F5. I create a simple liquid file and type <button t></button>. In my debugger I get my consoles, but somehow the server is erroring.

Any idea why? When I remove my edits, it works fine.