{"id":16641386,"url":"https://github.com/cmstead/js-codeformer","last_synced_at":"2025-03-21T15:32:27.053Z","repository":{"id":46675258,"uuid":"387286846","full_name":"cmstead/js-codeformer","owner":"cmstead","description":"A JS refactoring and code automation tool for building better source","archived":false,"fork":false,"pushed_at":"2021-11-16T19:41:56.000Z","size":8943,"stargazers_count":28,"open_issues_count":4,"forks_count":2,"subscribers_count":3,"default_branch":"main","last_synced_at":"2024-10-13T07:46:23.103Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/cmstead.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-07-18T23:16:30.000Z","updated_at":"2024-04-29T14:49:49.000Z","dependencies_parsed_at":"2022-09-13T14:12:56.642Z","dependency_job_id":null,"html_url":"https://github.com/cmstead/js-codeformer","commit_stats":null,"previous_names":[],"tags_count":185,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cmstead%2Fjs-codeformer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cmstead%2Fjs-codeformer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cmstead%2Fjs-codeformer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cmstead%2Fjs-codeformer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cmstead","download_url":"https://codeload.github.com/cmstead/js-codeformer/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":221816534,"owners_count":16885355,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-12T07:46:23.965Z","updated_at":"2024-10-28T10:23:06.709Z","avatar_url":"https://github.com/cmstead.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# JS CodeFormer: Javascript Refactoring \u0026 Code Automation #\n\n## What and Why ##\n\nJS 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?\"\n\nJS CodeFormer is a suite of tools purpose built to simplify the process of creating and editing software in a JavaScript environment.\n\n## Getting Started ##\n\n### 1 - Install it ###\n\nJS CodeFormer is an extension for Visual Studio Code. Install it from the Visual Studio Marketplace:\n\n- [JS CodeFormer on the Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=cmstead.js-codeformer)\n\n### 2 - Use it ###\n\nMake a selection or place your cursor on the code you are working with, then either:\n\n- **Choose from suggested actions:**\n    - `ctrl+alt+.` -- Windows\n    - `shift+cmd+alt+.` -- Mac\n- **Choose from a menu:**\n    - right click to open the context menu\n\n## Core Principles ##\n\nJS CodeFormer is not just a code refactoring and automation extension, it is an extension which is built upon these core principles:\n\n- **Robustness** -- JS CodeFormer must work reliably and predictably in a broad range of code environments and styles\n- **Communication** -- If JS CodeFormer fails, it should provide immediate feedback to the user; the feedback should be as clear as possible\n- **Usability** -- It should be easy to find your way around the tool, even at the start\n- **Accessibility** -- Clear, direct access to the tooling must be supported for all users regardless of disability \n\nNone 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.\n\n## Goals ##\n\nA 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.\n\n### What it Looks Like ###\n\nCurrently, JS CodeFormer quietly works in files which reach beyond what is generally considered \"standard JavaScript/TypeScript environments\". Many extensions do not work in a LiveShare session, but JS CodeFormer is built to support a rich editing experience in an environment where many extensions are disabled.\n\n### In Brief ###\n\nJS CodeFormer does the following so support \"it just works\":\n\n- Full functionality in HTML files\n- Support for HTML-like environments like:\n    - Vue single-file components\n    - Svelte files\n- Support for working in a Live Share session\n\n## Language Support ##\n\nThe 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.\n\nLanguages:\n\n- JavaScript\n- TypeScript\n- HTML (Embedded Javascript)\n\nFrameworks:\n\n- Angular\n- React\n- Vue\n\nFramework-specific formats:\n\n- JSX\n- TSX\n- Vue Single-file components\n    - Full Vue support requires the Vetur extension: https://marketplace.visualstudio.com/items?itemName=octref.vetur\n\nExperimental framework support:\n\n- Svelte -- requires the Svelte extension to work\n    - https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode\n\n## Extension Settings ##\n\nCurrently settings are limited to just one: \"Use Semicolons\"\n\nThere 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.\n\n## Refactorings, Conversions, and Actions ##\n\nJS CodeFormer has a number of automated code actions you can take. They are separated into the following categories:\n\n- Refactorings: actions which meet Martin Fowler's definition of a refactoring\n- Conversions: Conversion of common structures from one common form to another\n- Actions: A variety of other automated behaviors useful for making common changes\n\n### Suggested Actions ###\n\nJS 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.\n\n- **Suggested Actions Hotkey**\n    - Windows: `ctrl+alt+.`\n    - Mac: `cmd+shift+alt+.`\n\nImportant 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.\n\n### Refactorings ###\n\nJS 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.\n\nCurrent refactorings:\n\n- Extract Method/Function\n- Extract Variable to Parameter\n- Extract Variable\n- Inline Variable\n- Invert If Statement\n- Invert Ternary Expression\n- Rename (important for non js/ts files) [See known issues]\n\n### Conversions ###\n\nConversions may or may not introduce a different behavior. This means they are in a class of their own. The following conversions are currently available:\n\n- Change Variable Type\n- Convert Expression to Template Literal (multi-select supported)\n- Convert Function to Arrow Function\n- Convert Function to Function Expression\n- Convert Function Property to Method\n- Convert Function Variable to Function Declaration\n- Convert Import Declaration to CommonJS Require (multi-select supported)\n- Convert to Multiple Declarations\n- Convert Selected Functions to Class [See expected behaviors] (multi-select supported)\n- Convert Ternary to If/Else [See expected behaviors]\n\n### Actions ###\n\nNot 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.\n\nCurrent Actions:\n\n- Surround with (open options list)\n- Introduce variable\n- Introduce function\n- Lift and name function expression\n- Move Function Into Class\n- Toggle Async Function Property\n- Toggle Arrow Function Braces\n- Toggle Function Call Arguments Between Positional and Object Style\n- Toggle Function Parameters between Positional and Object Destructuring Style\n- Toggle Property Declaration Between Standard and Shorthand\n\n### Snippets ###\n\nVS 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.\n\nCurrent snippets support:\n\n- variables and parameters\n- functions\n- classes\n- promises\n- literal values\n\n### JS Refactor Keybinding Backwards Compatibility ###\n\n- Extract Method/Function\n    - Windows: `ctrl+shift+j, m`\n    - Mac: `cmd+shift+j, m`\n- Extract Variable to Parameter\n    - Windows: `ctrl+shift+j, p`\n    - Mac: `cmd+shift+j, p`\n- Extract Variable\n    - Windows: `ctrl+shift+j, v`\n    - Mac: `cmd+shift+j, v`\n- Inline Variable\n    - Windows: `ctrl+shift+j, i`\n    - Mac: `cmd+shift+j, i`\n- Invert If Statement\n    - Windows: `ctrl+shift+j, n`\n    - Mac: `cmd+shift+j, n`\n- Invert Ternary Expression\n    - Windows: `ctrl+shift+j, t`\n    - Mac: `cmd+shift+j, t`\n- Rename (important for non js/ts files) [See known issues]\n    - Windows: `ctrl+shift+j, r`\n    - Mac: `cmd+shift+j, r`\n- Surround with (open options list)\n    - Windows: `ctrl+shift+j, w`\n    - Mac: `cmd+shift+j, w`\n\n## Refactorings In Action ##\n\n**Suggested Actions**\n\nGet action suggestions based on your current selection:\n![JS CodeFormer Suggested Actions](./images/convert-functions-to-class.gif)\n\n**Extract Method**\n\nUsing extract method in old jQuery, embedded in HTML:\n![Extract Method in HTML](./images/extract-method-html.gif)\n\nUsing extract method in a JSX block:\n![Extract Method inside JSX](./images/extract-method-jsx.gif)\n\n**Extract Variable**\n\nExtract variable in a Vue single-file component:\n![Extract Variable in Vue](./images/extract-variable-vue.gif)\n\n**Extract to Parameter**\n\nExtract to parameter in old jQuery, embedded in HTML:\n![Extract to Parameter in HTML](./images/extract-to-parameter-html.gif)\n\n**Inline Variable**\n\nInline variable in old jQuery, embedded in HTML:\n![Inline Variable in HTML](./images/inline-variable-html.gif)\n\n**Rename**\n\nRename in a Vue single-file component:\n![Rename in Vue](./images/rename-vue.gif)\n\n## Contributors and Thanks #\n\nCode contributions help introduce new behaviors and improve existing behaviors materially. I'd like to thank these contributors for their code contributions:\n\n- [Jason Kerney](https://github.com/jason-kerney)\n\nIt'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:\n\n- [Jenn Zenk](https://github.com/jzenk) -- Accessibility feedback\n- [Ashlee Boyer](https://twitter.com/AshleeMBoyer) -- Accessibility feedback\n\nAlso, every person who submitted a bug or enhancement on JS Refactor, and those who offer them on this project!\n\n## Find Me ##\n\nThe best place to find me is on Twitter: [@cm_stead](https://twitter.com/cm_stead)\nYou can also find me on the web: [ChrisStead.net](http://chrisstead.net/)\n\n## Known Issues and Expected Behaviors ##\n\nRename:\n\n- Renaming variables do not propagate to template HTML in Vue and Svelte\n\nConvert Ternary to If/Else Statement:\n\n- Only supports return statements, variable assignments, and standalone ternaries\n\nConvert Selected Functions to Class\n\n- Will not convert function expressions and arrow functions which are not part of a variable declaration -- all functions need to have names","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcmstead%2Fjs-codeformer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcmstead%2Fjs-codeformer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcmstead%2Fjs-codeformer/lists"}