What and Why
JS CodeFormer is a JS refactoring and code automation extension for VS Code. Born from the ashes of JS Refactor, JS CodeFormer answers a new question. Instead of asking "can a JS refactoring tool be made for VS Code", this project aims to answer "how can better tools help to create better software?"
1 - Install it
JS CodeFormer is an extension for Visual Studio Code. Install it from the Visual Studio Marketplace:
2 - Use it
Make a selection or place your cursor on the code you are working with, then either:
JS CodeFormer is not just a code refactoring and automation extension, it is an extension which is built upon these core principles:
None of these principles can be treated as "set it and forget it". Every new behavior, and every improvement receives serious thought as to how it will serve, and impact the developer using this tool.
A goal in this project is to have it "just work". In other words, in any situation where it seems it should work, it does work. Since nobody is able to see the future, this is something which will need to be addressed as new situations arise.
What it Looks Like
JS CodeFormer does the following so support "it just works":
The core languages in this list have been tested through active production use of the extension. Frameworks have been, at the least, smoke-tested on example production code.
Experimental framework support:
Currently settings are limited to just one: "Use Semicolons"
There are folks who use them and folks who don't. In order to better serve people, semicolons in generated code can be turned on or off. They are on by default -- this is the TC39 recommendation.
Refactorings, Conversions, and Actions
JS CodeFormer has a number of automated code actions you can take. They are separated into the following categories:
JS CodeFormer can suggest refactorings, conversions, and actions based on your current selection -- which is how I prefer to work. This reduces hotkey overload by giving you access to actions you can take without memorizing a bunch of key combinations.
Important note: this is not wired into the refactoring menu in order to ensure JS CodeFormer is available to you even if you are in a Live Share session.
JS CodeFormer automated refactorings are built upon years of experience to be stable and reliable. Though the project is new, and issues will inevitably arise, the tools in this project are used to support the project itself. In essence, JS CodeFormer is a self-dogfooding project.
Conversions may or may not introduce a different behavior. This means they are in a class of their own. The following conversions are currently available:
Not everything we want to do with our code is a refactoring. That doesn't mean we can't automate it. Actions aim to pair with the supported refactorings in order to provide a smooth development experience.
VS Code comes with a number of basic snippets for generating common code. JS CodeFormer adds a few while trying to limit snippet overlap. This means the snippet selection will be enhanced rather than repeated. The list of snippets is long, and constantly improving, so listing all snippets is unreasonable here.
Current snippets support:
JS Refactor Keybinding Backwards Compatibility
Refactorings In Action
Get action suggestions based on your current selection:
Using extract method in old jQuery, embedded in HTML:
Using extract method in a JSX block:
Extract variable in a Vue single-file component:
Extract to Parameter
Extract to parameter in old jQuery, embedded in HTML:
Inline variable in old jQuery, embedded in HTML:
Rename in a Vue single-file component:
Contributors and Thanks
Code contributions help introduce new behaviors and improve existing behaviors materially. I'd like to thank these contributors for their code contributions:
It's important to understand that not all contributions to a project are, or can be committed to the source repository. With that in mind, the following are people who have provided help and insights which might not have a name on a commit:
Also, every person who submitted a bug or enhancement on JS Refactor, and those who offer them on this project!
Known Issues and Expected Behaviors
Convert Ternary to If/Else Statement:
Convert Selected Functions to Class