Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/cmstead/js-refactor

JS Refactoring tool for Visual Studio Code
https://github.com/cmstead/js-refactor

javascript refactoring tooling tools vscode-extension

Last synced: about 1 month ago
JSON representation

JS Refactoring tool for Visual Studio Code

Awesome Lists containing this project

README 

        
# JS Refactor :: JS CodeFormer #



JS Refactor has been retired. This project is now an extension installer for its replacement, JS CodeFormer. If you install this extension, you will get that one.



You can install JS CodeFormer directly:



https://marketplace.visualstudio.com/items?itemName=cmstead.js-codeformer



## The Good News/Bad News Situation ##



The good news, this project will install JS CodeFormer for you, and you will get nearly the same hotkeys you've developed muscle memory for. The bad news, this is not the old project.



More good news: JS CodeFormer is a significant improvement in a number of ways:



- **It's faster** -- a LOT faster. In just about every way.

- **It has a broader language footprint** -- JSR at its best supported standard JavaScript and some TypeScript if it wasn't too fancy. JS CodeFormer can parse and interpret a large number of languages and framework-specific file formats, including JS/TS embedded in HTML and HTML-like files.

- **It's designed for stability and maintenance** -- The source code is well tested, and designed for quick easy fixes, which has already borne fruit.

- **The old JSR bugs are gone** -- I combed through the old issues and either verified they were gone, or fixed them if they were a design oversight.



## The Highlights ##



### Language Support ###



Languages:



- JavaScript

- TypeScript

- HTML (Embedded Javascript)



Frameworks:



- Angular

- React

- Vue



Framework-specific formats:



- JSX

- TSX

- Vue Single-file components

    - Full Vue support requires the Vetur extension: https://marketplace.visualstudio.com/items?itemName=octref.vetur



Experimental framework support:



- Svelte -- requires the Svelte extension to work

    - https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode



### Refactorings ###



- Extract Method/Function

    - Windows: `ctrl+shift+j, m`

    - Mac: `cmd+shift+j, m`

- Extract to Parameter

    - Windows: `ctrl+shift+j, p`

    - Mac: `cmd+shift+j, p`

- Extract Variable

    - Windows: `ctrl+shift+j, v`

    - Mac: `cmd+shift+j, v`

- Inline Variable

    - Windows: `ctrl+shift+j, i`

    - Mac: `cmd+shift+j, i`

- Rename (important for non js/ts files)

    - Windows: `ctrl+shift+j, r`

    - Mac: `cmd+shift+j, r`



### Conversions ###



- Change Variable Type

- Convert Expression to Template Literal

- Convert Function to Arrow Function

- Convert Function to Function Expression

- Convert Function Property to Method

- Convert Function Variable to Function Declaration

- Toggle Property Declaration Type



### Other Actions ###



- Surround with (open options list)

    - Windows: `ctrl+shift+j, w`

    - Mac: `cmd+shift+j, w`

- Introduce variable

- Introduce function

- Lift and name function expression



## Why (The Life Story) ##



JS Refactor was created at a time when VS Code was new and the refactoring landscape in the editor was limited. It was initially designed to simply be a refactoring extension. As time went along, it grew, and extended beyond being a simple refactoring tool.



Meanwhile the codebase was increasingly difficult to maintain. It was the first extension I authored for VS Code, and, even with significant work to improve the codebase, the problems were built too deeply into the core.



Eventually JS Refactor broke and I didn't have the energy to deal with the fallout anymore. I stopped most work for almost 2 full years. Once I resurfaced, I realized the only way out was to replace the original and build a system around certain principles which would lead to software which would work reliably, and could be maintained at a sustainable pace.



I started work on JS CodeFormer. Now that JS CodeFormer is in a stable initial state, it is time to give JS Refactor an honorable send-off. Instead of leaving a project to languish, it made more sense to send people where they can get something arguably better. This led me to the state of the software you see today.



Thank you to everyone who joined me on the initial journey. I hope you all will come and join me as we build better software together!