Feature: Add rename symbol support

[HerringtonDarkholme]

Problem

Language Server Protocol supports rename request.

Open question: should rename symbol change all related symbols in different language sections?

For example, change a component name should almost always change the component name in template as well.

[octref]

Yeah, I deferred this since making sure it works for templates too can be a bit of work.

For example, renaming a data attribute should replace all its occurrences in interpolations, renaming <Child> in <Parent> component should also update the name in Child.vue.

[octref]

I pushed a commit that does js rename. If you have

// foo.js
export const foo = 1

<script>
import { foo } from './foo.js'
</script>

Renaming on JS inside the Vue file works fine, renaming on the JS file does not propagate the changes to JS. To achieve that, we probably need a TS plugin. However, I'm not sure how it can communicate with Vue Language Server and get the edit location.

[chartinger]

Any updates on this issue? Would it be possible to enable working parts as, for example, experimental flags?
E.g: It would be really helpful to have "Rename Symbols" inside the script .ts part, propagating to other ts/vue-ts files, even when templates and js files are not updated.

[UniverseHan]

I would try this. Any help would be welcome.

[darrelfrancis]

I wondered about why this was not implemented, and only when I read this thread did I realise the full complexity. There are several levels at which it could be implemented, with increasing levels of programming difficulty and increasing value. Even the simplest level could be useful.

Level 1.
Rename only within <script>. Hopefully this should be easy to implement? It would be important to alert to users that they need to do the template references manually.

Level 2.
If you can easily achieve rename in <template> too, that would certainly be worth implementing.

Level 3.
Cross-file symbol rename. I imagine this to be very difficult. I think people should be willing to do this stuff manually with control-shift-H, with manual checking that they are not changing coincidentally named items. Most commonly, when they are renaming an exported item, they can manually search for places it is imported. There is no reason to kill yourself programming this (and even still getting people complain when it goes wrong!)

If Level 1 (or 1 and 2) are attainable at modest effort, it would be really worthwhile, and I would use it -- and be thankful!

[darrelfrancis]

I pushed a commit that does js rename. If you have

Dear @octref,
I am new to GitHub but a big fan of Vetur. Can you give me a hint as to how to access this commit, to see if I can help?
DF

[d9k]

Renaming symbols have been working great at least for year in vuejs plugin for IntelliJ Idea (https://github.com/JetBrains/intellij-plugins/tree/master/vuejs).

[vegerot]

@octref How feasible would it be to implement level 1 in vue-language-server?

I'm using VSCode at work but the rest of them use WebStorm and it's becoming more attractive all the time...

[Shujee]

I'm looking forward to this one too. Any ETA on this?

[vegerot]

Truth is I've been using WebStorm for the last week and I gotta say while VSCode is a way better editor, WebStorm is SO much better in terms of Vue support. Just finished a big refactor where I've been changing file names, moving file paths, renaming variables, changing types, etc. and WebStorm does it all automatically. Fixes everything including tests and documentation.

I switch back and forth between VSCode and WebStorm every other day because I find editing in WebStorm to be awful, and truth is Vetur is REALLY good, and nearly everything I need or want Vetur can do, but there are occasions when I need more power and WebStorm provides that stunningly.

edit: not just renaming and moving, but things like extracting components into separate files, a really cool graph feature that you can right click on a component and it will show a cool graph of all the components linked to it, inline css previews and pickers, method parameter decorations (that's a VSCode vs. WebStorm thing though, not Vetur), are some more things I've noticed in the last week

[heavenkiller2018]

Any updates on this issue?
E.g: It would be really helpful to have "Rename Symbols" inside the script .ts part, propagating to other ts/vue-ts files, even when templates and js files are not updated.

[yoyo930021]

@heavenkiller2018
You can follow #2016.
This problem is difficult about with program sync, I have tried before.
There are two typescript programs when vscode.
The one is handling .ts files in VSCode built-in.
The one is handling .vue files in Vetur.
They can't communicate on now.

[littlee]

tracking this issue 👀

[Predarion]

Please implement this it would be so helpful!

[nicoespeon]

Hi there 👋

I recently mentioned that I adapted one of my extension that brings automated refactorings so it works with .vue files too: https://marketplace.visualstudio.com/items?itemName=nicoespeon.abracadabra

"Rename symbol" is an essential refactoring (the most essential?). The extension used to delegate that to VS Code because it does a very good job. But I realized it wasn't supported for Vue files!

So I worked on that yesterday and I'm happy to say that I've shipped a change today (v4.11.0) to support renaming symbols in .vue files!

The UX is similar to the one you'd have with VS Code (although I didn't managed to get the input box just below the symbol). It's seamless since you trigger that with F2. If you find any issue with that when working on .vue files, please open an issue on https://github.com/nicoespeon/abracadabra/issues

I hope that could help you until this is supported by Vetur directly 👍 (it's getting there, but supporting automated refactorings isn't something easy to implement and takes time!)

[littlee]

After those days, I've rewritten my project to React

[JoJk0]

Any updates, or alternative extensions that work at the moment?

[chartinger]

@JoJk0 Depending on your needs you may have a look at VueDX, Volar or Abracadabra

It is really confusing at the moment with different extensions and approaches, each with their own pros and cons.

[itpropro]

It would be great to have it at least in the HTML part...

[deisner]

I believe there's already an issue for this, but unfortunately Abracadabra doesn't work inside the <template> of a .vue file. Unless I'm mistaken, it's not possible to rename an HTML tag (which is all I really need right now). @nicoespeon

[yoyo930021]

I believe there's already an issue for this, but unfortunately Abracadabra doesn't work inside the <template> of a .vue file. Unless I'm mistaken, it's not possible to rename an HTML tag (which is all I really need right now). @nicoespeon

Renaming HTML tag is another issue. #565
This part is not difficult, it just takes time to process.

[nicoespeon]

@deisner indeed, Abracadabra will only work in the <script> tag. Basically, it interprets this part as JS code, so you have refactorings available here. But it's not aware of Vue.js syntax so you can't really do Vue-specific refactorings with it.

[eladcandroid]

@octref Do you have any plan here?

[zhangenming]

I reinstalled my editor several times because I thought there was something wrong with it :(

[SushyDev]

No rename option here still?

[grojguy]

I just found VueDX extension. https://marketplace.visualstudio.com/items?itemName=znck.vue-language-features

Seems great, and working great so far!

[tokiory]

Bump. There's still no rename feature.
I'm using neovim with ts-server and vetur. Anyone has a solution for this stack?

[thomasaull]

@tokiory Maybe give volar a try, it‘s recommended in the vue docs and supports renaming of symbols (in TS projects at least)