Open Fuzzyma opened 11 months ago
I have a similar use case, but with the use of html in template strings. I'm also curious if it's possible to do this kind of thing with Volar
Yes, this is possible. You will need to create a Volar language plugin. My recommended approach is to parse the TypeScript code into an AST using the TypeScript library. Then look for any template expressions, and create embedded code for each template expression found.
The following links may be useful as a reference implementation:
createVirtualCode
and updateVirtualCode
.getServicePlugins
defines the service plugins, which enable IntelliSense for the embedded files. So this is where you could for example pass volar-service-html
.getLanguagePlugins
is where you pass the language plugin that you use for extracting the embedded code. Note that server.modules.typescript
is available here. You can pass this to your language plugin, so you don’t have to import and bundle TypeScript.Some embedded languages are harded to deal with than others. TypeScript requires an entire project context, HTML/CSS/JSON does not. I’m positive this should be fairly simple to implement for embedded HTML, but you may run into issues implementing this for JavaScript/TypeScript.
Sometimes I have code in a string:
There is a vscode extension that allows syntax highlighting for such template literals by prefixing it was a comment or use a tagged template:
Syntax highlighting alone is pretty cool. However, I run into bugs all the time because I have spelling errors or other easy to catch mistakes if those templates would also have language server support.
So I wanted to extend the ts language server to add this feature but I am not sure if extending a language server is even possible yet.
In a dream world you probably would use it like this:
Obviously you would still need to define the
javascript
function in this case. So maybe its not the best solution but its a start.