not work properly in vue single file components

[mrGrochowski]

as topic say

[idleberg]

I'm not familiar with Vue, so you need to write a better description of the problem

[Damato]

Same issue with Vue.Js.

The *.vue files have a combination of HTML, JS, and CSS each in their own sections.

The file structure follows this pattern:

<template>
... html
</template>
<script>
... js
</script>
<style>
... css
</style>

Issue with Emoji Code snippets:

<template>
   <!-- Wrong format for HTML, should be &#x1F415; -->
   <span class="test"> \u{1F415} </span> 
</template>
<script>
   // Correct in JS:
   let test = '\u{1F415}' 
</script>
<style>
   .test::before {
      /* Correct in CSS: */
      content: '\1F415'; 
   }
</style>

[idleberg]

Can you please place the cursor inside an empty pair of <template> tags and run the Developer: Inspect Editor Tokens and Scope command? I'm after the Textmate scope.

[shynuu]

Hi,

Same issue here.

Here is the result of the inspect into the template, script and style.

Template language	vue-html
standard token type	Other
foreground	#ABB2BF
background	#282C34
contrast ratio	6.57
textmate scopes	text.html.vue-htmlsource.vue
foreground	No theme selector

Script language	javascript
standard token type	Other
foreground	#ABB2BF
background	#282C34
contrast ratio	6.57
textmate scopes	source.jssource.vue
foreground	No theme selector

Style

language	css
standard token type	Other
foreground	#ABB2BF
background	#282C34
contrast ratio	6.57
textmate scopes	source.csssource.vue
foreground	No theme selector

Hope it helps to correct the bug.

Thanks and very useful extension btw 👍

[idleberg]

Thanks @Srajdax, that's exactly what I was looking for. Does the new version fix this for you?

[shynuu]

Yes,

It fixes the bug 😃

Thanks @idleberg