Skip to content
Permalink
main
Switch branches/tags
Go to file
1 contributor

Users who have contributed to this file

List of available refactorings

All refactorings are available through the Command Palette.

Some refactorings have default keybindings configured, but you can change that.

All other refactorings are available through VS Code Quick Fixes. You can access them by clicking on the lightbulb that appear next to the code 💡 or use the default shortcut Alt ↵.

Pro Tip: You can also disable the Quick Fixes you never use in VS Code settings 🔥 (look for Abracadabra)

Table of Contents

The Essentials

Rename Symbol

Keybinding
F2

A Symbol is typically a variable or a function name.

This refactoring allows you to rename things and make sure all references in your code follow! It's easier and safer to use than a classic "Find and Replace".

VS Code does this refactoring very well. That's why this refactoring is merely an alias. It delegates the work to VS Code.

Note that it handles .vue files with a similar UX while VS Code doesn't handle it natively yet.

For Vue files, the support is limited: it can only rename within the <script> tag. It won't rename your identifier in the <template> tag for instance.

⬆️ Go to Table of Contents

Extract Variable

Keybinding On Mac
Ctrl + Alt + V ⌥ ⌘ V

This refactoring helps you give a meaning to the hardcoded constants and low-level expressions. It makes your source code easier to read and maintain.

It will extract the closest element from your cursor or partial selection.

It will also handle multiple occurrences.

⬆️ Go to Table of Contents

Extract Type

Keybinding On Mac
Ctrl + Alt + V ⌥ ⌘ V

This does exactly the same as Extract Variable, but for types!

⬆️ Go to Table of Contents

Inline Variable

Keybinding On Mac
Ctrl + Alt + N ⌥ ⌘ N

This refactoring is the opposite of Extract Variable. It replaces a redundant usage of a variable or a constant with its initializer. It's usually helpful to inline things so you can extract them differently.

⬆️ Go to Table of Contents

Inline Function

Keybinding On Mac
Ctrl + Alt + N ⌥ ⌘ N

This refactoring is similar to Inline Variable, but for functions. It replaces each call to the function with the function body. It helps to remove needless indirections.

⬆️ Go to Table of Contents

Move Statement Up

Keybinding
Alt + Shift + U

A Statement is typically a variable or a function declaration.

Moves the whole selected statement up. If the selected statement and the one above are one-liners, this is the same as doing VS Code Move Line Up. But if one of these statements is multi-lines, this refactoring is very handy!

As for all refactorings, it works even if you partially select the statement, or if the cursor is on the statement.

⬆️ Go to Table of Contents

Move Statement Down

Keybinding
Alt + Shift + D

Same as Move Statement Up, but it moves the selected statement down. Like, the other direction. That's it.

Move Statement Up and Move Statement Down also work on object properties. They always produce valid code, so you don't have to bother with the trailing comma anymore!

⬆️ Go to Table of Contents

Simplifying Conditional Logic

Negate Expression

💡 Available as Quick Fix (Alt ↵)

Negates the logical expression while preserving behaviour. It can be useful to tweak a logical expression before extracting meaningful chunks out of it.

It will negate the closest expression from your cursor or partial selection.

⬆️ Go to Table of Contents

Remove Redundant Else

💡 Available as Quick Fix (Alt ↵)

Removes the else keyword when it's not necessary, resulting in less nested code. This refactoring helps you replace nested conditional with guard clauses to make your code easier to read.

⬆️ Go to Table of Contents

Simplify Ternary

💡 Available as Quick Fix (Alt ↵)

Simplify ternary expressions that you might end up with after executing other refactorings.

Flip If/Else

💡 Available as Quick Fix (Alt ↵)

Flips the if and else statements. It's a useful refactoring to have in your toolbelt to simplify logical expressions.

⬆️ Go to Table of Contents

Flip Ternary

💡 Available as Quick Fix (Alt ↵)

Flips a ternary statement. It's really similar to Flip If/Else refactoring.

⬆️ Go to Table of Contents

Convert If/Else to Ternary

💡 Available as Quick Fix (Alt ↵)

Converts an if/else statement into a (shorter) ternary expression. This is very handy to improve code readability.

⬆️ Go to Table of Contents

Convert Ternary to If/Else

💡 Available as Quick Fix (Alt ↵)

Converts a ternary expression into an if/else statement. It reverses Convert If/Else to Ternary refactoring.

⬆️ Go to Table of Contents

Convert If/Else to Switch

💡 Available as Quick Fix (Alt ↵)

Converts an if/else statement into a switch statement. This is typically what you do before introducing polymorphism to clean object-oriented code.

⬆️ Go to Table of Contents

Convert Switch to If/Else

💡 Available as Quick Fix (Alt ↵)

Converts a switch statement into an if/else statement. It reverses Convert If/Else to Switch refactoring.

⬆️ Go to Table of Contents

Split If Statement

💡 Available as Quick Fix (Alt ↵)

Splits the logical expression of the closest if statement. This is an helpful tool to help you refactor complex branching logic, safely.

⬆️ Go to Table of Contents

Merge If Statements

💡 Available as Quick Fix (Alt ↵)

This is the opposite of Split If Statement. It consolidates conditional expressions to clean up the code.

It also works with else-if.

It also handles consecutive if statements that can be merged.

⬆️ Go to Table of Contents

Merge With Previous If Statement

💡 Available as Quick Fix (Alt ↵)

Merges selected statement with the if statement that is above. This is handy when you want to decompose a conditional to clean the code.

If you want to merge 2 consecutive if statements, it will resolve the dead code for you:

⬆️ Go to Table of Contents

Lift Up Conditional

💡 Available as Quick Fix (Alt ↵)

Useful when you need to have the similar conditionals at the top level. If you get there, you'll be able to convert them into a top-level switch statement, which you can easily refactor with polymorphism.

Hocus, pocus… This refactoring takes care of the gymnastic for you! Resulting code will have the same behaviour.

⬆️ Go to Table of Contents

Encapsulation

Extract Class

💡 Available as Quick Fix (Alt ↵)

Often, classes grow too big and do too many things. You want to split them by extracting some behavior in a new class.

This is where Abracadabra comes in and automate most of the grunt work for you. It can extract the properties and function you want in a keystrokes! It will take care of creating the new class while preserving existing behavior—it's a refactoring after all.

⬆️ Go to Table of Contents

Moving Features

Move to Existing File

💡 Available as Quick Fix (Alt ↵)

VS Code allows you to move things to new files. But how do you move things to existing files?

Well, now you can with Abracadabra

Trigger the refactoring on a function you want to move, select the destination file, let it take care of the rest. It works for top-level function declarations, resolves required imports, and prevents you from creating circular dependencies.

⬆️ Go to Table of Contents

Remove Dead Code

💡 Available as Quick Fix (Alt ↵)

Sometimes, Abracadabra can determine that some code can't be reached. If so, it can also get rid of the dead code for you.

⬆️ Go to Table of Contents

Organizing data

Split Declaration and Initialization

💡 Available as Quick Fix (Alt ↵)

Splits the declaration of the variable and its initialization. If it's a const, it will convert it to let.

⬆️ Go to Table of Contents

Split Multiple Declarations

💡 Available as Quick Fix (Alt ↵)

Splits multiple variables declarated together onto a single line each.

⬆️ Go to Table of Contents

Convert let to const

💡 Available as Quick Fix (Alt ↵)

Converts the declaration of a variable that is a let to a const if it's not mutated within the scope.

⬆️ Go to Table of Contents

Working around the syntax

Add Numeric Separator

💡 Available as Quick Fix (Alt ↵)

Did you know you could write 10_000 instead of 10000? Well, now you know. And you can make code easier to read with 2 keystrokes!

⬆️ Go to Table of Contents

Destructure Object

Not available as a Quick Fix, use the Command Palette to run this one. Temporary until we get #416 resolved.

Sometimes it's more convenient to destructure variables out of an object. It reduces the noise in the code.

Whenever the shape of the object can be inferred, you'll be able to destructure it automatically. That works from any occurrence of the identifier you want to destructure!

P.S: this may work best with TypeScript code since it's easier to infer the object shape there 😉

⬆️ Go to Table of Contents

Convert to Arrow Function

💡 Available as Quick Fix (Alt ↵)

Converts a function declaration into an arrow function, which is convenient when you want to switch the syntax.

⬆️ Go to Table of Contents

Toggle Braces

💡 Available as Quick Fix (Alt ↵)

Sometimes you need to add braces before you add more code. Other times you don't need them and prefer to get rid of them.

This refactoring allows you to toggle the braces on the closest statement of your cursor!

It works on:

  • If Statements (both if and else independently)
  • Arrow Function Expressions (e.g. const someFunction = () => {})
  • JSX Attributes (e.g. <SomeComponent anAttribute={"a value"} />)
  • Loops (for and while blocks)

⬆️ Go to Table of Contents

Convert to Template Literal

💡 Available as Quick Fix (Alt ↵)

This refactoring is already handled by VS Code.

But there's one scenario they don't want to handle: convert simple strings into template literals.

This is too bad because it's convenient to turn an existing string into a template literal to start adding some variables inside.

Hence, Abracadabra is proposing the refactoring for such scenario!

⬆️ Go to Table of Contents

Replace Binary with Assignment

💡 Available as Quick Fix (Alt ↵)

This one might seem obscure, but it's really replacing + with +=. Whenever it's possible, Abracadabra will propose you to refactor the code for a shorter (assignment) syntax.

⬆️ Go to Table of Contents

Convert For-Loop to ForEach

💡 Available as Quick Fix (Alt ↵)

When it's possible, it converts an old-school for-loop into a for-Each() call.

⬆️ Go to Table of Contents

Convert ForEach to For-Of

💡 Available as Quick Fix (Alt ↵)

When it's possible, it converts a forEach() into a for-of loop.

⬆️ Go to Table of Contents

Specific to TypeScript

Extract Generic Type

💡 Available as Quick Fix (Alt ↵)

This refactoring will turn an existing type into a generic. Very handy when you need to make an interface more generic.

⬆️ Go to Table of Contents

Extract Interface

💡 Available as Quick Fix (Alt ↵)

Extract the interface from a class.

This is very useful when you need to invert a dependency: create an interface from an existing class, so you can provide a different implementation of this interface.

⬆️ Go to Table of Contents

Specific to React

Convert to Pure Component

Not available as a Quick Fix, use the Command Palette to run this one

This one is specific to React and comes from react codemod.

It converts ES6 classes that only have a render() method, only have safe properties (statics and props), and do not have refs to Functional Components.

⬆️ Go to Table of Contents