Can VS Code automatically update JavaScript and TypeScript import paths on file rename/move?

Question

Is there a module for vscode that would update paths towards files? e.g. if I have:

import './someDir/somelib'

and I rename or move somelib, would it automatically update the file path in all the files where it is being referred as above?

Answer 1

This feature was added for JavaScript and TypeScript in VS Code 1.24 (tracking issue)

When you move or rename a file, you will now be prompted to see if you want to update imports:

This is controlled by the javascript.updateImportsOnFileMove.enabled and typescript.updateImportsOnFileMove.enabled settings. Valid values are:

• "prompt" — The default. Prompt for each file rename/move
• "always" — Always try to update imports automatically without prompting
• "never" — Do not update imports and do not prompt

Answer 2

First go settings

Search 'update import'

You can select:

• prompt (prompt on each rename)
• always (Always update path automatically)
• never (Never rename paths and don't prompt)

Answer 3

As @jamey graham mentioned, it stopped working for me in a React typescript project. The fix was to update the tsconfig.json file to have:

{
  "compilerOptions": {
    "baseUrl": "./src",
    // ...
  },
}

and to remove the "include": ["src"] option just for moving the files. VS Code should update the paths nicely after this.

You can bring back the "include": ["src"] option after this.

I do not know why removing the "include": ["src"] worked though.

If this doesn't do the trick, try opening a .ts file and trigger the Typescript: Restart TS server option in the command prompt and try again.

Answer 4

Import updating stopped working for me after I set up typescript in my project.

The solution was to follow: https://github.com/microsoft/vscode/issues/66937#issuecomment-475087628

Specifically, to add a jsconfig.json file in the root of my project containing:

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es2016",
    "jsx": "preserve"
  },
  "exclude": ["node_modules", "**/node_modules/*"]
}