Vetur: Syntax highlighting break for </template and > not in same line in template

[nibytes]

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

Info

• Platform: Win
• Vetur version: 0.18.1
• VS Code version: 1.33.1

Problem

Reproducible Case

I don't know, this behavior in one file.
I restarted VS, rename file, and reinstalled vetur. But highlighting not work in this file,

[nibytes]

Ok something in template broken highlighting

<template>
  <div class="l-content l-content_fill">
    <div class="ipr-add__status">
      <div class="ipr-add__status-item">
        <span class="ipr-add__status-cell">
          <i class="fa fa-heartbeat" aria-hidden="true"></i>
        </span>
        <span class="ipr-add__status-cell">
          <strong>Статус: </strong>в процессе
        </span>
      </div>
      <div class="ipr-add__status-item">
        <span class="ipr-add__status-cell">
          <i class="fa fa-spinner" aria-hidden="true"></i>
        </span>
        <span class="ipr-add__status-cell">
          <strong>Рассмотрение: </strong>
          <template v-if="task.ReviewDueDate">{{
            task.ReviewDueDate | moment("from", "now")
          }}</template>
          <template v-else
            >Не установлено
            </template>
        </span>
      </div>
      <div class="ipr-add__status-item">
        <span class="ipr-add__status-cell">
          <i class="fa fa-fire" aria-hidden="true"></i>
        </span>
        <span class="ipr-add__status-cell">
          <strong>Дедлайн: </strong>
          <template v-if="task.DueDate">{{
            task.DueDate | moment("from", "now")
          }}</template>
          <template v-else
            >Не установлено</template
          >
        </span>
      </div>
    </div>
  </div>
</template>

If reformat template all work fine, but this format I get from lint --fix

[dombavetta]

I'm experiencing the same issue, script and style sections for one file no longer have syntax highlighting.

[dombavetta]

I have created a reproducible repo for this case, which can be pulled down and ran from here https://github.com/dombavetta/vetur-template-interpolation-issues.

The problematic file -> https://github.com/dombavetta/vetur-template-interpolation-issues/blob/master/pages/test.vue

The issue appears to be caused by this line and the way it is formatted (24) ` v-show="
formDirtyFlags.reason &&
(userHasNonSchedualableProvider ||
someLongVariableNameThatIsGoingToGetNewLined)
"
class="error"

`

Removing that span resolves the highlighting issues.

[octref]

          <template v-else
            >Не установлено</template
          >

Man, why would you write your code like this...
Vetur looks for </template> to close your opening <template>. I'm not sure if there's an easy fix for the textmate grammar.

[dombavetta]

@octref I doubt he purposely wrote it like that. eslint/prettier will format it like that to prevent unnecessary whitespace from making it into the markup. Thats what it does for me at least.. I know its ugly but I guess theres some good reasoning behind it. For me its easier to just submit to the formatters that fight them or clutter my code with disable and ignore comments.

[octref]

This doesn't seem to be possible with TextMate:

• You can only use single-line regexes in TextMate, see https://github.com/Microsoft/vscode-textmate/issues/32
• The opening <template> couldn't find a closing </template> if > is not on the same line as </template

[fabsenet]

this formatting is a result of whitespace-sensitive-formatting in prettier 1.15 and later

also, it only breaks the syntax highlighting if it is a template tag.

breaks highlighting:

<template v-else
    >abc</template
>

works fine (replaced template with div tag only):

<div v-else
    >abc</div
>

[Tsuyoshi84]

I just faced the same problem. The following code breaks highlightings of VS Code.

<template v-if="value"
  >Some message</template
>
<template v-else
  >Another message</template
>

But thanks to @fabsenet, I figured out some workarounds of this problem.

1. Use display: block comment

As Prettier mentions, we can use display: block comment to prevent <template> from being broken.

<!-- display: block -->
<template v-if="value">
  Some message
</template>
<!-- display: block -->
<template v-else>
  Another message
</template>

2. Use ignore option

Another option is to set htmlWhitespaceSensitivity to ignore in prettier config.

  "htmlWhitespaceSensitivity": "ignore"

However, this change would affect the entire code formating, so we should keep in mind that.

[ssorallen]

Since Prettier enabled whitespace-sensitive-formatting by default, more and more of my Vue SFCs have become blobs of all-white JavaScript because of this bug. I don't yet have a solution, but here are my notes:

• The <template> tag both applies a new grammar and is a valid tag within that grammar. The grammars currently do not differentiate between a closing </template> within the grammar block and a closing </template> that ends the grammar block. <template> tags recursively apply the Vue HTML grammar because of https://github.com/vuejs/vetur/blob/f12543fb94cdaf5a5aad1215781165520f3e4c58/syntaxes/vue-html.tmLanguage.json#L198

  Potential solution:
  Match the closing </template> at the beginning of a line to mark the close of the "text.html.vue-html" grammar block.

  For example:

  This would enable removing the recursive grammar application in the above vue-html.tmLanguage.json file.

  What I tried:
  I updated L268 to be the following (added the caret):

  "end": "^(

  this effectively matched only the outermost </template> to close the grammar block, but then </template> tags within the grammar did not match regular HTML closing tags.

This would introduce a new restriction on how SFCs must be formatted, but it would enable differentiating the two types of closing </template> tags.