# abracadabra **Repository Path**: trusted-list/abracadabra ## Basic Information - **Project Name**: abracadabra - **Description**: JS & TS automated refactorings for the VS Code editor ✨ It's magic ✨ - **Primary Language**: Unknown - **License**: MIT - **Default Branch**: main - **Homepage**: https://marketplace.visualstudio.com/items?itemName=nicoespeon.abracadabra - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2026-03-18 - **Last Updated**: 2026-05-18 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # πŸ§™β€ Abracadabra > **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_ ![][logo-abracadabra] [![All Contributors](https://img.shields.io/badge/all_contributors-74-orange.svg?style=flat-square)](#contributors) [![CodeScene Average Code Health](https://codescene.io/projects/72569/status-badges/average-code-health)](https://codescene.io/projects/72569) ![](https://img.shields.io/badge/it%27s-magic-purple.svg) 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 Refactor Legacy Code in a snap! πŸ‘Œ ![Abracadabra in action][demo-abracadabra] ## Installation 1. Click on the Extensions icon (usually on the left-hand side of your editor). 1. Search for "Abracadabra". 1. 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` All references to this Identifier will be highlighted. The highlight will persist even when you modify the code. 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 This is handy for marking I/O code when refactoring, but you can use it to highlight any interesting Identifier and its references. Here are a few typical use cases: - 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` | For the glob patterns, read [glob's documentation](https://github.com/isaacs/node-glob/blob/f5a57d3d6e19b324522a3fa5bdd5075fd1aa79d1/README.md#glob-primer) to see what you can filter out. All refactorings that appear in Quick Fix suggestions can also be disabled in [your VS Code settings][vscode-settings] πŸ”₯ (look for _Abracadabra_) ## Release Notes [Have a look at our CHANGELOG][changelog] to get the details of all changes between versions. ### Versioning We follow [SemVer][semver] convention for versioning. That means our releases use the following format: ``` .. ``` - Breaking changes bump `` (and reset `` & ``) - Backward compatible changes bump `` (and reset ``) - Bug fixes bump `` ## Contributing ### [Contributing Guide][contributing] Read our [contributing guide][contributing] 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][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][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][all-contributors-emoji]):
Nicolas Carlo
Nicolas Carlo
πŸ€” πŸ’» πŸ“– πŸ‘€ πŸ’¬		 Fabien BERNARD
Fabien BERNARD
πŸ€” πŸ’» 🎨		 David
David
πŸ›		 GUL
GUL
πŸ€” πŸ’»		 Alexander Rose
Alexander Rose
πŸ€” πŸ’»		 Tim van Cleef
Tim van Cleef
πŸ’» πŸ“–		 Tobias Hann
Tobias Hann
πŸ› πŸ’» πŸ“–
Jiri Spac
Jiri Spac
πŸ›		 YuTengjing
YuTengjing
πŸ› πŸš‡ πŸ’»		 delaaxe
delaaxe
πŸ€” πŸ’»		 James Nail
James Nail
πŸ›		 Nick Ebbitt
Nick Ebbitt
πŸ€” πŸ’» πŸ“–		 Oliver Joseph Ash
Oliver Joseph Ash
πŸ€” πŸ› πŸ’» πŸ“–		 Alberto Xamin
Alberto Xamin
πŸ€”
Sakumatti Luukkonen
Sakumatti Luukkonen
πŸ› πŸ€”		 Sergey Klevakin
Sergey Klevakin
πŸ€” πŸ’»		 Andrew Janian
Andrew Janian
πŸ›		 leosdad
leosdad
πŸ€” πŸ›		 Iuliu Pop
Iuliu Pop
πŸ“– πŸ’» πŸ›		 Christina Braun
Christina Braun
πŸ’» πŸ›		 Zak Miller
Zak Miller
πŸ› πŸ’» πŸ€”
Marcus
Marcus
πŸ›		 Jonathan Boiser
Jonathan Boiser
πŸ›		 Vlad GURDIGA
Vlad GURDIGA
πŸ›		 Sam Hasler
Sam Hasler
πŸ€”		 Nicolas Favre-Felix
Nicolas Favre-Felix
πŸ›		 Wout Mertens
Wout Mertens
πŸ€”		 Luke Harold Miles
Luke Harold Miles
πŸ› πŸ€”
Ikko Ashimine
Ikko Ashimine
πŸ“–		 Viktor
Viktor
πŸ€”		 sumbatx15
sumbatx15
πŸ› πŸ’»		 j4k0xb
j4k0xb
πŸ› πŸ’» πŸš‡		 Ian Obermiller
Ian Obermiller
πŸ’» πŸ“– πŸ€”		 Emily Marigold Klassen
Emily Marigold Klassen
πŸ“–		 Vitaly
Vitaly
πŸ’» πŸš‡ πŸ€”
Alan Hussey
Alan Hussey
πŸ›		 Kevin Coleman
Kevin Coleman
πŸ›		 Roberts Slisans
Roberts Slisans
πŸ›		 Josh
Josh
πŸ€”		 brunnerh
brunnerh
πŸ€”		 Jose Cabrera
Jose Cabrera
πŸ€” πŸ’»		 Sebastian Schlatow
Sebastian Schlatow
πŸ›
jtwigg
jtwigg
πŸ›		 Andy Bulka
Andy Bulka
πŸ›		 Andrew Ash
Andrew Ash
πŸ“–		 Artem Zhivoderov
Artem Zhivoderov
πŸ€” πŸ’»		 Simon Holmes
Simon Holmes
πŸ€” πŸ’»		 Ramunas
Ramunas
πŸ€”		 Simon Chan
Simon Chan
πŸ›
byron wall
byron wall
πŸ›		 Jeroen van Warmerdam
Jeroen van Warmerdam
πŸ“–		 Steve BeaugΓ©
Steve BeaugΓ©
πŸ›		 Samuel Bronson
Samuel Bronson
πŸ›		 Timon Jurschitsch
Timon Jurschitsch
πŸ’»		 Leo Driesch
Leo Driesch
πŸ€”		 Romain Guerin
Romain Guerin
πŸ›
Victor Homyakov
Victor Homyakov
πŸ›		 Michal Srb
Michal Srb
πŸ›		 Walter Galvao
Walter Galvao
πŸ›		 Schwa Aresty
Schwa Aresty
πŸ€”		 Pokey Rule
Pokey Rule
πŸ€”		 Illia Panasenko
Illia Panasenko
πŸ’» πŸ€”		 montoner0
montoner0
πŸ›
yinluobing
yinluobing
πŸ›		 Toni Cabrera
Toni Cabrera
πŸ›		 Matheus Marabesi
Matheus Marabesi
πŸ›		 zoodogood
zoodogood
πŸ› πŸ’»		 Marko Schulz
Marko Schulz
πŸ›		 TomΓ‘s Ossa
TomΓ‘s Ossa
πŸ’»		 Petrus Asikainen
Petrus Asikainen
πŸ›
pinage404
pinage404
πŸ’»		 Charles Desneuf
Charles Desneuf
πŸ›		 Adrian Gh
Adrian Gh
πŸ€”		 six
six
πŸ›
This project follows the [all-contributors][all-contributors] specification. Contributions of any kind are welcome! ## Alternatives Building automated refactoring for JavaScript is not easy, and it takes time. Since this is a side-project, it doesn't get as much time as it should to cover everything you need. If Abracadabra doesn't fit your need for something, here are the other extensions I recommend you check: - [JS CodeFormer](https://marketplace.visualstudio.com/items?itemName=cmstead.js-codeformer) which is built by [Chris Stead](https://twitter.com/cm_stead). Chris built the first JS refactorings extension in VS Code back in the days, so he knows his stuff πŸ‘ - [P42 JavaScript assistant](https://marketplace.visualstudio.com/items?itemName=p42ai.refactor) is an impressive tool built by [Lars Grammel](https://twitter.com/lgrammel). It is not maintained anymore, but it may have refactorings that Abracadabra doesn't. - [JavaScript Booster](https://marketplace.visualstudio.com/items?itemName=sburg.vscode-javascript-booster) is a popular extension that mimics Webstorm's UX for refactoringβ€”which was a source of inspiration for Abracadabra. Worth having a look. There are some things I think Abracadabra does better. Other things Abracadabra does worse. The goal with this extension is to provide automated refactorings that are easy to use and VS Code misses. If others are implementing them, I'm more than happy to recommend (and use) their tool! Have a look, give them a try, use a combination of tools that work best for you. --- ![](https://github.com/nicoespeon/abracadabra/blob/main/docs/demo/magic.gif?raw=true) ## License πŸ’ [MIT][license] [hocus-pocus]: https://marketplace.visualstudio.com/items?itemName=nicoespeon.hocus-pocus [command-palette]: https://code.visualstudio.com/docs/getstarted/userinterface#_command-palette [change-keybindings]: https://code.visualstudio.com/docs/getstarted/keybindings [vscode-refactorings]: https://code.visualstudio.com/docs/editor/refactoring [vscode-quick-fixes]: https://code.visualstudio.com/docs/editor/refactoring#_code-actions-quick-fixes-and-refactorings [vscode-settings]: https://code.visualstudio.com/docs/getstarted/settings [js-refactor]: https://marketplace.visualstudio.com/items?itemName=cmstead.jsrefactor [js-booster]: https://marketplace.visualstudio.com/items?itemName=sburg.vscode-javascript-booster [changelog]: https://github.com/nicoespeon/abracadabra/blob/main/CHANGELOG.md [all-refactorings]: https://github.com/nicoespeon/abracadabra/blob/main/REFACTORINGS.md [contributing]: https://github.com/nicoespeon/abracadabra/blob/main/CONTRIBUTING.md [license]: https://github.com/nicoespeon/abracadabra/blob/main/LICENSE.md [good-first-issues]: https://github.com/nicoespeon/abracadabra/issues?q=is%3Aissue+is%3Aopen+label%3A%22%3Awave%3A+Good+first+issue%22 [semver]: http://semver.org/ [all-contributors]: https://allcontributors.org [all-contributors-emoji]: https://allcontributors.org/docs/en/emoji-key [demo-toggle-highlights]: https://github.com/nicoespeon/abracadabra/blob/main/docs/demo/toggle-highlights.gif?raw=true [demo-command-palette]: https://github.com/nicoespeon/abracadabra/blob/main/docs/demo/command-palette.png?raw=true [demo-abracadabra]: https://github.com/nicoespeon/abracadabra/blob/main/docs/demo/extract-variable-multiple-occurrences.gif?raw=true [logo-abracadabra]: https://github.com/nicoespeon/abracadabra/blob/main/docs/logo/abracadabra-logo.png?raw=true