🧙‍ Abracadabra

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

Related projects:

• Hocus Pocus, a VS Code extension that creates useful things for you, in JavaScript and TypeScript.

Table of Contents

• Installation
• Available refactorings
  • The Essentials:
    1. Rename Symbol
    2. Extract Variable
    3. Inline Variable
    4. Inline Function
    5. Move Statement Up
    6. Move Statement Down
  • Simplifying Conditional Logic:
    1. Negate Expression
    2. Remove Redundant Else
    3. Simplify Ternary
    4. Flip If/Else
    5. Flip Ternary
    6. Convert If/Else to Ternary
    7. Convert Ternary to If/Else
    8. Convert If/Else to Switch
    9. Split If Statement
    10. Merge If Statements
    11. Merge With Previous If Statement
    12. Bubble up If Statement
  • Moving Features:
    1. Remove Dead Code
  • Organizing data:
    1. Split Declaration and Initialization
  • Working around the syntax:
    1. Add Braces to Arrow Function
    2. Remove Braces from Arrow Function
    3. Add Braces to If Statement
    4. Remove Braces from If Statement
    5. Convert to Template Literal
    6. Replace Binary with Assignment
    7. Convert For-Loop to Foreach
  • TS specific:
    1. Extract Interface
  • React specific:
    1. Convert to Pure Component
    2. Add braces to JSX attribute
    3. Remove braces from JSX attribute
• Configuration
• Release Notes
  • Versioning
• Contributing
  • Contributing Guide
  • Good First Issues
• Contributors
• Alternatives
  • Why building yet another refactoring extension then?
• License

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.

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 ↵.

Rename Symbol

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.

⬆️ 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

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

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

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 nested ifs to clean up the code.

It also works with else-if.

⬆️ 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

Bubble up If Statement

💡 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

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

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

Add Braces to Arrow Function

💡 Available as Quick Fix (Alt ↵)

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!

⬆️ Go to Table of Contents

Remove Braces from Arrow Function

💡 Available as Quick Fix (Alt ↵)

Does the contrary of Add Braces to Arrow Function. Same advantages over VS Code: it works wherever your cursor is.

⬆️ Go to Table of Contents

Add Braces to If Statement

💡 Available as Quick Fix (Alt ↵)

Useful when you need to add code in the body of an if or else statement.

⬆️ Go to Table of Contents

Remove Braces from If Statement

💡 Available as Quick Fix (Alt ↵)

Does the contrary of Add Braces to If Statement: Removes braces from single-statement blocks in an if or else statement.

⬆️ 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 forEach() call.

⬆️ 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

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

Add braces to JSX attribute

💡 Available as Quick Fix (Alt ↵)

This refactoring is specific to React.

It adds curly braces to a JSX string literal, converting it into a JSX expression.

⬆️ Go to Table of Contents

Remove braces from JSX attribute

💡 Available as Quick Fix (Alt ↵)

This refactoring is specific to React.

If a JSX attribute is a JSX expression containing only a string literal, it refactors the JSX expression into a string literal by removing the curly braces.

⬆️ Go to Table of Contents

Configuration

Setting	Description	Default
abracadabra.ignoredFolders	Folders where it won't propose Quick Fixes	["node_modules", "dist", "build"]

Release Notes

Have a look at our CHANGELOG to get the details of all changes between versions.

Versioning

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>

⬆️ Go to Table of Contents

Contributing

Contributing Guide

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.

Good First Issues

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!

⬆️ Go to Table of Contents

Contributors

Thanks goes to these wonderful people (emoji key):

Nicolas Carlo 💬 💻 📖 👀 🤔	Fabien Bernard 💻 🤔 🎨	David 🐛	GUL 🤔 💻	Alexander Rose 🤔 💻	Tim van Cleef 💻 📖	Tobias Hann 🐛 💻 📖
Jiri Spac 🐛	YuTengjing 🐛

This project follows the all-contributors specification.

Contributions of any kind are welcome!

⬆️ Go to Table of Contents

Alternatives

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.

Abracadabra is quite similar. The differences are:

• Abracadabra refactorings are more opinionated. It makes the extension smoother and faster to use (less questions asked), but might not cover some use cases.
• Abracadabra only focus on refactorings. JS Refactor proposes code snippets and other code transformations.
• JS Refactor has less pure "refactorings" operations.
• Abracadabra uses VS Code Quick Fixes a lot to provide insights to the end user.
• JS Refactor is the most popular extension for JavaScript refactoring in VS Code.

JavaScript Booster

Another JavaScript refactoring extension for VS Code is JavaScript Booster. It boosts your productivity with advanced JavaScript refactorings and commands.

Abracadabra is very similar to this one. They both rely on VS Code Quick Fixes. The few differences are:

• the proposed set of refactorings
• JavaScript Booster has a custom "Extend/Shrink selections" feature

Why building yet another refactoring extension then?

Good question. The best move would surely have been to reach out one of the author of existing extensions to see how we could have improved them, instead of creating a new one.

But the motivations to build Abracadabra instead were:

• starting from scratch to poke around and move fast, without risking to break things
• scratch our own itch without having to make a case for it
• the curiosity of solving this problem with our vision (code architecture, what a great UX would be, etc.)

For now, we have fun and do our best to build a great extension!

When we'll have more experience, we'll probably ping the authors of other extensions to see how we could consolidate our efforts for the community. That's why we encourage you to test Abracadabra and give us your feedback!

---

License

💁 MIT