🧙 Abracadabra
Abracadabra is a Visual Studio Code extension that brings you automated refactorings for JavaScript and TypeScript. Works in Our goal is to provide you with easy-to-use, intuitive refactorings. They help you clean the code and understand what's going on. Related projects:
Table of Contents
Installation
Available refactoringsAll 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 Pro Tip: You can also disable the Quick Fixes you never use in VS Code settings 🔥 (look for Abracadabra) Rename Symbol
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 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. See it in actionIt will extract the closest element from your cursor or partial selection. It will also handle multiple occurrences. Extract Generic Type
Just like for variables, this TS-specific refactoring will extract a type to make it generic. See it in actionInline 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. See it in actionInline Function
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. See it in actionMove Statement Up
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. See it in actionMove Statement Down
Same as Move Statement Up, but it moves the selected statement down. Like, the other direction. That's it. See it in actionMove 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! Negate Expression
Negates the logical expression while preserving behaviour. It can be useful to tweak a logical expression before extracting meaningful chunks out of it. See it in actionIt will negate the closest expression from your cursor or partial selection. Remove Redundant Else
Removes the See it in actionSimplify Ternary
Simplify ternary expressions that you might end up with after executing other refactorings. See it in actionFlip If/Else
Flips the See it in actionFlip Ternary
Flips a ternary statement. It's really similar to Flip If/Else refactoring. See it in actionConvert If/Else to Ternary
Converts an if/else statement into a (shorter) ternary expression. This is very handy to improve code readability. See it in actionConvert Ternary to If/Else
Converts a ternary expression into an if/else statement. It reverses Convert If/Else to Ternary refactoring. See it in actionConvert If/Else to Switch
Converts an if/else statement into a switch statement. This is typically what you do before introducing polymorphism to clean object-oriented code. See it in actionConvert Switch to If/Else
Converts a switch statement into an if/else statement. It reverses Convert If/Else to Switch refactoring. See it in actionSplit If Statement
Splits the logical expression of the closest if statement. This is an helpful tool to help you refactor complex branching logic, safely. See it in actionMerge If Statements
This is the opposite of Split If Statement. It consolidates nested ifs to clean up the code. See it in actionIt also works with Merge With Previous If Statement
Merges selected statement with the if statement that is above. This is handy when you want to decompose a conditional to clean the code. See it in actionIf you want to merge 2 consecutive if statements, it will resolve the dead code for you: Lift Up Conditional
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 Hocus, pocus… This refactoring takes care of the gymnastic for you! Resulting code will have the same behaviour. See it in actionExtract Class
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. See it in actionMove to Existing File
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. See it in actionRemove Dead Code
Sometimes, Abracadabra can determine that some code can't be reached. If so, it can also get rid of the dead code for you. See it in actionSplit Declaration and Initialization
Splits the declaration of the variable and its initialization. If it's a See it in actionConvert let to const
Converts the declaration of a variable that is a See it in actionConvert to Arrow Function
Converts a function declaration into an arrow function, which is convenient when you want to switch the syntax. See it in actionAdd Braces to Arrow Function
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! See it in actionRemove Braces from Arrow Function
Does the contrary of Add Braces to Arrow Function. Same advantages over VS Code: it works wherever your cursor is. See it in actionAdd Braces to If Statement
Useful when you need to add code in the body of an See it in actionRemove Braces from If Statement
Does the contrary of Add Braces to If Statement: Removes braces from single-statement blocks in an See it in actionConvert to Template Literal
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! See it in actionReplace Binary with Assignment
This one might seem obscure, but it's really replacing See it in actionConvert For-Loop to Foreach
When it's possible, it converts an old-school for-loop into a See it in actionExtract Interface
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. See it in actionConvert to Pure Component
This one is specific to React and comes from react codemod. It converts ES6 classes that only have a See it in actionAdd braces to JSX attribute
This refactoring is specific to React. It adds curly braces to a JSX string literal, converting it into a JSX expression. See it in actionRemove braces from JSX attribute
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. See it in actionConfiguration
All refactorings that appear in Quick Fix suggestions can also be disabled in your VS Code settings 🔥 (look for Abracadabra) Release NotesHave a look at our CHANGELOG to get the details of all changes between versions. VersioningWe follow SemVer convention for versionning. That means our releases use the following format:
ContributingContributing GuideRead 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 IssuesTo 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! ContributorsThanks goes to these wonderful people (emoji key): This project follows the all-contributors specification. Contributions of any kind are welcome! AlternativesVS Code native refactoringsVS Code ships with basic refactoring operations. Pros of Abracadabra over these:
Cons of Abracadabra over these:
JS RefactorThe 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:
JavaScript BoosterAnother 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:
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:
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 |