Two Real VS Code Extensions, Built with vsceasy (and What Each Feature Does)

That 3-minute lesson (audio in English and Spanish, with subtitles in both) isn't a mockup. Every VS Code frame in it is a real screen recording: two extensions I built with vsceasy, running in VS Code, doing real work. Real keystrokes, real tests, a real local LLM answering.

This post walks through what you see in the video and which part of the framework makes each piece possible.

What vsceasy is, in one paragraph

vsceasy is a CLI and a small framework for building VS Code extensions. It scaffolds a project with a React webview, a typed RPC bridge between the extension host and the webview, and file-based routing for panels, commands, menus and tree views. On top of that come a mini-ORM, an LLM client, editor-surface helpers (ghost text, typing guards, decorations) and a language project type for grammar-based extensions.

bunx @vsceasy/cli create my-extension

That gives you a working extension: a palette command, a webview panel, an RPC contract and a React UI, with package.json#contributes wired for you.

One file = one feature

This is the layout the scaffold generates:

src/
  extension/extension.ts
  commands/hello.ts                  → palette command
  panels/dashboard.ts                → webview panel
  shared/api.ts                      → RPC contract
  webview/panels/dashboard/App.tsx   → React UI

Drop a file into panels/, commands/, menus/ or treeViews/ and the generator registers it and updates contributes. You never hand-edit that block again.

Typed RPC: call the host like a function

The piece I'm happiest with. You declare one interface:

// shared/api.ts
export interface DashboardApi {
  listFiles(pattern: string): Promise<string[]>;
}

Implement it on the extension side:

// panels/dashboard.ts
export default definePanel<DashboardApi>({
  title: 'Dashboard',
  rpc: (vscode) => ({
    async listFiles(pattern) {
      const uris = await vscode.workspace.findFiles(pattern);
      return uris.map((u) => vscode.workspace.asRelativePath(u));
    },
  }),
});

And call it from React:

const files = await api.listFiles('**/*.ts'); // string[], fully typed

No postMessage, no message-name strings, no switch (msg.type). Rename a method and TypeScript tells you everywhere it breaks, on both sides.

Showcase 1: Code Trainer (type: ui)

Code Trainer teaches algorithms by making you actually type them. In the video, each vsceasy feature shows up in order:

• Sidebar tree views. The problem catalogue is grouped by interview pattern (arrays & hashing, two pointers, sliding window…) and shows live progress.
• React webviews. The Learn panel with the problem statement and the theory behind it is a React app themed with VS Code's own tokens, so it looks native in any theme.
• Commands and quick picks. You pick a language and a mode, and a session opens.
• Editor surface. In Typing target mode the reference solution is shown as ghost text, and a typing guard swallows every wrong key: only the correct character advances. WPM and accuracy update live in the panel and in the status bar. (In the recording: 197 WPM, 100% accuracy, 0 errors.)
• Real tests in a real terminal. Run tests runs bun test in a captured terminal: 3 pass.
• Local LLM + mini-ORM. When you finish, a local Ollama model writes a session summary. Sessions, streaks and weakest topics are persisted as ORM entities, so the dashboard just re-renders from them.
• Ask the coach. The chat panel and the sidebar share one conversation history. When the answer arrives in the panel, the sidebar updates at the same moment, through typed RPC events.

One idea from this project worth stealing: generated exercises are verified by running them. Every problem the model generates is written to a scratch directory and its tests run twice, against the reference solution (must pass) and against the starter (must fail). Anything else is rejected and regenerated. A model will happily produce tests that don't compile or that pass against an empty function, and no static check catches that.

Showcase 2: TOML (type: language)

Not every extension needs a webview. The TOML extension was scaffolded with:

vsceasy create toml-support --type language

That generates a TextMate grammar, language-configuration.json, snippets and a file icon, with no React and no RPC. In the video:

• Grammar + language config. Highlighting for .toml, plus Cargo.lock, poetry.lock, Pipfile and friends.
• Scoped token colors. Toggling them off and on changes only TOML. Instead of shipping a full color theme (which replaces the user's theme entirely), the extension recolors its own TextMate scopes, so everything else keeps looking the way the user chose.
• Snippets. table, kvstr, inline: type the prefix and tab through the placeholders.
• An opt-in file icon theme. An icon theme is global: activating one replaces all workbench file icons, not just .toml. So the extension ships one and lets you choose it, instead of hijacking your workbench on install.

vsceasy doctor checks that every grammar, snippet and icon referenced in package.json actually exists before you package.

Built for AI coding agents

If you build with Claude, Codex or Cursor, two entry points give the agent everything it needs:

• The whole documentation in one fetch: https://vsceasy.dev/llms.txt
• The CLI as a machine-readable spec: npx @vsceasy/cli ai-guide prints every command, flag, type and default as JSON.

So you can literally say "help me build a VS Code extension, read https://vsceasy.dev/llms.txt" and the agent scaffolds with real commands instead of guessing at boilerplate.

Try it

bunx @vsceasy/cli create my-extension
cd my-extension && bun install
bun run launch

• Docs: vsceasy.dev
• Showcase: vsceasy.dev/showcase
• GitHub: jairoFernandez/vsceasy

If you build something with it, open an issue or PR with the repo link and it goes on the showcase page. I'd love to see it.