Please add support for .svelte files

[imCorfitz]

yeah.. basically that would be great..

[Volmancer]

case "svelte":        
        this.setCommentFormat("//", "/*", "*/");
        break;

added to the setDelimiter function in parser.js seems to have at least enabled JS typed comments, no luck with HTML tags yet

[Samhamsam]

@Volmancer Does not work for me.

[cycle4passion]

+1

[hmmhmmhm]

+1.....

[Volmancer]

HTML still tags work after some fiddling, allowing you to escape the the entering tag and then use TODO: etc, but still does not properly work and just makes comments ugly - it does not color the HTML style tags themselves, but betterComments tags within will work:

 <!-- 
    // TODO: Better Comments broken comment line in svelte that kinda works
-->

In my parser.js I've added:

case "svelte":
     this.setCommentFormat("<!--", "<!--", "-->");
     this.highlightJSDoc = true;

I have enabled multiline and plaintext in the config as well.

I did not break from the Svelte case in my parser for this example... Doing so seems to make none of the above work, which hints that none of what I've done has 'actually' worked :(

Removing any logic from the svelte case and just having multiline/plaintext highlighting seems to work also?

[bjbk]

Doesn't look like the extension itself has been updated for some time. @Volmancer any advice on hacking my local install?

[Volmancer]

@bjbk Sure. As mentioned its broken but... functioning?

open parser.js:

 code %userprofile%/.vscode\extensions\aaron-bond.better-comments-2.0.5\out\parser.js

drill to

 setDelimiter()

and add in

case "svelte":
     this.setCommentFormat("<!--", "<!--", "-->");
     this.highlightJSDoc = true;

and you should be set.

I haven't messed with svelte in a while so this issue is no longer quite relevant for me; but I use the extension itself daily. Hopefully someone can help us out soon with more language support! That said, I do believe you can remove logic from the svelte case and just have multiline/plaintext highlighting enabled via config and it will work too.

[iltimasd]

Tried the above methods and only got highlighting to work in HTMLx portions of the files, but not the script or style portions?

Could maybe interferring with the Svelte for VS Code extension?

[aaron-bond]

I have plans to add multiple delimiter types shortly which will allow for this to work. See https://github.com/aaron-bond/better-comments/issues/154 and https://github.com/aaron-bond/better-comments/issues/33

[yestoall]

yes please.... svelte needs better comments :)

[ovalnine]

case "svelte":        
        this.setCommentFormat("//", "/*", "*/");
        break;

added to the setDelimiter function in parser.js seems to have at least enabled JS typed comments, no luck with HTML tags yet

This worked for me, but yeah it would be nice if it came already with the extension.

[sooxt98]

Any update on this lol, its been a year

[SarcevicAntonio]

this would be awesome if build in :)

[hatemjaber]

Make sure you close vscode and open it again, the example with the slashes works fine.

[armchair-traveller]

This was bothering me quite a bit. As with all things that bother me, I let it sit for several months without dealing with it. But unlike the other things that bother me, I was able to get this extension to support Svelte.

Instructions (full file also uploaded as a gist):

All of this is under parser.js which is in %USERPROFILE%\.vscode\extensions\aaron-bond.better-comments-2.1.0\out (USERPROFILE is for Windows, for other platforms I think it's under your user folder)

1. Remove pipe operator escaping from escapeRegExp()

escapeRegExp(input) {
  return input.replace(/[.*+?^${}()[\]\\]/g, '\\$&'); // $& means the whole matched string
}

2. Add a case under setDelimiter() in parser.js as described in previous comments.

case 'svelte':
  this.setCommentFormat('//|<!--||/* ', '/*|<!--', '*/|-->') // RegEx in order: script|markup|style
  this.highlightJSDoc = true
  break

3. Done.

---

Explanation: Examining the source code, you'll see escapeRegExp is just taking the delimiter strings and escaping regex operators (disabling them). No languages use the pipe operator for comments, at least from the delimiting cases in this file, so there's no point to escaping it.

In the off chance that one does use | you can modify escapeRegExp (which is a common utility) to fit your case. Or add another utility specifically for that case... or imperatively set this.delimiter/this.highlightSingleLineComments, this.blockCommentStart/End, and this.highlightMultilineComments = this.contributions.multilineComments.

I don't believe there're any unintended side effects to this regexp modification based on the code I examined.

Because the pipe operator allows you to add in multiple string matches, I'm pretty sure this solution works for Vue as well.

Better comments is one of the only extensions I use for supportive code highlighting. I never bothered with bracket colorizer as I'm performance-minded when it comes to extensions, since it could impact my battery life. I only chose to enable it when it was natively added into VSCode as bracket pair colorization, touting performance benefits over the extension.

I wouldn't consider this change true multi-language support, because it's still using the same regex matches for every line instead of separate matches just in the script+module blocks or just in the style block. That would likely be more performant... or maybe negligible, I've never benchmarked RegEx performance... but I'd probably refactor just to understand the code better before expending effort for that. I'm not going to fork and publish as an extension because for a few changes that's too much effort (and maybe it'd be rude? IDK, just look at Node and what happened to io.js), that's why there's a gist instead.

The code for better comments isn't that long, that makes it easier to understand, so I'm surprised the code hasn't been bombarded by feature creep.

p.s. despite my preference of composition and just functions/objects as opposed to classes/this, the code is surprisingly readable thanks to the descriptive method names.

[Nukiloco]

Will support be added for svelte files in the future?

[sooxt98]

Any update on this lol, its been a year

Oh well, it's abit awkward after one year revisit the same issue and reading my own comments, its another year! Thanks for the work around @armchair-traveller , hope it get merged to the master

Btw is there any alternatives to this?

Update: seems like this extensions is dead, the last update is 14/07/2020, 04:23:01, I would consider publish a new one just for svelte

[Hacker-C]

This was bothering me quite a bit. As with all things that bother me, I let it sit for several months without dealing with it. But unlike the other things that bother me, I was able to get this extension to support Svelte.

Instructions (full file also uploaded as a gist):

All of this is under parser.js which is in %USERPROFILE%\.vscode\extensions\aaron-bond.better-comments-2.1.0\out (USERPROFILE is for Windows, for other platforms I think it's under your user folder)

1. Remove pipe operator escaping from escapeRegExp()

escapeRegExp(input) {
  return input.replace(/[.*+?^${}()[\]\\]/g, '\\$&'); // $& means the whole matched string
}

2. Add a case under setDelimiter() in parser.js as described in previous comments.

case 'svelte':
  this.setCommentFormat('//|<!--||/* ', '/*|<!--', '*/|-->') // RegEx in order: script|markup|style
  this.highlightJSDoc = true
  break

3. Done.

Explanation: Examining the source code, you'll see escapeRegExp is just taking the delimiter strings and escaping regex operators (disabling them). No languages use the pipe operator for comments, at least from the delimiting cases in this file, so there's no point to escaping it.

In the off chance that one does use | you can modify escapeRegExp (which is a common utility) to fit your case. Or add another utility specifically for that case... or imperatively set this.delimiter/this.highlightSingleLineComments, this.blockCommentStart/End, and this.highlightMultilineComments = this.contributions.multilineComments.

I don't believe there're any unintended side effects to this regexp modification based on the code I examined.

Because the pipe operator allows you to add in multiple string matches, I'm pretty sure this solution works for Vue as well.

Better comments is one of the only extensions I use for supportive code highlighting. I never bothered with bracket colorizer as I'm performance-minded when it comes to extensions, since it could impact my battery life. I only chose to enable it when it was natively added into VSCode as bracket pair colorization, touting performance benefits over the extension.

I wouldn't consider this change true multi-language support, because it's still using the same regex matches for every line instead of separate matches just in the script+module blocks or just in the style block. That would likely be more performant... or maybe negligible, I've never benchmarked RegEx performance... but I'd probably refactor just to understand the code better before expending effort for that. I'm not going to fork and publish as an extension because for a few changes that's too much effort (and maybe it'd be rude? IDK, just look at Node and what happened to io.js), that's why there's a gist instead.

The code for better comments isn't that long, that makes it easier to understand, so I'm surprised the code hasn't been bombarded by feature creep.

p.s. despite my preference of composition and just functions/objects as opposed to classes/this, the code is surprisingly readable thanks to the descriptive method names.

thanks, it works for me

[aradalvand]

Any updates? It's almost 2023. @aaron-bond Sorry to tag you, pretty sure you're very busy. Just wanted to ask whether there's been any progress on Svelte support? Thank you.

[aradalvand]

Curious why is Svelte listed as one of the supported languages in the VS Code Marketplace though (here)? When it's not actually supported:

[pipeline-crawler]

@armchair-traveller seems like it doesn't work now((( what are your "settings.json"?

[lts20050703]

Is there any update on this?

There's a fork that added support for this

https://github.com/edwinhuish/better-comments-next

[dslatkin]

Is there any update on this?

There's a fork that added support for this

https://github.com/edwinhuish/better-comments-next

Wouldn't be entirely opposed if that were released on the marketplace as "Even Better Comments" @edwinhuish. 👀 Or a PR opened.

[edwinhuish]

Is there any update on this? There's a fork that added support for this https://github.com/edwinhuish/better-comments-next

Wouldn't be entirely opposed if that were released on the marketplace as "Even Better Comments" @edwinhuish. 👀 Or a PR opened.

@dslatkin It's already on the marketplace Better Comments (with embedded languages support)

[Mark2M]

There is a workaround, sort of… if for example you place a js comment block in the script block of a svelte file and then put an html comment inside of that, then better comments works… at least in the script blocks. For example:

/* Better comments doesn’t work here

<!—

: but it does here

—>

*/