vscode-inline-html icon indicating copy to clipboard operation
vscode-inline-html copied to clipboard

No Emmet expansion for same line template literals

Open mblais opened this issue 7 years ago • 9 comments

I just installed the extension (thanks! :)

When I create an html inline string, the first tag I add does not get emmet-expanded - I see the emmet popup, but when I hit Enter, it disappears without substituting.

After I manually enter a valid closed tag, all works fine following it.

mblais avatar Nov 26 '18 21:11 mblais

@mblais I'll have to test this out once i am home. Glad you found it useful though :)

pushqrdx avatar Nov 29 '18 05:11 pushqrdx

@mblais I can't seem to reproduce this issue on latest VS, Could you please provide more details?

pushqrdx avatar Dec 19 '18 02:12 pushqrdx

Try it with your cursor at the end of a file.

I just reinstalled it - I'm getting the inline HTML syntax coloring in a .js file, but still no emmet.

My emmet is working in a .html file.

mblais avatar Dec 19 '18 21:12 mblais

@mblais Could you generate a file with the content that bugs? or record a quick gif. I really want to reproduce this to get it fixed.

pushqrdx avatar Dec 22 '18 18:12 pushqrdx

Literally anything - I just tried this with same result:

function demo_inline_html ()
{
    var a = /*html*/`div.clas  `     // no emmet for me
    var b = html`div.cla  `     // no emmet here either
}

If you want to insert some debug info in the extension I'd be happy to send you the output.

mblais avatar Dec 22 '18 19:12 mblais

@mblais I can reproduce it now, For some reason, It's because you have the tilde on the same line. A temporary solution is to just add a new line so instead of

var a = html`div...` // This won't work

do

var a = html`
// Type your code here and emmet will behave correctly.
`

Anyways I'll try to fix this asap.

pushqrdx avatar Dec 22 '18 21:12 pushqrdx

Unfortunately that doesn't work either.

mblais avatar Dec 22 '18 22:12 mblais

I think I understand the problem: in order for emmet to work here, a couple things need to be true:

  • The backticks must be properly paired- it doesn't work if there is only the opening backtick. When I type html-backtick, the editor does not automatically close the bacltick -which it usually does- and the emmet doesn't work until that closing backtick is manually added.
  • As you mentioned, the cursor cannot be on the line with the opening backtick.
  • Similarly, the cursor cannot be on the line with the closing backtick.

When I get all the conditions correct, it works :-)

But honestly, how is a newbie supposed to guess these restrictions?

mblais avatar Dec 23 '18 00:12 mblais

@mblais I labeled this as a bug because, indeed, it doesn't have to be like this and this behavior is completely unexpected for the user. Problem is, this has to do more with how VSCode doesn't "officially" support embedded languages. The limitation is a side effect rather than a bug but i'll definitely try to work around it.

pushqrdx avatar Dec 23 '18 00:12 pushqrdx