all kinds of comments are not highlighted

[appleshowc]

Issue Type: Bug

After updating vscode-insider to v1.67.0, all kinds of comments (in script tag of .vue file) are not highlighted, but everything works fine before the upgrade.

Extension version: 3.0.0 VS Code version: Code - Insiders 1.67.0-insider (345f572e37ca69dc143c9fecb5f851fba9fcce8c, 2022-04-05T10:43:52.479Z) OS version: Windows_NT x64 10.0.19044 Restricted Mode: No

A/B Experiments

vsliv695:30137379
vsins829:30139715
vsliv368:30146709
vsreu685:30147344
python383cf:30185419
vspor879:30202332
vspor708:30202333
vspor363:30204092
vswsl492:30256197
pythonvspyl392:30422396
pythontb:30258533
pythonptprofiler:30281269
vshan820:30294714
pythondataviewer:30285072
vscod805cf:30301675
pythonvspyt200:30323110
bridge0708:30335490
bridge0723:30353136
vsaa593cf:30376535
pythonvs932:30404738
wslgetstarted:30449409
pythonvspyt640:30438691
vscscmwlcmt:30465136
pynewfile477:30451556

[aaron-bond]

My best guess here is that the recommended extension for Vue changed in the latest insiders. When I opened a file in the current release, I got prompted to install Vetur extension, which works fine. When I did the same in the insiders release I got prompted to install Vue Language Features extension. This one is missing the line comments in the language configuration here: https://github.com/johnsoncodehk/volar/blob/master/extensions/vscode-vue-language-features/languages/vue-language-configuration.json

I'll raise this with them, but in the meantime I'd recommend using the Vetur extension instead.

[appleshowc]

@aaron-bond Thanks for the reply. I'm using Vue3. And at first, Vetur extension is for Vue2, and Vue Language Features extension is for Vue3. Now, I disabled Vue Language Features, and enabled Vetur. Everything is fine!!! Thanks again~

[appleshowc]

Considering that Vetur extension has some error in Vue3 (such as Module ‘“xx.vue“‘ has no default export.Vetur(1192)). I switched back to Vue Language Features (Volar).

I modified my local vue-language-configuration.json file and submitted pr to Volar extension (Feat: support single line comment #1179), hope they will accept it.

[aaron-bond]

Thanks for that. If they bring in the pr that should resolve the issue for everyone.

[Charlie-Brownie85]

What happened with this? I'm also using Vue 3 + Volar as the recommended language extension and since then I've also lost all my beautiful comments highlighting in my codebase 😢

Is there an official fix or workaround?

[aaron-bond]

That extension is missing some important data on how comments are formed in Vue. There's a PR above to fix from @appleshowc - just waiting to see if that team accept it.

[aaron-bond]

Actually, scratch that - the team there has sent me a PR for a fix on my side. I'll get to this sometime this week.

[Charlie-Brownie85]

Awesome!! I'll be looking forward to this, I love this extension 🤩 Thanks!

[default-kaas]

@aaron-bond I tried using it with Vue 3 + Volar.

In the Vue 3, the comment highlights do not seem te work. As seen here:

Mean while in my typscript files it does work.

The version that I am using is v3.0.0

[gVguy]

Yup. Doesn't work in vue files

[Tenrys]

Any news on this? It's been just about 2 months.

[Cccatmint]

I'll be looking forward to this.

[sergiuwaxmann]

@aaron-bond Any updates on this?

[braebo]

I noticed this doesn't work with .svelte files either. I thought it was just the lang attribute <script lang='ts'>, but plain <script> tags seem to also be broken.

Should I open a seperate issue for that?

[robertjbass]

On my last machine I had Volar and Vetur installed just to get this to work, but that caused a whole other handful of problems.

Any clarification on if we can expect this to work sometime soon?

[jamesandersonwalsh]

Any update here at all? @aaron-bond have any thoughts?

[hrenx]

There is another extension "Colorful Comments" can work under vue3+volar environment, can find any solution idea from this extension ?

[Take-Me1010]

There is another extension "Colorful Comments" can work under vue3+volar environment, can find any solution idea from this extension ?

I think what "Colorful Comments" does in the src codes is the same as what the old version of this extension does. (see #385, this PR is the base of the newest version.)

And the code section to modify is shown in #392, which is the PR the extension "Volar" maintainer said in a certain PR. Anyway, by modifying your local configuration file in "Volar" extension, you can see the decorated comment in vue files tentatively, see this PR especially https://github.com/johnsoncodehk/volar/pull/1179#issuecomment-1166415929

[Yves852]

You can use the 2.1.0 version as a workaround for vue3 / nuxt3 projects. I don't know if it was already said sorry for redundancy.

[Flashantik]

@Yves852 but we will lose colors in template 🥲

[Yves852]

@Flashantik I use this trick to display colored comments in template. Makes comment tag redundant but works...

[Joshwawo]

In case anyone has the same issue with Vue.js, I am using Vue 3 + Volar, but this is the only way the extension works.

[johnsoncodehk]

I'm confused as to why Volar cannot just add "lineComment": "//" to their vue-language-configuration.json file.

Because this is wrong, // is not really valid SFC comment syntax, you changes causes two problems.

1. When executing cmd + / for <template>{{ foo }}</template>, the code becomes // <template>{{ foo }}</template> instead of <!- - <template>{{ foo }}</template> -->.
2. // <template>{{ foo }}</template> appears as a comment in the IDE, but it is actually still a valid template.

Please ask the right place to fix this instead of asking a wrong place for an easier "fix", I believe I've pointed out the code that needs to be changed: https://github.com/aaron-bond/better-comments/pull/392/files

[webdevnerdstuff]

@johnsoncodehk As per the Vue docs, // is valid SFC comment syntax. That also doesn't explain why Vetur did not have a problem with Better Comments when Volar is supposed to be the new and better Vue extension to replace Vetur.

Inside each block you shall use the comment syntax of the language being used (HTML, CSS, JavaScript, Pug, etc.).

This means that // is the correct syntax, as it's being used within the script tags. Using // in the HTML you would be correct, but that's not the case.

As for the problems you say it causes, you are using a very rare use case as the example. If the top level <template>{{ foo }}</template> is commented via cmd + / you are correct, it uses // as the comment. To not implement adding lineComment for a rare use case doesn't make sense to me. Especially since // is correct SFC Vue syntax. If someone is even doing such a comment, it doesn't even make sense as it's just as easy to delete it, which is not the case when developing child elements within the top template tag itself.

Now if there is a template tag as a child of the top level template, pushing cmd + / uses the correct html comment, as well as any other html elements. So within the top level template this works exactly as expected. This is also a very common use case, as opposed to someone commenting out a top level template tag.

<template>
  <!-- <template #slotName>{{ foo }}</template> -->
</template?

Is this a perfect solution? No, but of all the things you want to be "perfect" on, this seems like nothing in the bucket compared to other major bugs of higher importance. This is simple solution that benefits millions of users who use the Better Comments extension, which even has more installs in the VSCode store than Volar does (for now at least). Instead the best "suggested solution" is very hacky and requires users to change the extension language file directly, which I don't think I need to explain why that's not a good solution.

Now if @aaron-bond thinks adding a bunch more code to his extension is the better way to go, then sure, go with it, any solution that works is fine, but it requires action, and this issue has been open since April of 2022.

As a side note, I deleted my last comment due to reading more about it all and was going to just let it go and do the hacky solution. Which means I didn't really want to discuss it further. But since you decided to quote my deleted comment instead of leaving a comment on the pull request I submitted, I felt obligated to debate this and explain why I think it's unreasonable to implement an easy solution over one single rare use case, especially when Vetur did not have this issue. I put off using Volar for a long time because of how many issues I have had with it, but "just use Vetur" isn't really a good argument point.

[johnsoncodehk]

I didn't see it deleted when I responded (when you opened the PR).

Sorry I completely disagree with all of your opinions, but I'm not interested in refuting you one by one, and I won't add an error because of your bias. Note that the "more code" you're referring to is even from me, and I think you might consider taking the time to test it instead of going into a long thread here.

[webdevnerdstuff]

We will have to agree to disagree then, because I do not agree with your comments, and I don't have a choice to overrule you anyway. I was already planning to dig deeper into the "more code", which is why I deleted my original comment. If I can help with a solution, we can both agree it's more useful than seeing who can pee into the wind better.

[webdevnerdstuff]

@johnsoncodehk I played around with the code you suggested. From what I can tell it's working. I put in a pull request to @aaron-bond. I had to add a few more minor bits (ex. fs package). Hopefully this is good to go.

https://github.com/aaron-bond/better-comments/pull/488

[edwinhuish]

I'm was fork and working for fix this issues, bue finally, I found in the vscode marketplace already has other one fixed it.

here is the link: Better Comments (with ELPS support)

[edwinhuish]

After read the Better Comments (with ELPS support) code, it don't read the extensions package file.

I wrote another one: marketspace: Better Comments (with embedded languages support) github: better-comments-next

It work fine for me. Hope it can help you.

[suwermave]

@edwinhuish Please consider also uploading this extension to OpenVSX so users of VSCodium and other independent Visual Studio Code forks could use it ❤️🙏🙏🙏