Sefism is free for learners. We are here to help you grow, one step at a time.Join for free
Sefism.

Project structure · More

VS Code extension project structure

Opens with credits

A TypeScript extension for Visual Studio Code, built from the official Yeoman generator with esbuild bundling. The example, TODO Lens, finds TODO comments and shows them in a tree view, with commands, settings and editor decorations. The tree grows from the generator's Hello World into commands, providers and editor-free core logic, then tests on three operating systems, publishing to the Marketplace and Open VSX, and a webview with a strict security policy. For students who use VS Code every day and want to build a tool other developers install.

Curated by Tauseef FayyazIntermediate130 files and foldersVS Code 1.140 (engines ^1.105 shown), generator-code 1.12, TypeScript 6 (from the generator)Checked October 2026
Explore the filesPick any file to see what it is, why it exists and when you add it.

How it grows

Each stage opens the explorer there

  1. 1Day 1What the scaffold and your first hour give you25 files and folders
  2. 2GrowingWhat a real app with features and tests adds+41 files and folders
  3. ProductionWhat running it for real users adds+25 files and foldersOpens with credits
  4. ExpertWhat a team needs to keep it healthy for years+39 files and foldersOpens with credits

How it is organised

  • package.json is half the extension. Its `contributes` section declares every command, setting, view, menu and keybinding, and VS Code reads it before running any of your code. TypeScript implements what package.json promises; the ids must match exactly.
  • Activate late and fast. Rely on the activation events VS Code generates from your contributions (a command, a view), avoid `*` and `onStartupFinished` unless you really need them, and keep `activate` to registering things.
  • Every listener, command and provider returns a Disposable. Push each one into `context.subscriptions`, so VS Code cleans up after you.
  • Keep logic that does not need the editor in `src/core`, with no `vscode` import. It is unit tested in milliseconds and can move into a CLI or language server later. Only `commands/` and `providers/` talk to the VS Code API.
  • Use the VS Code APIs for files and settings (`workspace.fs`, `getConfiguration`), not Node's fs and your own JSON files, so the extension works in remote, WSL, container and web workspaces.
  • Bundle with esbuild into one `dist/extension.js` and ship only that. A bundled extension activates faster and the .vsix stays small; `.vscodeignore` keeps sources, tests and node_modules out.
  • Prefer built-in UI (tree views, quick picks, CodeLens, notifications) over webviews. When you do need a webview, give it a strict Content Security Policy and validate every message.
  • Publish from CI only, to both the Marketplace and Open VSX, with a CHANGELOG users can read. Respect the user's telemetry setting and never collect code or file paths.

At the top of the project

Open one in the explorer for the full story

Learn more on Sefism

Roadmaps, cheat sheets and projects that go with VS Code extension.

See 8 more
Checked against 16 official sources, October 2026. If something has changed, the docs win.Show sources

Best practices and checklists for this stack

Picked from the other libraries by shared topics.

Best practices

See all

Checklists

See all
Work with me

Stuck on something specific?

Writing only gets you so far. If you want an answer to your situation rather than the general case, book a session and we will work through it together. Sessions are free for approved Sefism members, and a few slots open each week.

  • 1:1 Mentorship
  • Fresh Graduate Mentorship
  • Career Guidance
Book a free sessionSee all services

Brand deals, promos and partnerships: tauseeffayyaz@gmail.com