Refactor support for Vetur

[octref]

Currently, TypeScript has a range of refactor support, such as extract to function. We should bring those in for <script> region.

Moreover, there are also Vue specific refactors that we could explore, for example: https://github.com/vuejs/vetur/issues/820#issuecomment-397332388

Being able to put a part of the current component's <template> into a new .vue file, with name and props auto populated seem very useful.

[hmnd]

Is this still planned? Would be really useful to have.

[beeplin]

Except for extract to function etc., it would be nice to support F2 (renaming) in .vue files.

[vinceramcesoliveros]

Just Necroing an issue that really needs to be solved in a large project that requires refactoring. I really want to know from someone who is handling big projects in VueJS and how do they refactor their components/variables/functions via F2(renaming) in vue files. I can easily refactor variables/functions in Javascript when //@ts-check is enabled. In Vue files, if I use Ctrl+F2 on a variable name and it has similar matches. it'll affect the whole app.

[arenddeboer]

I switched to writing all code into their own file and load it in the .vue file using

<script lang="ts" src="./MyComp.ts">
</script>

With plain Javascript you should of course drop the lang="ts" and use file.js This makes the code eligible for refactoring everywhere.

[vinceramcesoliveros]

@arenddeboer does this work if it's in the template tags? (or lives in the template tag?). like changing from v-model="user" to v-model="person"(assume that I have change the variable name from the data property using F2 and not Ctrl+F2).

[yoyo930021]

@ram231 https://github.com/vuejs/vetur/issues/610#issuecomment-666973531

[arenddeboer]

@ram231 nope, you are correct in that this does not refactor anything inside the template. But in my experience, there is still a lot to gain by moving it out into a .ts file. vscode seems to also perform much better.

[vinceramcesoliveros]

@ram231 nope, you are correct in that this does not refactor anything inside the template. But in my experience, there is still a lot to gain by moving it out into a .ts file. vscode seems to also perform much better.

Pretty much I can relate to that(your way of separating JS/TS related code is somewhat similar to Mixins in vue). But handling the template tag is much more of a need here. It even affects my css class because it has a matching name.

[oliverw]

It is almost impossible to work on a larger codebase without any support for refactoring. Is this still in the works?

[yoyo930021]

It is almost impossible to work on a larger codebase without any support for refactoring. Is this still in the works?

Follow #2016

[nicoespeon]

Hello here 👋

I think I can help with this specific question. If you're looking for automated refactoring for .vue files, I recently adapted one of my extension to support these: https://marketplace.visualstudio.com/items?itemName=nicoespeon.abracadabra

You can find more context around the decision here: https://github.com/nicoespeon/abracadabra/issues/133

I don't do much Vue myself, but I'm using automated refactorings every day. With a little tweak, I was able to support Vue files for some users who needed it. I guess others can find it helpful too, while Vetur implements them 👍

[yoyo930021]

Hello here 👋

If you're looking for automated refactoring for .vue files, I recently adapted my extension to support these: https://marketplace.visualstudio.com/items?itemName=nicoespeon.abracadabra

You can find more context around the support decision here: nicoespeon/abracadabra#133

I don't do much Vue myself, but I'm using automated refactorings every day. With a little tweak, I was able to support Vue files as some users needed it. I guess others can find it helpful while Vetur implements them 👍

Thank you, We have not had enough time to develop this part. But this has always been our goal.

If anyone interested, you can study this comment and this code. And then send a PR.

[vinceramcesoliveros]

Hello here 👋

I think I can help with this specific question. If you're looking for automated refactoring for .vue files, I recently adapted one of my extension to support these: https://marketplace.visualstudio.com/items?itemName=nicoespeon.abracadabra

You can find more context around the decision here: nicoespeon/abracadabra#133

I don't do much Vue myself, but I'm using automated refactorings every day. With a little tweak, I was able to support Vue files for some users who needed it. I guess others can find it helpful too, while Vetur implements them 👍

Thanks! I stopped writing vue files because of rename symbol. might come back and try this extension to see the magic.

[weaversam8]

Per the discussion in nicoespeon/abracadabra#243, Nicolas has decided that the functionality to refactor components to a new file should live in Vetur rather than abracadabra. Adding that context to this issue, since this would be a MAJOR feature for Vue developers.