refactor' move files in VSCode - es6

Question

If I move ComponentFoo.js from folder X to folder Y, than a bunch of import statements break. Looking into this it seems there are many solutions for typescript, but what about js / es6? If I move a file in the editor, it should find all the import statements and update them to the new location. Is this possible?

Answer 1

Old post, but this might help some Googlers. This feature can be enabled and disabled in User Settings. For Javascript and Typescript, it's called "Updated Imports On File Move".

I had apparently disabled it and just figured the feature was broken :X

Answer 2

VS Code has built-in support for this for both javascript and typescript since VS Code 1.24.

For JavaScript specifically, you need to make sure VS code's language support can find all the references to the file so that imports referring symbols in that can be updated properly. Definitely create a jsconfig.json for your project, and also consider enabling semantic checking for JavaScript so that VS Code shows when imports are not being properly resolved

If your project is configured properly but files are not being updated, make sure you are running the latest VS Code insiders build and report an issue if it still doesn't work

Answer 3

Just use IntelliJ. It handles all kinds of refactoring perfectly. I'm a huge fan of VS Code, but refacotoring is definetly not one of it's stengths. Some imports don't get detected, and the imports can get modified in a weird way. For example, I had an import like this:

import { myStore} from 'src/common/stores/myStore';

When moving the file of myStore.ts to a different folder, VS Code constructed this bull**it:

import { myStore} from 'src/common/composables/myStoreStore'; 

The line above is no typo!

Btw I'm using vetur, maybe thats causing it, I don't know ...

Answer 4

for flutter developers you should move files one by one. vscode doesn't support multi file moving with refactor yet.