Editor syntax highlighting for custom transforms (ts, sass)

[arnoson]

Great project! I was thinking about creating something similar for a long time. What held me off is that I would like to continue to use other languages like typescript or sass (like in vue single file components). Transforming them is not the problem, but editor support (preferably in vscode). The vscode vetur plugin for vue manages syntax highlighting and autocompletion for these languages very well, are there any plans to create something similar for WebC?

[zachleat]

Absolutely! I have a test in the test suite for typescript, hopefully that is enough to explain how to do it?

https://github.com/11ty/webc/blob/e445c07cf4ceda0120922b495493b5acf9205b97/test/parserTest.js#L1113

The docs for this are called Custom Transforms: https://github.com/11ty/webc#custom-transforms

e.g. <style webc:type="sass"> or <script webc:type="ts">

[zachleat]

Well I’ve closed your issue but I think your question was a bit bigger than I answered. Is there a good way to get custom template language syntax highlighting in VS Code?

[arnoson]

Thanks for the explanation! I've looked into it a bit and it turns out it is not that easy to have good language support for embedded languages inside html. Syntax highlighting is straight forward but autocompletion (which would my main usecase for ts) can be only achieved with request forwarding to the typescript language server which looked rather complex. But maybe for someone with a bit more experience with vscode language extensions this wouldn't be that difficult at all.

[arnoson]

Volar, the vscode extension for vue, has been rewritten to be framework agnostic:

Volar core modules is now framework-agnostic, and you can use Volar to implement language servers other than Vue framework.

So this might be a good starting point. More infos here: https://blog.vuejs.org/posts/volar-1.0.html