Code Walkthrough

Guided, highlighted code walkthroughs inside your editor, powered by Claude Code. Recorridos guiados de código resaltados en tu editor, con Claude Code.

English · Español ↓

You ask in plain language; Claude Code explains your code and highlights & scrolls your editor to whatever it's talking about — line by line, function by function, or following a flow across files.

Code Walkthrough — line by line

Line by line — Claude marks each line, explains it, and waits for your “next”.

Code Walkthrough — function by function

…or function by function — it lists the symbols and walks one at a time.

English

Requirements

VS Code 1.120+
Claude Code — the reasoning runs on your own Claude subscription.

Install

Install Code Walkthrough from the Extensions view (search “Code Walkthrough”), the VS Marketplace, or Open VSX.
Run the command Code Walkthrough: Install Claude Code Integration (⇧⌘P / Ctrl+Shift+P). It connects Claude Code to the extension and asks where: Global (all projects) or This project.

That's all — a small local server starts automatically (a compass icon appears in the status bar).

Use it

Open the file you want to understand.
In the integrated terminal run claude (or use the Claude Code panel) and ask, e.g. “walk me through this file.”
Claude explains in the chat and highlights and scrolls your editor to each part. Drive it however you like:

You say…	What happens
“Walk me through this file”	Asks your granularity, highlights the first part and explains it.
“Line by line” / “function by function”	Sets the step size — one line, or a whole function, per step.
“Next”	Moves the highlight to the next part.
“Jump to the `handler` function”	Reveals and highlights that symbol.
“Explain the request flow from the route to the DB”	Walks the path file by file, highlighting each hop.
“Why is this here?”	Answers in context about the highlighted code.

To dismiss a highlight, click ✕ Clear above it (a CodeLens) or the button in the editor's title bar.

Good to know

It only highlights, reveals and scrolls — it never edits your code. Safe to run on anything.
Everything runs locally (127.0.0.1); the extension doesn't send your code anywhere — the reasoning is Claude Code, on your own subscription.
UI available in English and Spanish (follows your VS Code display language).

Commands (`⇧⌘P`)

Install / Uninstall Claude Code Integration
Start / Stop / Restart Server
Clear Highlights
Copy MCP Server URL — handy when running several VS Code windows.

Settings

Setting	Default	What it does
`walkthroughMcp.port`	`8771`	Local port (bound to `127.0.0.1`). If it's busy, the next free port is used automatically.
`walkthroughMcp.autoStart`	`true`	Start the server when VS Code opens.
`walkthroughMcp.highlightColor`	`rgba(255, 221, 0, 0.25)`	Highlight color.

Español

Recorridos guiados de código resaltados en tu editor, con Claude Code: preguntás en lenguaje natural y Claude Code explica tu código y resalta/desplaza tu editor a lo que está hablando — línea por línea, función por función, o siguiendo un flujo entre archivos.

Requisitos

VS Code 1.120+
Claude Code — el razonamiento corre con tu suscripción de Claude.

Instalar

Instalá Code Walkthrough desde la vista de Extensiones (buscá “Code Walkthrough”), el VS Marketplace o Open VSX.
Corré el comando Code Walkthrough: Instalar integración con Claude Code (⇧⌘P). Conecta Claude Code con la extensión y te pregunta dónde: Global (todos los proyectos) o Este proyecto.

Listo — un server local chiquito arranca solo (aparece un ícono de brújula en la barra de estado).

Usarlo

Abrí el archivo que querés entender.
En la terminal integrada corré claude (o usá el panel de Claude Code) y pedí, por ej. “hacé un walkthrough de este archivo.”
Claude explica en el chat y resalta y hace scroll en tu editor a cada parte. Lo manejás como quieras:

Vos decís…	Qué pasa
“Hacé un walkthrough de este archivo”	Pregunta la granularidad, resalta la primera parte y la explica.
“Línea por línea” / “función por función”	Fija el tamaño del paso — una línea, o una función entera, por paso.
“Siguiente”	Mueve el resaltado a la siguiente parte.
“Saltá a la función `handler`”	Revela y resalta ese símbolo.
“Explicá el flujo del request desde la ruta hasta la DB”	Recorre el camino archivo por archivo, resaltando cada salto.
“¿Por qué está esto acá?”	Responde en contexto sobre el código resaltado.

Para quitar un resaltado, clickeá ✕ Clear encima (un CodeLens) o el botón en la barra de título del editor.

Bueno saber

Solo resalta, revela y hace scroll — nunca edita tu código. Seguro para correr en cualquier cosa.
Todo corre local (127.0.0.1); la extensión no manda tu código a ningún lado — el razonamiento es Claude Code, con tu suscripción.
UI en inglés y español (sigue el idioma de tu VS Code).

Comandos (`⇧⌘P`)

Instalar / Desinstalar integración con Claude Code
Iniciar / Detener / Reiniciar servidor
Limpiar resaltados
Copiar URL del MCP server — útil con varias ventanas de VS Code abiertas.

Settings

Setting	Default	Qué hace
`walkthroughMcp.port`	`8771`	Puerto local (bind a `127.0.0.1`). Si está ocupado, usa el próximo libre automáticamente.
`walkthroughMcp.autoStart`	`true`	Arranca el server al abrir VS Code.
`walkthroughMcp.highlightColor`	`rgba(255, 221, 0, 0.25)`	Color del resaltado.

Development

Open source (MIT). Build from source: npm install → npm run build → npm run package. Releases publish to the VS Marketplace and Open VSX automatically when a version bump is merged to main.

License

MIT

Code Walkthrough

FABIAN LEONARDO JANUSZEWSKI

Code Walkthrough

English

Requirements

Install

Use it

Good to know

Commands (⇧⌘P)

Settings

Español

Requisitos

Instalar

Usarlo

Bueno saber

Comandos (⇧⌘P)

Settings

Development

License

Commands (`⇧⌘P`)

Comandos (`⇧⌘P`)