Skip to content

1. Scaffold the project

We start from an empty extension and grow it. The minimal preset gives us a clean slate — no sample panel to delete later.

Run it

Terminal window
vsceasy create \
--name todo-demo \
--displayName "Todo Demo" \
--description "A todo list built with vsceasy" \
--publisher demo \
--ui react \
--preset minimal

Output:

✓ Created todo-demo at todo-demo
Next steps:
cd todo-demo
bun install
bun run launch # builds + opens Extension Development Host

create then asks whether to init git and install dependencies. Say yes to both (or pass --git --install to skip the prompts). Then:

Terminal window
cd todo-demo

What got generated

todo-demo/
├─ .vscode/launch.json F5 launches the Extension Development Host
├─ package.json extension manifest + build scripts
├─ vsceasy.config.ts per-project defaults (publisher, ui, …)
├─ scripts/gen.ts the code generator (`bun run gen`)
├─ vite.config.ts builds the React webviews
└─ src/
├─ extension/extension.ts the activate() entry point
├─ commands/hello.ts one sample command
├─ webview/styles.css shared webview styling
└─ shared/
├─ api.ts RPC contracts (empty for now)
└─ vsceasy/ the runtime (bootstrap, rpc, define, client)

The pieces worth knowing up front:

FileWhat it does
src/extension/extension.tsCalls bootstrap(registry) — the single activate hook. You rarely edit it.
src/shared/vsceasy/The vendored runtime: definePanel, defineJob, the typed RPC bridge, the webview client. Generators import from here.
src/shared/api.tsOne TypeScript interface per panel. This is the contract shared by the extension host and the React UI — the source of end-to-end type safety.
scripts/gen.tsScans src/panels, src/commands, src/menus, src/jobs, builds a registry, and writes the contributes block of package.json. You run it via bun run gen.

Nothing here is locked away — every generated file lands in your src/ and is yours to edit.

The build scripts

package.json ships a handful of scripts you’ll use:

ScriptPurpose
bun run genRegenerate the registry + package.json contributions. Run after adding panels/commands/jobs.
bun run devWatch-build the extension and webviews. Press F5 in VS Code for the dev host.
bun run launchOne-shot build + open the Extension Development Host in a new window.

Next: add the database and the Todo model →