WeAreDevelopers Logo WeAreDevelopers
Sign in
For You LIVE
JavaScript Congress • Nov 23, 2021

Let's build a VS Code extension for automated refactorings

Nicolas Carlo

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.

Pause
Mute Enter Fullscreen
#1 about 7 min

Customizing the development environment with VS Code extensions

Building dedicated tooling automates repetitive tasks specific to team workflows or technologies.

#2 about 5 min

Scaffolding a new VS Code extension with Yeoman generator

Using a scaffolding tool generates the required boilerplate quickly to start coding the core logic.

#3 about 7 min

Understanding boilerplate files and running the test extension

Reviewing the generated structure clarifies how commands are registered and executed in the development host.

#4 about 8 min

Reading and writing code using the VS Code API

Interacting with the active text editor enables reading existing code and writing modifications back.

#5 about 3 min

Implementing keybindings to trigger editor extension commands

Binding commands to a keyboard shortcut removes the friction of manually selecting actions.

#6 about 7 min

Leveraging abstract syntax trees for reliable code transformation

Representing code as a structural graph solves the impossibility of scaling regular expressions for complex syntax.

#7 about 7 min

Transforming abstract syntax trees using Babel parsers and generators

Utilizing parsing libraries allows safe traversal and mutation of code without breaking valid syntax.

#8 about 7 min

Understanding structural code refactorings over simple behavioral changes

Executing pure refactorings changes code structure to simplify changes cleanly without altering runtime behavior.

#9 about 6 min

Designing pure functions for fast isolated extension testing

Decoupling transformation logic from editor APIs guarantees fast test execution without spawning instances.

#10 about 10 min

Writing test-driven implementations for automatic guard clause refactorings

Using a test-driven approach clarifies the expected input and output structures for building robust refactorings.

#11 about 4 min

Unwrapping alternate block statements using AST node traversal

Extracting nodes from an alternate body block automates the manual effort of flattening nested conditions.

#12 about 6 min

Handling edge cases in code statements without block braces

Adding test assertions for undocumented syntactic styles ensures extensions handle wildly unstructured inputs safely.

#13 about 5 min

Extracting custom test assertions for scalable string comparisons

Creating specialized assertion helpers reduces duplication and improves debugging error messages for template strings.

#14 about 2 min

Packaging the extension for the VS Code marketplace publication

Preparing a distribution file makes it simple to share custom enhancements across a team locally or publicly.

#15 about 24 min

Answering common questions on extension security and testing architectures

Evaluating dependencies and separating logic via domain interfaces mitigates risks when deploying to open marketplaces.

Matching moments

5:43 min

Eliminating live coding risks with visual studio code extensions

Chris Heilmann +9 · LIVE

3:14 min

Developing visual studio code extensions for personal productivity

Chris Heilmann +2 · LIVE

10:16 min

Automating live coding presentations with vs code extensions

Chris Heilmann +2 · LIVE

3:13 min

Rethinking developer environments with conversational code assistance

Sam Witteveen · Coffee With Developers

1:11 min

Improving developer workflows with auxiliary tools

Alexander Bubeck · WWC 2023

1:30 min

Embracing code generation and modern editor evolution

Christian Heilmann Christian Heilmann · WWC 2025

More from JavaScript Congress

The Eternal Sunshine of the Zero Build Pipeline thumbnail
50:10
over 4 years ago

The Eternal Sunshine of the Zero Build Pipeline

Teini - an extremely small webshop leveraging awesome and free tech thumbnail
40:45
over 4 years ago

Teini - an extremely small webshop leveraging awesome and free tech

Christian K

Native Web Apps: Are We There Yet? thumbnail
44:40
over 4 years ago

Native Web Apps: Are We There Yet?

Maxim Salnikov

Modern Web Development with Nuxt3 thumbnail
41:43
over 4 years ago

Modern Web Development with Nuxt3

Alexander Lichter

Making neural networks portable with ONNX thumbnail
54:49
over 4 years ago

Making neural networks portable with ONNX

Ron Dagdag

JavaScript the Grumpy Parts thumbnail
46:08
over 4 years ago

JavaScript the Grumpy Parts

Rob Richardson

Upcoming sessions on this topic

Open session

World Congress 2026 North America

Beyond Vibe Coding: Using CLI Tools as Your AI Counterpart in Pair Programming

Ron Veen

Java enthusiast and Special agent for Team Rockstars IT

Ron Veen
Open session

World Congress 2026 North America

When Humans Stop Writing Code: Rethinking Languages, Compilers, and Responsibility

Simon Auer

Organizer of flutter vienna meetup and CEO of marqably

Simon Auer
Open session

World Congress 2026 North America

GitHub’s Team X-Ray: Your Repository Knows More About Your Team Than Your Team Does

Andrea Griffiths

Senior Developer Advocate

Andrea Griffiths
Open session

World Congress 2026 North America

Don’t kill my Vibes - Simple Steps to Stay Secure when Vibe Coding

Isaac Evans

Co-founder & CEO of Semgrep

Isaac Evans
Open session

World Congress 2026 North America

The spectrum of agentic coding: From vibe coding to high-quality software engineering

YK Sugi

Developer Experience Manager at Eventual

YK Sugi
Open session

World Congress 2026 North America

Vibe Coding Accessibility

Karl Groves

Focused on actively fixing accessibility

Karl Groves

Related videos

Behind the Scenes of Building VS Code - Harald Kirschner thumbnail
32:38
Coffee With Developers • 2 months ago

Behind the Scenes of Building VS Code - Harald Kirschner

Harald Kirschner

Keep your code refactorable thumbnail
26:46
WWC 2022 • about 4 years ago

Keep your code refactorable

Gerrit Stapper

Building software that scales with Typescript thumbnail
37:18
WWC 2022 • about 4 years ago

Building software that scales with Typescript

Tal Joffe

Practical tips for keeping your C# code base clean thumbnail
22:48
WWC Europe 2026 • about 1 month ago

Practical tips for keeping your C# code base clean

Dennis Doomen

Refactoring in the Age of AI thumbnail
24:46
WWC Europe 2026 • about 1 month ago

Refactoring in the Age of AI

Dominik Srednicki, Elena Lucarelli

TDD for Vue.js Developers thumbnail
58:26
LIVE • over 3 years ago

TDD for Vue.js Developers

Markus Oberlehner

Related articles

From learning to earning

Jobs that call for the skills explored in this talk.