HACKER Q&A
📣 lamarcke

How do you usually handle refactoring in VS Code?


I come from a Jetbrains background. I'm trying to migrate to VS Code, and i've come to appreciate it's modularity and the overall quality of the extensions.

One thing that's been bothering, though, is that i see very few refactoring options, and they don't work reliably.

For example, i was working with a Typescript project (which is basically the main language of the VS Code ecosystem), and when i tried to move a type definition to another file, i discovered you only have the option to move it to a new file, in the current folder, with the name of symbol. This would mean I'd need to either create a separate file for this type (plus some other symbols if i want to) or handle the import and export changing myself.

I won't talk about the error i get if i don't select the symbols' export statement, because this is not discussed anywhere and may be something that only happens to me.

I tried doing this said refactor in Webstorm, and it was just a matter of hitting F6 and choosing the target file. I also tried searching for refactoring extensions for Typescript, to no avail.

This is really bothering me, changing import statements manually everytime i want to move a symbol sounds like a very tedious task.

So, I'm wondering, since a LOT of devs use VS Code, is this just how it is? Do you just get used to manually refactoring? I'm also using the Python extension, and it doesn't even give me any move refactoring options.

  👤 habitue Accepted Answer ✓
I've found that the language with the largest refactoring suite for vscode is Rust, not typescript. rust-analyzer has a silly amount of refactors available, (probably because the primary author used to work for Jetbrains).

I definitely miss the rust-analyzer refactoring experience when I am doing typescript

👤 zikohh
I can't talk about typescript.

I will explain how it works with python.

For python, I am able to refactor. You need to ensure you have pylance (as of 6 months ago this should be auto installed with the python extension ) and the python extension both installed. Then you can press F2 and rename variables, functions and etc.

It will not work if there is an issue with one of the extensions which happens maybe quarterly - to me.

If you can't rename a variable in a function

Try downgrade both extensions then restart vscode (after each downgrade). Then try, if it doesn't work no worries try updating to latest version then try again. Disabling the extension then enabling won't do anything so don't bother.

It works well with python but it wasn't always like this. It's come a long way in the past two years.

If you want to change the name of an import you rename the module, then it should offer you to auto-rename everywhere else.

Fwiw vscode is an enhanced editor not an IDE so imho it is not as good for all the refactoring solutions in comparison. That being said it has been my chosen editor/IDE for the past three years. Despite these setbacks I like it because it's light, easy to use. Doesn't ask me what to make a file before I write code in it. Doesn't require ten dialogue boxes either to create one

I still use it always but yeah there are setbacks but more pros than cons for me.

👤 brundolf
I've gotten fairly good at using regexes for this kind of thing, but of course those don't work for every case. I don't know of other options for operations that aren't built-in to the language extension

But I will say it's up to the language extension- eg. the rust-analyzer plugin has much more powerful refactoring features than the typescript integration does. So probably what you're talking about, for typescript specifically, is an expansion of features in the official typescript integration. In theory someone could also make an alternate typescript integration, though in practice this would be a huge undertaking and probably isn't worth doing

👤 chiefalchemist
Unfortunately, I don't have a direct answer. However, if your were using a JetBrains IDE, VS Code is only an editor. Mine you, it's a powerful editor with a robust ecosystem of extensions. But it still at its core and editor.
👤 Raed667
I gave up on assisted refactoring with VS Code, beyond the occasional rename-symbol, I just cut-paste manually.

Renaming and moving files usually auto-updates the imports though, but I could even live without that.

👤 aprdm
If you rename a file with TS it asks if you want to refactor the imports, I believe it does the same in python.

Apart from that.. you can do ctrl shift H I believe to replace across the project, but I won't use it that often.. I was in VIM and then Sublime and then VSCode for the past decade and never thought "I wish I had a button to refactor a symbol" personally

👤 jayflux
If you were looking for an issue to subscribe to for the move to file feature, it’s here: https://github.com/microsoft/TypeScript/issues/29988

It’s a TypeScript language server issue

👤 user432678
Funny enough I have moved to WebStorm a few years ago exactly because of what you’ve described.
👤 uglycoyote
the Abracadabra refactoring plugin helps and gives a few more options. But Jetbrains has always been strong in the refactoring department so it is probably going to always have a leg up on VSCode. Even with the Abracadabra plugin I find it does some strange things when refactoring and requires manual massaging.

one of the stranger things that I see when refactoring TS in VSCode is that sometimes it will insert the imports inline rather than at the top of the file, to bring in new imports.