How to use volar? Is there any easier way besides reading the source code?

[alamhubb]

I want to develop an extended syntax for typescript based on volar, but I can't find more detailed usage documentation, such as how to configure syntax highlighting, etc. I can only look at the volar source code to know where I should pass in the relevant configuration and which configuration items volar handles.

I read the source code for a while before I knew how Volar handles TS highlighting

1. createTypeScriptProject
2. getOrCreateConfiguredProject
3. createTypeScriptLS
4. createLanguageService -> plugins.create()
5. createLanguageServiceBase -> getSemanticTokens: semanticTokens.register(context),
6. semanticTokens.register -> plugin[1].provideDocumentSemanticTokens

And I haven't found the code for how the virtual code corresponds to the specific plugin code.

But I didn't find any relevant documents, I could only look through the source code

[remcohaszing]

There’s some documentation in https://volarjs.dev/core-concepts/why-volar/, but it’s far from complete. We’re more active on the Discord server, linked on the website.

Probably the best way to understand Volar, is by looking at existing implementations:

• https://github.com/mdx-js/mdx-analyzer
• https://github.com/vuejs/language-tools
• https://github.com/withastro/language-tools

Neither TypeScript nor LSP handles syntax highlighting. So this is out of scope for Volar. You will have to define a TextMate language. You can specify semantic tokens to enhance syntax highlighting, but that’s more of a detail you may want to have a look at after you get the basics up and running.

[alamhubb]

Thank you for your answer. I have learned https://github.com/vuejs/language-tools these days.