Skip to content

Syntax highlight for script tag content in .vue files disappeared when adding a template tag with v-slot:namedSlot #1368

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
3 tasks done
luxwarp opened this issue Jul 25, 2019 · 4 comments

Comments

@luxwarp
Copy link

luxwarp commented Jul 25, 2019

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

Info

  • Platform: Linux Ubuntu 19.04
  • Vetur version: 0.21.1
  • VS Code version: 1.36.1

Problem

Syntax highlight for script tag content in .vue files disappeared when adding a template tag with v-slot:namedSlot

Reproducible Case

Create a single file component that has named slots. Import the component inside another component, reference it in template tags and insert template tags with v-slot:slotName attribute and the content of script tag looses its syntax highlight. See images.

Imgur
Imgur

@zcqno1
Copy link

zcqno1 commented Jul 26, 2019

@luxwarp I just met the same problem as yours. Thanks for reminding me to check the template tag.
I had a template tag in the template, but without v-slot direct. Like what you do, comment it, and things go well.
So I guess it may be caused by the format of the template tag. After trying some format adjustment, I found it.

before(bad situation):

<template
  >some code</template
>

after(good situation):

<template
  >some code</template>

Yeah, it's exactly the </template>‘s > in a new line cause the problem.
If someone makes one of his </template>'s > in a new line, including the .vue file’s outer template tag, congratulation, he reproduces the case.
That's the problem.

@luxwarp
Copy link
Author

luxwarp commented Jul 26, 2019

Very interesting! After som pokeing around in my codes i finally got it working by just change my code to this and make sure that eslint/prettier did not try to format the code, and it does not :).
So its both a "bug" for prettier in vue projects and maybe vetur also to not be able to handle prettiers wierd formatting :D

<NoListItemsFound v-else>
    <template v-slot:title>
      No to-do's found
    </template>
    <template v-slot:subtitle>
      Create one now!
    </template>
  </NoListItemsFound>

@zcqno1
Copy link

zcqno1 commented Jul 26, 2019

I just heard from one of my colleagues, prettier makes such formatting to get rid of the spaces on the two side of the content when vue complies the template. He thinks it's a 'bug' of vue. Funny 😃
So prittier may act reasonable here.

@octref
Copy link
Member

octref commented Aug 7, 2019

Duplicate of #1211. I'm afraid there's no easy fix in TextMate grammar and you would have to wait for the upcoming semantic syntax highlighting in VS Code.

@octref octref closed this as completed Aug 7, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants