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 Chris Heilmann +9 · LIVE

3:14 min

Developing visual studio code extensions for personal productivity

Chris Heilmann Chris Heilmann +2 · LIVE

10:16 min

Automating live coding presentations with vs code extensions

Chris Heilmann 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 · World Congress 2023

1:30 min

Embracing code generation and modern editor evolution

Christian Heilmann Christian Heilmann · World Congress 2025

More from JavaScript Congress

The Eternal Sunshine of the Zero Build Pipeline thumbnail
50:10
almost 5 years ago

The Eternal Sunshine of the Zero Build Pipeline

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

Teini - an extremely small webshop leveraging awesome and free tech

Christian K

Native Web Apps: Are We There Yet? thumbnail
44:40
almost 5 years ago

Native Web Apps: Are We There Yet?

Maxim Salnikov

Modern Web Development with Nuxt3 thumbnail
41:43
almost 5 years ago

Modern Web Development with Nuxt3

Alexander Lichter

Making neural networks portable with ONNX thumbnail
54:49
almost 5 years ago

Making neural networks portable with ONNX

Ron Dagdag

JavaScript the Grumpy Parts thumbnail
46:08
almost 5 years ago

JavaScript the Grumpy Parts

Rob Richardson

Related videos

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

Behind the Scenes of Building VS Code - Harald Kirschner

Harald Kirschner

Keep your code refactorable thumbnail
26:46
World Congress 2022 • over 4 years ago

Keep your code refactorable

Gerrit Stapper

Building software that scales with Typescript thumbnail
37:18
World Congress 2022 • over 4 years ago

Building software that scales with Typescript

Tal Joffe

Practical tips for keeping your C# code base clean thumbnail
22:48
World Congress 2026 Europe • 3 months ago

Practical tips for keeping your C# code base clean

Dennis Doomen

Refactoring in the Age of AI thumbnail
24:46
World Congress 2026 Europe • 3 months 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.