Vetur: Element attribute break highlighting when using "`" on single line reference values.

[stgogm]

• [x] I have searched through existing issues
• [x] I have read through docs
• [x] I have read FAQ

Info

• Platform: Linux
• Vetur version: 0.15.1
• VS Code version: 1.31.1

Problem

Element attribute break highlighting when using ` on single line reference values.

If I add, let's say, a parenthesis, it works as expected:

We use ` instead of ' or " because it's easier to switch between single and multi-line values and the Pug compiler converts them to " anyways.

Reproducible Case

Create a Vue component and add the following:

<template lang="pug">
section
  router-link.header.item(to=`/`)
    img(
      src=`/images/navbar-icon.svg`
      :alt=`title`
      )

  .right.menu
    navbar-menu
</template>

and everything down from the .right.menu element should be wrongly colored.

[octref]

Yeah we are just starting working on the pug grammars, TextMate grammar is tricky so it takes some time to get it right...

@Patcher56 Wanna take a look?

[p-kuen]

I now know what the problem is. The problem is the template literal tag syntax. Javascript thinks the ` is the start of a tag function for strings, so it starts syntax highlighting it like this.

A simple workaround: just put a space at the end of the string, so js knows there is no string tag:
e.g.

<template lang="pug">
section
  router-link.header.item(to=`/`)
    img(
      src=`/images/navbar-icon.svg`
      :alt=`title `
      )

  .right.menu
    navbar-menu
</template>

If we want to prevent js from syntax highlighting as a string literal tag, the highlighter would be a bit more trickier, I think. What do you think @octref?

Nevertheless I simplified the vue-directive syntax highlighting a bit. Included in my last PR (#1093).

[octref]

Sorry just wondering, why you don't write this?

<template lang="pug">
section
  router-link.header.item(to="/")
    img(
      src="/images/navbar-icon.svg"
      :alt="title"
      )

  .right.menu
    navbar-menu
</template>

Why do you have to use backtick?

[p-kuen]

We use ` instead of ' or " because it's easier to switch between single and multi-line values and the Pug compiler converts them to " anyways.

I would also prefer to just use ' or "

[octref]

If we want to prevent js from syntax highlighting as a string literal tag, the highlighter would be a bit more trickier, I think. What do you think @octref?

Yeah you can give it a try, I suggest using negative lookahead on the begin clause.

But I don't think in general we should support users writing `, since there is no observed benefit and they can just use " and ' instead.

[octref]

We use ` instead of ' or " because it's easier to switch between single and multi-line values and the Pug compiler converts them to " anyways.

Thanks, just see that.

I have run into https://github.com/Microsoft/vscode/issues/20488 quite often. The inner grammar can leak very easily and make the rest of the document corrupt.

@Patcher56 You might also want to give grammar injection a try, see https://github.com/mjbvz/vscode-comment-tagged-templates for an example, and https://code.visualstudio.com/api/language-extensions/syntax-highlight-guide#injection-grammars as a guide.

[p-kuen]

Thanks, I will take a look.

[p-kuen]

We decided to drop support for the backtick literal as it makes the whole plugin a lot more complex.
Please use only the ' or " symbol in the future. If you have so much code to make it multi-line, just put it into the methods section and call the method from the template.

Also discussed in PR #1093

[stgogm]

Sounds fair! Thank you!