Discussion on: 5 Visual Studio Code Tricks to Boost Your Productivity

View post

Replies for: #1 - Refactoring With "Rename Symbol" This one did not work as described. When using this feature with Javascript, it only changed the name of the...

This does work for JS. If you want to rename the exports in other files like here, you must use F2 on the MyModule in the ~~import statement~~ export statement of the file it originates from. However if you want to rename say MyModule.foo to MyModule.bar, you can rename it anywhere.

This is because named/aliased import is valid JS syntax, and VSCode does the renaming conservatively, so it tries to change as few things as possible. If this is an import from an NPM module, it wouldn't make sense to change the exports of some files in the node_modules directory.

Aaron B • Aug 14 '19

Thanks for your response!

Ok, I've figured this out. Using F2 outside the place it's declared will alias it. Doing it on the import statement will also alias it.

e.g. Using F2 anywhere in this file

someFile.js

import { Clock } from './clocks'

const c = new Clock();

will result in

import { Clock as C } from './clocks'

const c = new C();

On the other hand, if you use it where it's exported it will look for all instances of it in your code and replace it.

e.g.

clocks.js

export class Clock {
  // stuff
}

someFile.js

import { Clock } from './clocks'

const c = new Clock();

Would become

clocks.js

export class C {
  // stuff
}

someFile.js

import { C } from './clocks'

const c = new C();

Xiaoru Li • Aug 14 '19 • Edited

You're right, I didn't realize that, thanks! I guess the reason is indeed because that "blindly" renaming on import statements will mess up external stuff that we might consider static (eg. installed NPM modules).

Aaron B • Aug 14 '19

Yeah! When you said:

VSCode does the renaming conservatively

It sort of made it click for me! Anyway, thanks for your article and response! Following now!