With Abracadabra, you can quickly and safely refactor existing code in VS Code.

VS Code ships with [a few basic refactorings][vscode-refactorings]. Abracadabra supercharges your editor with:

• 🎁 Much, much more refactorings
• ⚡ Shortcuts to trigger the most useful ones in no-time
• 💡 Quick Fixes to suggest refactorings when appropriate
• 🛠 Options to customize the UX to your needs
• 💬 Refactorings that work with .js, .jsx, .ts, .tsx, .vue and .svelte files

![Abracadabra in action][demo-abracadabra]

Installation

1. Click on the Extensions icon (usually on the left-hand side of your editor).
2. Search for "Abracadabra".
3. Find the extension in the list and click the install button.

List of available refactorings

We have 40+ automated refactorings such as Extract Variable, Extract Type, Flip If/Else, etc.

👉 [Here's the full catalog of refactorings available][all-refactorings]

All refactorings are available through the [Command Palette][command-palette].

![][demo-command-palette]

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

All other refactorings are available through [VS Code Quick Fixes][vscode-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][vscode-settings] 🔥 (look for _Abracadabra_)

Features that support refactorings

Besides refactorings, Abracadabra also gives you some extra features that are here to support refactoring work.

Highlight Identifiers

![][demo-toggle-highlights]

When working with Legacy Code, a very useful refactoring consists in extracting pure logic out of the I/O code that is hard to test (eg. HTTP calls).

To help you spot all the I/O bits in a chunk of code, Abracadabra can highlight them for you!

| Feature | Keybinding | On Mac | | :-------------------- | :----------------------- | :------ | | Toggle Highlight | Ctrl + Alt + H | ⌃ H | | Refresh Highlights | Shift + Alt + H | ⌃ ⌥ H | | Remove All Highlights | Ctrl + Shift + Alt + H | ⇧ ⌃ H |

1. Put your cursor over an Identifier you want to highlight
2. Press Ctrl + Alt + H

To remove, either:

• Put your cursor over a highlighted reference and press Ctrl + Alt + H again
• Press Ctrl + Shift + Alt + H from anywhere, to remove all highlights

• Mark all usages of a variable, to help you regroup them
• Identify variables that are always passed together in function calls

Does it highlights new references automatically?

Say you have highlighted a variable. Now you add some more code that refers to the same variable.

It won't be _automatically_ highlighted.

We could. But a naive implementation of this would constantly parse the AST of the code you are working with, which would probably affect your editor performances (not good).

One way to do it would be to toggle highlight over the reference once to remove the old highlight, then again to get the new reference! But that's annoying!

That's why you have a "Refresh Highlights" command. Hit Shift + Alt + H and references will be recomputed again for you!

Configuration

| Setting | Description | Default | | ------------------------------------------ | ------------------------------------------------------------------------------------ | ----------------------- | | abracadabra.ignoredFolders | Folders where it won't propose refactorings | ["node_modules"] | | abracadabra.ignoredPatterns | Glob patterns where it won't propose refactorings | ["dist/", "build/"] | | abracadabra.maxFileLinesCount | Don't propose refactorings on files that have more lines of code than this threshold | 10.000 | | abracadabra.getMaxFileSizeKb | Don't propose refactorings on files that bigger than this threshold (in kB) | 250 | | abracadabra.autoConvertToTemplateLiteral | Automatically convert a string into a template literal when you insert ${} | true |