✨ Add ref in script from template tag

[jd-solanki]

Hi,

I have a pretty nice idea about speeding up defining and using ref.

Current situation

Amazing, My cursor is in template tag somewhere and I want to add a new ref like const isActive = ref(false). For this, I have to move up in the file and write the desired ref and later I have to come back and use the same.

Solution

Instead, I hope we can create a new command which will allow inserting a new ref in SFC so we don't have to move up and down in file.

---

At First, I thought about creating an extension but I am new to both authoring vscode extension and tooling vue. Hence, I thought volar is strong enough to provide this feature quickly and more effectively.

If this is out of the scope of volar, I am happy to create vs code extension. For this, it will be great if you can provide some guidance on how can I parse the SFC and inject code into SFC.

Thanks :)

[johnsoncodehk]

Thanks for the suggestion, EmbeddedLanguageServicePlugin should have enough ability to support implement it, what you need is that codeAction apis https://github.com/johnsoncodehk/volar/blob/4963cd1350431e4bc3734486e56c6f6e877ce8f9/packages/vue-language-service-types/src/index.ts#L80-L83.

You can get diagnosis errors from codeAction.on(..., context) arg to check if there have missing properties, but you may have to parse SFC AST yourself to finding the new ref insert range.

Maybe I'll try when I have time.