Building a VS Code Extension
summary
Built during a 52-hour hackathon by a six‑engineer team, this VS Code extension analyzes TypeScript via the TypeScript language server and renders three visual tools: class hierarchy, constructor dependency graphs, and recursive reference graphs in a webview. It embeds Lucidchart’s canvas but ships as a standalone .vsix (no license required), debugs in an Extension Development Host, ties commands in package.json to right‑click menus, and is production‑usable internally after one sprint.
AI-written summary · about
chapters (15)
- 0:00Start
- 1:57Story: the problem with text-based code
- 2:30Story: the solution is visual code
- 3:18Story: the annual Lucid Hackathon
- 4:19Story: post-hackathon sprint to internal use
- 5:26Demo: visualize class hierarchy
- 8:34Demo: visualize reference graphs
- 9:24Extensions: getting started
- 9:41Extensions: registering menu commands
- 11:52Extensions: displaying arbitrary html
- 13:20Extensions: communicating between extension and html
- 14:01Extensions: debugging your extension
- 14:42Extensions: packaging your extension
- 15:35Conclusion: future of my extension
- 16:19Conclusion: recources
related talks
58mWriting VS Code extensions for fun and profit
31mBuild My First VS Code Extension in 25 Minutes Flat
45mDevelopment of VSCode extensions
29mUpgrade Your Toolbox with IDE Extensions
01h 04mWorkshop: Build your First VS Code Extension
16mExtending VS Code, or How to Create Yourself a Back Office in 10 Minutes
32mThe Future is Soon: Migrating Trace Compass, or any plug-in to a VSCode Extension, for Theia!
41mVisual Studio Code