Your IDE deserves better
summary
Claim: an editor extension written in JavaScript adds real refactorings to VS Code. It implements a class-to-function refactor for React, handles TypeScript types, and optionally rewrites lifecycle + setState into hooks conversion. Implementation uses Babel parser + traverse + types + core, registers a code-action provider, uses activation events, and applies batched edits through the VS Code API. Demo shows a new file created, imports wired, props preserved, and the refactor working end-to-end.
AI-written summary · about
chapters (17)
- 0:00Start
- 0:24Javascript Community Is Amazing
- 5:48Demo
- 6:15Extract a Component into a New File
- 7:05Parent Component into a Functional Component
- 7:15Converts a Class Component into a Functional Component
- 7:52Typescript
- 8:40Hooks
- 11:53Contribution Point
- 12:45Vs Code Javascript Sdk
- 15:17Code Action Provider
- 18:54Code Manipulation
- 19:06How Will We Implement the Code Modification
- 19:43Babble
- 21:09Abstract Syntax Tree
- 22:10Babel Parser
- 23:05Babel Traverse
related talks
58mWriting VS Code extensions for fun and profit
29mUpgrade Your Toolbox with IDE Extensions
01h 09mBabel: A refactoring tool
28mCode, Preview, Perfect: Building IDE for React Native
34mDemand More From Your JavaScript Editor
01h 04mWorkshop: Build your First VS Code Extension
19mBuilding a VS Code Extension
20mThey see me refactorin'. They hatin'