If you are using React and Typescript, there is a lot that your editor can do to help you.
Here are my favorite refactorings, I’m using IntelliJ for the screencast, but most of this will be available in VSCode as well.
If I had to take a single refactoring to a desert island, it would be the “rename” refactoring.
With a typed language, you have no reasons not to use this.
IntelliJ has smart renames and understand getter/setter paradigms.
Ctrl+R or other manual replace actions, your editor will make sure that you correctly select
the relevant variables/methods, as well as being a lot faster.
This refactoring is a real MVP. This enables a whole workflow for me: when I prototype, I lay down all the HTML until it looks right. Then I can extract subcomponents with a simple keybinding.
I have bound this refactoring to
Ctlr+Alt+Shift+M because it resembles the extract method refactoring (
You should definitely check out the
Extract method refactoring, by the way 😀.
This will allow you to add meaningful names to your code in a heartbeat.
I should have checked the
const checkbox here, to have a
const variable generated,
instead of a
The extract variable refactoring also works on types!
You can then use
Alt+Enter to convert the type to an interface if you wish.
I’m nearly done with my refactoring here, I just need my menu to be in its own file.
Refactoring can dramatically increase your productivity by providing useful keybindings for complex code transformations.
They also give you full confidence that the resulting code will be 100% valid.
Finally, while I showed you examples on a small scale, you can probably imagine how much time will be saved on larger scale refactorings!
Thanks to horsty for encouraging me to write this article. You should check out his blog (in French). He’s using the same blog template as I do, he is a man of taste. 😉