Feature Request: Update import paths when a file is moved/renamed

[frankdugan3]

• I have searched through existing issues
• I have read through docs
• I have read FAQ

Feature request

Code recently released a feature to update import paths when a Typescrip/JS file is moved or renamed. It would be absolutely amazing if Vetur could support that feature in SFCs!

[trekze]

+1

I don't use refactoring tools much in general, but this one saves so much time. I'd be happy to take a stab at it with a PR if someone on the vetur team would weigh as to whether it's easy to implement. Note that I have never looked at the vetur source before so I'd be starting from scratch.

An even more amazing variant on this would be the ability to select a block of HTML from <template></template> and refactor that block into a SFC auto-magically. You'd need to pass any variables down as props though so I'm guessing this is not trivial.

[octref]

@hmexx If you are interested in contributing, you can get started by reading https://code.visualstudio.com/docs/extensions/example-language-server and https://github.com/vuejs/vetur/blob/master/.github/CONTRIBUTING.md. I'm planning to add more contribution docs for Vetur over the weekend.

However, this particular one is very involved. To do it correctly you need to handle cases of both moving TS/JS files (which Vue files can import), and moving Vue files.

I suggest starting with something simpler like this: #780

[octref]

What I found out:

• VS Code has a new API workspace.onDidRenameResource
• TypeScript Language Service has an API for sending back a workspace edit for specific file rename: https://github.com/Microsoft/vscode/blob/master/extensions/typescript-language-features/src/features/updatePathsOnRename.ts#L217

[trekze]

@octref Thank you! I'll keep an eye out for the updated contribution docs. Meanwhile I'll try and have a look at #780 to see how much work it is for me to get familiarised with vetur and VS Code's language server.

[octref]

@hmexx It would be great if you can open a new issue to track the rafactor support. I would want it too.

It would be great to start with clear definition of the expected input, the action and the expected output.

[troy351]

Any update for this?

[livthomas]

The fact that this feature is still not implemented makes VS Code inferior to WebStorm, thus making Vetur quite useless. I would like to use VS Code (with Vetur) when developing Vue.js applications but this feature is a deal breaker. I move components around or rename them basically every single day since applications are constantly evolving. And I cannot imagine searching for all the files where those components were used and manually changing imports everywhere each time I make such change. There can easily be 10s (or sometimes even 100s) of places where those components are used in larger applications.

I have seen it in multiple projects that because of such basic features missing in such important tools (as Vetur is) developers are reluctant to refactor existing code which results in applications getting into quite bad shape. And that leads to worse developer experience as well as decreased productivity. I think having this feature in Vetur is crucial to making VS Code and Vue.js good tools for implementing large-scale applications.

[jasonlyu123]

The LSP 3.16 brings workspace/didRenameFiles notifications and workspace/willRenameFiles requests. I can try to take a crack on this once the deps bumps, as it has some breaking changes.

[yoyo930021]

The LSP 3.16 brings workspace/didRenameFiles notifications and workspace/willRenameFiles requests. I can try to take a crack on this once the deps bumps, as it has some breaking changes.

Welcome PR. 👍

[mirko77]

I have enabled the settings in vs code, "Update Import On File Move" but still it does not work for .vue files when using imports with an alias @ like

import ModalConfirmPassword from '@/components/modals/modal-confirm-password.vue';

Is there any extra configuration that needs to be added? It works when importing using the relative path ../../../**

jsconfig.json

{
    "compilerOptions": {
        "baseUrl": ".",
        "paths": {
            "@/*": [
                "src/*"
            ]
        }
    },
    "include": [
        "./src/**/*"
    ]
}

Thanks

[rocifier]

same issue for me, we use '@/components/....' and moving a file from '@/views/...' into the components folder has no refactoring effect triggered in the code base

[LaurentMag]

+1 with vscode and vue3 @/... import.
Path are not updating after moving a file from a folder to another.
It can also take (lot of) time to correctly fix import across files. and project.

[busybox11]

Same issue here.