🧙‍ Abracadabra

👷 This project is under initial development phase and is not stable yet.

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.

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.

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

1. Rename Symbol
2. Extract Variable
3. Inline Variable
4. Negate Expression
5. Remove Redundant Else
6. Flip If/Else
7. Flip Ternary
8. Convert If/Else to Ternary
9. Convert Ternary to If/Else
10. Move Statement Up
11. Move Statement Down

Rename Symbol

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.

Extract Variable

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.

Inline Variable

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.

Negate Expression

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

Remove Redundant Else

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

Flip If/Else

💡 Available as Quick Fix

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

Flip Ternary

💡 Available as Quick Fix

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

Convert If/Else to Ternary

💡 Available as Quick Fix

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

Convert Ternary to If/Else

💡 Available as Quick Fix

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

Move Statement Up

A Statement is typically a variable or a function declaration.

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

Move Statement Down

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

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>

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!

Contributors ✨

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!

Alternatives

VS Code ships with basic refactoring operations. But they tend to be limited and we didn't found the UX to be very intuitive.

There is also an extension called JS Refactor that provides JS automated refactorings for VS Code. But we didn't like its UX much (e.g. it takes a lot of keystrokes to extract a variable). Also, it didn't support JS class syntax well, nor JSX, TS and TSX when we decided to create Abracadabra.

License

💁 MIT