Visual Studio Code - apply rename file refactoring in all ES6 imports

Question

I've typescript application build with ES6 modules.

How do I rename ts or js file representing a module without breaking ES6 import that referenced the renamed file?

e.g: rename MyModule.ts to RenamedModule.ts -> change import * from './MyModule' to import * from './RenamedModule' in all files;

Is there an VSCode extension or typescript service that would rename module path in all ES6 imports when renaming file?

EDIT:

vote for this vscode feature on GitHub

Answer 1

I was just looking for the same thing and found this VSCode extension:

move-ts

It is very young, but seems to be under active development. I tested it on my Windows machine and immediately ran into an issue with backslashes being used. There is, however, already a pull request to fix this (not by me). As soon as this is fixed, I think this might be what you (we) are looking for. EDIT: As of 2017-May-11, the windows issue is fixed.

There is an ongoing discussion for a "refactor move file" suggestion for Typescript itself here, but it seems to be very early stage. It seems, until this is built, this functionality is unlikely to be included in VSCode itself, as this open ticket for VSCode explains, which tracks the main feature request you linked to in your edit.

Answer 2

Vscode nows supports this feature. It's strange, when I did a file rename on a js file, it didn't work.

However, when I did a drag and drop of a file, vscode put up a dialog asking me if it should update all the paths for me. There's an option to have it always do it, which I selected.

After that I tried doing the file rename again on a js file, and it refactored all of my paths. I'm curious to know if others had the same experience as I did.