Visual Studio Code: Rename Shorthand Properties

Refactoring headaches

Since the release of Typescript 3.4, refactoring destructed variable properties has caused Visual Studio Code to apply aliases to properties rather than renaming those properties. This default is good for some situatiuons, it keeps refactoring as contained and local as possible. However, I often find myself having to refactor the refactoring! Here is a contrived, non-sensical example:

// before refactoring
const foo = {bar: 'bar', baz: 'baz'};
const {bar, baz} = foo;
call(bar);

// after refactoring
const foo = {bar: 'bar', baz: 'baz'};
const {bar: changed, baz} = foo;
call(changed);

Working with React a lot, I have found that this is generally speaking not what I have wanted. I often use destructors on props and want to keep a consistant naming all the way up the chain.

Diasabling the feature

You can disable this feature in the settings of Visual Studio Code so that refactoring changes the name all the way up.

<!-- missing image: Screenshot 2020-04-19 at 12.36.07.png (Disabling the feature) -->

Now the refactoring will produce:

// before refactoring
const foo = {bar: 'bar', baz: 'baz'};
const {bar, baz} = foo;
call(bar);

// after refactoring
const foo = {changed: 'bar', baz: 'baz'};
const {changed, baz} = foo;
call(changed);

Conclusion

Software developers try and set suitable defaults for the majority of cases. Sometimes this rubs against the way a user wants or expects a feature to work. Thankfully in Visual Studio Code there is a robust settings section which provides fine grained control over every facet of the software.