> Markdown version of [/videos/305-let-s-build-a-vs-code-extension-for-automated-refactorings?t=2016](https://www.wearedevelopers.com/videos/305-let-s-build-a-vs-code-extension-for-automated-refactorings?t=2016). Every page supports `.md` or `Accept: text/markdown`. Links point to the HTML versions so they work for humans too. Agent guide: [/agents.md](https://www.wearedevelopers.com/agents.md).

---

# Let's build a VS Code extension for automated refactorings

Stop manually refactoring deeply nested legacy code. Build a custom VS Code extension using abstract syntax trees to automate tedious transformations. Ship safer features with fast, isolated tests.

- **Speakers:** Nicolas Carlo
- **Event:** JavaScript Congress
- **Published:** November 23, 2021
- **Duration:** 1:40:08
- **URL:** https://www.wearedevelopers.com/videos/305-let-s-build-a-vs-code-extension-for-automated-refactorings

## Summary

Building a custom VS Code extension allows developers to construct automated tooling that handles tedious code transformations, specifically targeting deeply nested legacy JavaScript and TypeScript. The core narrative of this workshop traces the structural journey from scaffolding a boilerplate extension with Yeoman to implementing a complex automated refactoring tool that flattens code by introducing guard clauses. Because representing and mutating code purely as strings is incredibly fragile and error-prone, developers are guided to use abstract syntax trees (AST). Using tools like AST Explorer and the Babel toolchain, developers can confidently parse code strings into traversable data graphs, easily swap out target node typologies, and regenerate reliable syntax. Automating these precise structural changes radically reduces the load on a developer's working memory caused by convoluted state checks, enabling safer and more focused ongoing feature development.

A parallel but highly critical theme is applying strategic software architecture and test-driven development (TDD) to editor workflows. Many developers fall into the trap of writing painfully slow integration tests that depend heavily on the entire VS Code API environment. Instead, isolating the core domain logic into pure transformation functions fundamentally separates structural AST logic from I/O operations. This hexagonal-style architecture unlocks the ability to run lightning-fast, isolated Mocha tests that provide immediate, pure verification. Refactoring the test experience itself by creating custom test assertions and reporters drastically reduces terminal noise, further dropping cognitive overhead. Ultimately, separating the structural preparation from feature deployment perfectly embodies the definitive methodology of refactoring: applying automated tools to "first make the change easy... and then it's easy to do the change."

**Keywords:** vs code extension scaffolding, automated javascript refactoring, ast manipulation, babel ast tooling, string-based code manipulation, nested code cognitive load, automated guard clause refactoring, test-driven extension development, domain logic decoupling, hexagonal architectural patterns, isolated mocha testing, ast explorer syntax mapping, vs code api implementation, legacy typescript modernization

## Chapters

1. **Customizing the development environment with VS Code extensions** (00:02) — Building dedicated tooling automates repetitive tasks specific to team workflows or technologies.
1. **Scaffolding a new VS Code extension with Yeoman generator** (06:28) — Using a scaffolding tool generates the required boilerplate quickly to start coding the core logic.
1. **Understanding boilerplate files and running the test extension** (10:56) — Reviewing the generated structure clarifies how commands are registered and executed in the development host.
1. **Reading and writing code using the VS Code API** (16:59) — Interacting with the active text editor enables reading existing code and writing modifications back.
1. **Implementing keybindings to trigger editor extension commands** (24:27) — Binding commands to a keyboard shortcut removes the friction of manually selecting actions.
1. **Leveraging abstract syntax trees for reliable code transformation** (27:05) — Representing code as a structural graph solves the impossibility of scaling regular expressions for complex syntax.
1. **Transforming abstract syntax trees using Babel parsers and generators** (33:36) — Utilizing parsing libraries allows safe traversal and mutation of code without breaking valid syntax.
1. **Understanding structural code refactorings over simple behavioral changes** (40:16) — Executing pure refactorings changes code structure to simplify changes cleanly without altering runtime behavior.
1. **Designing pure functions for fast isolated extension testing** (47:11) — Decoupling transformation logic from editor APIs guarantees fast test execution without spawning instances.
1. **Writing test-driven implementations for automatic guard clause refactorings** (52:46) — Using a test-driven approach clarifies the expected input and output structures for building robust refactorings.
1. **Unwrapping alternate block statements using AST node traversal** (62:12) — Extracting nodes from an alternate body block automates the manual effort of flattening nested conditions.
1. **Handling edge cases in code statements without block braces** (65:22) — Adding test assertions for undocumented syntactic styles ensures extensions handle wildly unstructured inputs safely.
1. **Extracting custom test assertions for scalable string comparisons** (70:46) — Creating specialized assertion helpers reduces duplication and improves debugging error messages for template strings.
1. **Packaging the extension for the VS Code marketplace publication** (74:50) — Preparing a distribution file makes it simple to share custom enhancements across a team locally or publicly.
1. **Answering common questions on extension security and testing architectures** (76:14) — Evaluating dependencies and separating logic via domain interfaces mitigates risks when deploying to open marketplaces.

## Related Moments

- [Eliminating live coding risks with visual studio code extensions](https://www.wearedevelopers.com/videos/1766-devs-vs-marketers-cobol-and-copilot-make-live-coding-easy-and-more-the-best-of-live-2025-part-3) (from "Devs vs. Marketers, COBOL and Copilot, Make Live Coding Easy and more - The Best of LIVE 2025 - Part 3")
- [Developing visual studio code extensions for personal productivity](https://www.wearedevelopers.com/videos/1713-wearedevelopers-live-demo-time-live-coding-end-to-end-testing-and-more) (from "WeAreDevelopers LIVE - Demo Time, Live Coding, End-to-End Testing and more")
- [Automating live coding presentations with vs code extensions](https://www.wearedevelopers.com/videos/1713-wearedevelopers-live-demo-time-live-coding-end-to-end-testing-and-more) (from "WeAreDevelopers LIVE - Demo Time, Live Coding, End-to-End Testing and more")
- [Rethinking developer environments with conversational code assistance](https://www.wearedevelopers.com/videos/1332-google-gemini-open-source-and-deep-thinking-models-sam-witteveen) (from "Google Gemini: Open Source and Deep Thinking Models - Sam Witteveen")
- [Improving developer workflows with auxiliary tools](https://www.wearedevelopers.com/videos/740-the-power-of-cloud-development-kit-cdk-how-to-get-the-most-out-of-it) (from "The power of Cloud Development Kit (CDK): How to get the most out of it")
- [Embracing code generation and modern editor evolution](https://www.wearedevelopers.com/videos/1403-five-things-in-tech-that-matter-and-we-have-to-make-work) (from "Five things in tech that matter and we have to make work")

## Related Articles

- [7 VSCode Extensions That Actually Make You More Efficient (2025 Edition)](https://www.wearedevelopers.com/magazine/587-7-vscode-extensions-that-actually-make-you-more-efficient-2025-edition)
- [19 Great VS Code Extensions](https://www.wearedevelopers.com/magazine/201-19-great-vs-code-extensions)
- [Dev Digest 136 - No JS(on) of mine](https://www.wearedevelopers.com/magazine/482-dev-digest-136-no-js-on-of-mine)
- [How to Avoid Over-Engineering](https://www.wearedevelopers.com/magazine/546-how-to-avoid-over-engineering)

## Related Jobs

- [Senior Software Engineer](https://www.wearedevelopers.com/jobs/ext/15942-senior-software-engineer) at **GitHub**
- [Staff Developer Advocate, GitHub Security Lab](https://www.wearedevelopers.com/jobs/ext/1921051-staff-developer-advocate-github-security-lab) at **GitHub**
- [Software Engineer](https://www.wearedevelopers.com/jobs/ext/1304673-software-engineer) at **Bitpanda**
- [Senior Software Engineer, Enterprise Products](https://www.wearedevelopers.com/jobs/ext/1841248-senior-software-engineer-enterprise-products) at **GitHub**
- [Staff Frontend Engineer (Expert+/Lead equivalent) - Hybrid working model, 100%, Ho Chi Minh City](https://www.wearedevelopers.com/jobs/48314-staff-frontend-engineer-expert-lead-equivalent-hybrid-working-model-100-ho-chi-minh-city) at **SMG Swiss Marketplace Group**
- [Senior Software Engineer, Client Apps Platform](https://www.wearedevelopers.com/jobs/ext/1773893-senior-software-engineer-client-apps-platform) at **GitHub**