Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Syntax highlighting breaks with self-closed template/script/style tag

See original GitHub issue

I have searched through existing issues
I have read through docs
I have read FAQ

Info

Platform: Win
Vetur version: 0.11.5
VS Code version: 1.19.0

Problem

The syntax highlighting breaks if a <template|script|style> tag is self-closed or empty and closed on the same line. The use case is using the src attribute.

The highlighting breaks after the first self-closed tag.

This seems to have started happening since update to vetur 0.11.5 and VS Code 1.19.0 from previous versions.

Reproducible Case

Breaks (self-closing):

<style src="myfile.styl" />

<template>
  <div class="base-image">
    <transition name="zoom">
      <img
        :key="src"
        class="img"
        :src="src"
      />
    </transition>
  </div>
</template>

<script>
export default {
  props: {
    src: {
      type: String,
      required: true,
    },
  },
}
</script>

<style lang="stylus" scoped>
@import "../styles/imports"

.base-image
  flex-box()
  box-center()
  background $md-grey-100
  border-radius 3px
</style>

The code before the self-closing tag is fine:

Breaks (empty):

<style src="myfile.styl"></style>

<template>
  <div class="base-image">
    <transition name="zoom">
      <img
        :key="src"
        class="img"
        :src="src"
      />
    </transition>
  </div>
</template>

<script>
export default {
  props: {
    src: {
      type: String,
      required: true,
    },
  },
}
</script>

<style lang="stylus" scoped>
@import "../styles/imports"

.base-image
  flex-box()
  box-center()
  background $md-grey-100
  border-radius 3px
</style>

Works (closing tag on next line):

<style src="myfile.styl">
</style>

<template>
  <div class="base-image">
    <transition name="zoom">
      <img
        :key="src"
        class="img"
        :src="src"
      />
    </transition>
  </div>
</template>

<script>
export default {
  props: {
    src: {
      type: String,
      required: true,
    },
  },
}
</script>

<style lang="stylus" scoped>
@import "../styles/imports"

.base-image
  flex-box()
  box-center()
  background $md-grey-100
  border-radius 3px
</style>

Breaks (example with template and script tags):

<template src="./myfile.html" />

<script src="./myScript.js" />

<style lang="stylus" scoped>
@import "../styles/imports"

.base-image
  flex-box()
  box-center()
  background $md-grey-100
  border-radius 3px
</style>

Works (example with template and script tags):


<template src="./myfile.html">
</template>

<script src="./myScript.js">
</script>

<style lang="stylus" scoped>
@import "../styles/imports"

.base-image
  flex-box()
  box-center()
  background $md-grey-100
  border-radius 3px
</style>

Issue Analytics

State:
Created 6 years ago
Reactions:8
Comments:8 (5 by maintainers)

Top GitHub Comments

3reactions

octrefcommented, Dec 18, 2017

@Akryum I’ll release this later today.

@ValentineStone If it’s on the same line, it has to be a self-closing tag. I won’t support your case. If you have styles, write it in multi-lines.

2reactions

Akryumcommented, Dec 27, 2017

@octref Did this make it into an update of the extension yet?

Top Results From Across the Web

Vetur + ESLint + Prettier makes img pair tag and breaks syntax ...

I think this "self-closed" <img> tag then breaks the formatting from that ... </template> tag the syntax highlighting breaks altogether.

JSX fragment closing tag with a space breaks syntax ...

JSX multielement tag's ( <> ) closing counterpart ( </> ) is wrongly identified as a syntax error if there is a space...

Available rules - eslint-plugin-vue

Rule ID Description vue/multi‑word‑component‑names require component names to be always multi‑word... vue/no‑arrow‑functions‑in‑watch disallow using arrow functions to define watcher... vue/no‑computed‑properties‑in‑data disallow accessing computed properties in data...

Gedit: syntax highlighting of echoing self-closing XHTML tags ...

Within the <script> tags, echo some XHTML with self-closing tags; Note that all of the code that follows is no longer syntax highlighted....

https://dspace.cuni.cz/bitstream/handle/20.500.119...

Z,{label:o,component:"a",clickable:!0,color:"secondary",onClick:function ... :1,direction:"next",reason:"keyboard",event:o}),Dn(o);break;case"ArrowUp":o.