Abracadabra is a Visual Studio Code extension that brings you automated refactorings for JavaScript and TypeScript.
Our goal is to provide you with easy-to-use, intuitive refactorings. They help you clean the code and understand what's going on.
Refactoring (noun): a change made to the internal structure of software to make it easier to understand and cheaper to modify without changing its observable behavior.
— "Refactoring: Improving the Design of Existing Code" by Martin Fowler
- Click on the Extensions icon (usually on the left-hand side of your editor).
- Search for "Abracadabra".
- Find the extension in the list and click the install button.
All refactorings are available through the Command Palette.
Some refactorings have default keybindings configured, but you can change that.
Refactorings that don't have default keybindings are available through VS Code Quick Fixes. You usually access them by clicking on the lightbulb that appear next to the code 💡
We recommend you to use the official shortcut (e.g. ⌘ .
on Mac), or to define a custom one (like Alt + ↵
).
The Essentials:
- Rename Symbol
- Extract Variable
- Inline Variable
- Inline Function
- Move Statement Up
- Move Statement Down
Simplifying Conditional Logic:
- Negate Expression
- Remove Redundant Else
- Flip If/Else
- Flip Ternary
- Convert If/Else to Ternary
- Convert Ternary to If/Else
- Convert If/Else to Switch
- Split If Statement
- Merge If Statements
- Merge With Previous If Statement
- Bubble up If Statement
Organizing data:
Working around the syntax:
- Add Braces to Arrow Function
- Remove Braces from Arrow Function
- Convert to Template Literal
- Replace Binary with Assignment
Keybinding (VS Code internal) |
---|
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.
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.
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.
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.
Keybinding | On Mac |
---|---|
Ctrl + Shift + Up |
⌘ ⇧ ↑ |
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.
Keybinding | On Mac |
---|---|
Ctrl + Shift + Down |
⌘ ⇧ ↓ |
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!
💡 Available as Quick Fix
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.
💡 Available as Quick Fix
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.
💡 Available as Quick Fix
Flips the if
and else
statements. It's a useful refactoring to have in your toolbelt to simplify logical expressions.
💡 Available as Quick Fix
Flips a ternary statement. It's really similar to Flip If/Else refactoring.
💡 Available as Quick Fix
Converts an if/else statement into a (shorter) ternary expression. This is very handy to improve code readability.
💡 Available as Quick Fix
Converts a ternary expression into an if/else statement. It reverses Convert If/Else to Ternary refactoring.
💡 Available as Quick Fix
Converts an if/else statement into a switch statement. This is typically what you do before introducing polymorphism to clean object-oriented code.
💡 Available as Quick Fix
Splits the logical expression of the closest if statement. This is an helpful tool to help you refactor complex branching logic, safely.
💡 Available as Quick Fix
This is the opposite of Split If Statement. It consolidates nested ifs to clean up the code.
It also works with else-if
.
💡 Available as Quick Fix
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:
💡 Available as Quick Fix
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.
💡 Available as Quick Fix
Splits the declaration of the variable and its initialization. If it's a const
, it will convert it to let
.
💡 Available as Quick Fix
Useful when you need to add code in the body of an arrow function.
VS Code provides this refactoring, but it only works if you have the correct selection. This one works wherever your cursor is!
💡 Available as Quick Fix
Does the contrary of Add Braces to Arrow Function. Same advantages over VS Code: it works wherever your cursor is.
💡 Available as Quick Fix
Have you ever worked on an old JavaScript code which used to concatenate strings with +
? This refactoring will save you the energy of converting it to a template string.
It's also useful when you want to turn a string into a template string.
💡 Available as Quick Fix
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.
Have a look at our CHANGELOG to get the details of all changes between versions.
We follow SemVer convention for versionning.
That means our releases use the following format:
<major>.<minor>.<patch>
- Breaking changes bump
<major>
(and reset<minor>
&<patch>
) - Backward compatible changes bump
<minor>
(and reset<patch>
) - Bug fixes bump
<patch>
Read our contributing guide to learn about our development process, how to propose bugfixes and improvements, and how to build and test your changes to Abracadabra.
To help you get your feet wet and become familiar with our contribution process, we have a list of good first issues that contains things with a relatively limited scope. This is a great place to get started!
Thanks goes to these wonderful people (emoji key):
Nicolas Carlo 💬 💻 📖 👀 🤔 | Fabien Bernard 🤔 🎨 |
This project follows the all-contributors specification.
Contributions of any kind are welcome!
VS Code native refactorings
VS Code ships with basic refactoring operations.
Pros of Abracadabra over these:
- VS Code refactorings require you to select the code exactly. You can trigger Abracadabra as long as your cursor is in the scope, which is simpler and faster.
- Abracadabra proposes more refactorings than the VS Code default ones.
- Abracadabra refactorings are documented.
- You can assign a shortcut to every Abracadabra refactoring.
Cons of Abracadabra over these:
- Abracadabra refactorings won't be as native as VS Code ones.
- Abracadabra refactorings are limited to JS, TS, JSX and TSX.
JS Refactor
The most popular extension for JavaScript refactoring is called JS Refactor. It provides JS automated refactorings for VS Code.
Pros of Abracadabra over these:
- Abracadabra work with TypeScript.
- Abracadabra proposes refactorings that JS Refactor doesn't.
- JS Refactor refactorings will work even with partially selected code. Abracadabra ones will also work as long as your cursor is in the scope.
- Abracadabra refactorings require you less steps to perform. It's faster to use.
Cons of Abracadabra over these:
- Abracadabra refactorings are more opinionated. This makes them faster to use, but might not cover some use cases.
- JS Refactor proposes code snippets, Abracadabra doesn't.
- JS Refactor supports Vue single file components and HTML.
💁 MIT