Let's build a VS Code extension for automated refactorings

Stop refactoring JavaScript manually. Learn to build a VS Code extension that uses ASTs to automate code improvements safely and reliably.

#1about 10 minutes

Scaffolding your first VS Code extension project

Use the Yeoman generator (`yo code`) to quickly create the boilerplate for a new TypeScript-based VS Code extension.

#2about 6 minutes

Running and debugging your first extension

Explore the generated project structure, including `package.json` contributions and the `extension.ts` activation file, then run it in the Extension Development Host.

#3about 10 minutes

Reading and writing code using the VS Code API

Access the active editor's content using `window.activeTextEditor` and modify it programmatically with `editor.edit()`, then add a keybinding for quick access.

#4about 13 minutes

Manipulating code reliably with Abstract Syntax Trees

Overcome the limitations of string manipulation by using Babel to parse code into an Abstract Syntax Tree (AST), traverse it, and generate transformed code.

#5about 7 minutes

Understanding the principles of safe automated refactoring

Learn Martin Fowler's definition of refactoring and see how automating small, behavior-preserving changes like "introduce guard clauses" improves code quality.

#6about 15 minutes

Test-driving the refactoring logic with Mocha

Set up an isolated testing environment with Mocha to test the pure transformation logic, enabling a fast feedback loop with Test-Driven Development (TDD).

#7about 23 minutes

Implementing the refactoring using AST manipulation

Write the logic to identify and transform a nested `if` statement into a guard clause by manipulating its AST nodes and handling different code patterns.

#8about 1 minute

Packaging and publishing your VS Code extension

Use the `vsce` command-line tool to package your extension into a `.vsix` file for private sharing or for publishing to the official VS Code Marketplace.

#9about 6 minutes

Recap and resources for advanced extension development

Review the key steps for building an extension and explore advanced topics like hexagonal architecture for testing and contributing to open-source projects.

#10about 8 minutes

Q&A on extensions, testing, and development tools

The speaker answers audience questions about the VS Code extension ecosystem, security concerns, testing strategies, and using tools like GitHub Copilot.