MCPInstall

vscode-extension-guide

Guide for creating VS Code extensions and plugins from scratch through Marketplace publication. Use when developing a VS Code extension/plugin, adding commands or keybindings, building TreeView or Webview UI, publishing to Marketplace, or troubleshooting activation and packaging issues.

Installs
214
Last 24h
—
Trending rank
—
Security
Not audited

Install

Works with every agent the skills CLI supports.

npx skills add https://github.com/aktsmm/agent-skills --skill vscode-extension-guide
  1. 01

    Install

    Run the command in your project. The CLI asks which agents to install for.

  2. 02

    Describe the task

    Ask your agent for something this skill covers. It loads vscode-extension-guide automatically when relevant.

  3. 03

    Review the result

    The agent follows the SKILL.md steps, scripts and references bundled with the skill.

SKILL.md

The instructions your agent reads when the skill is triggered.

VS Code Extension Guide

Create, develop, and publish VS Code extensions.

For extensions with a management UI, default to a dedicated Activity Bar icon and sidebar unless another entry point is explicitly chosen. A Marketplace icon alone does not create that navigation; use the TreeView reference below.

For user-facing extensions, provide a clearly labeled bug-report/feature-request entry in the primary sidebar or management UI and a Command Palette fallback; a README or Marketplace link alone is insufficient. Preview minimal, non-sensitive metadata before opening a fixed feedback destination; leave submission to the user and never auto-attach prompts, raw logs, secrets or private paths.

When to Use

  • VS Code extension, extension development, vscode plugin
  • Creating a new VS Code extension from scratch
  • Adding commands, keybindings, or settings to an extension
  • Publishing to VS Code Marketplace

Quick Start

# Scaffold new extension (recommended)
npm install -g yo generator-code
yo code

# Or minimal manual setup
mkdir my-extension && cd my-extension
npm init -y && npm install -D typescript @types/vscode

Project Structure

my-extension/
├── package.json          # Extension manifest
├── src/extension.ts      # Entry point
├── out/                  # Compiled JS (gitignore)
├── artifacts/vsix/       # Keep local VSIX archives out of the repo root
├── images/icon.png       # 128x128 PNG for Marketplace
└── .vscodeignore         # Exclude files from VSIX

Building & Packaging

npm run compile      # Build once
npm run watch        # Watch mode (F5 to launch debug)
mkdir -p artifacts/vsix
npx @vscode/vsce package --out artifacts/vsix/my-extension-1.0.0.vsix

In PowerShell, replace mkdir -p artifacts/vsix with New-Item -ItemType Directory -Force -Path 'artifacts\vsix'; keep the other build/package commands. Choose shell syntax from the execution environment, not the agent host.

Keep local .vsix archives under artifacts/vsix/ instead of the repository root, and prune old local builds on a schedule so release artifacts do not pile up.

Done Criteria

  • The packaged VSIX installs and activates in an isolated profile; changed user-facing integrations complete their real workflow there
  • Primary sidebar entry and commands work; referenced icons are present in the VSIX
  • Package size < 5MB (use .vscodeignore)
  • README links and feedback UI reach the intended support destination; verify the UI-to-form path with synthetic data without submitting
  • Local VSIX artifacts stored outside the repo root and pruned regularly

Quick Troubleshooting

SymptomFix
Extension not loadingCheck main/engines.vscode; contributed commands/views activate implicitly (1.74+), add activationEvents only for other triggers
Command not foundMatch command ID in package.json/code
Shortcut not workingRemove when clause, check conflicts

Reference Map

TopicReference
AI Customizationreferences/ai-customization.md
Code Review Promptsreferences/code-review-prompts.md
Code Samplesreferences/ai-customization.md and references/webview.md
TreeViewreferences/treeview.md
Webviewreferences/webview.md
Testingreferences/testing.md
Publishingreferences/publishing.md
Troubleshootingreferences/troubleshooting.md
Notificationsreferences/notification-normalization.md

Best Practices

Extension Host 境界

  • Extension Host 上で動く scanner / provider / TreeView は、同じことができるなら Node 固有の path / Buffer / 生 fs より VS Code API を優先する。Problems と実ビルドの環境差を避けやすい。
  • 自分の拡張に同梱したリソースは、ユーザーのホーム配下や VS Code のインストール先を推測せず、context.extensionUri と vscode.Uri.joinPath など extension context から解決する。
  • 他の installed extension に同梱されたリソースを読む必要がある場合も、resources/agents|skills|prompts|instructions|hooks|mcp の既知 root と、manifest の chatAgents / chatPromptFiles 宣言を優先して見る。built-in resource とは別の read-only resource として扱い、削除や再インストール導線を混ぜない。
  • Runtime の診断ログは console.log に散らさず、Output Channel ベースの logger に集約する。ユーザーがログを開ける導線も command / notification / README のどこかに用意する。
  • 大きい入力の parse や集計を Extension Host スレッドで同期実行しない。上限付きの bytes を node:worker_threads へ渡し、cancel / opt-out では await worker.terminate() と listener 解除を済ませ、世代 ID が一致する結果だけで cache / UI を更新する。
  • transfer するのは専有した非 SharedArrayBuffer だけにし、transfer 後は送信側の view を使わない(同じ backing store の view はすべて detach される)。Buffer は pool を共有し得るので、offset 付き view や所有が曖昧な buffer は必要範囲だけを別 buffer へ copy して渡す。
  • worker や別プロセスから受け取った結果をそのまま cache / 表示しない。許可キー検査は Reflect.ownKeys、必須キーの存在確認は Object.hasOwn で行う(Object.keys は非列挙の own property を見逃し、in や素の property 参照は継承値を通す)。
  • 例外の Error.name や FileSystemError.code をそのままログ / UI へ出さない。既知 code の allowlist へ正規化し、未知は単一の汎用 code に落とす。path や token が名前に混ざるケースを防げる。
  • キャッシュや共有ファイル(別拡張が書く index など)から読んだ表示用の値は、使う地点で型を確認し、長さに上限を付ける。非文字列で replace 等が例外になる。正規化関数は冪等にし(切り詰めた後に trim する)、先に再現テストを赤にしてから直す。

Manifest / Docs / Localization

  • package.json の commands、views、configuration、menus を変えたら、コード上の command ID / setting key と同時に確認する。
  • Marketplace 表示や設定説明をローカライズしている拡張では、package.nls.json と対象言語の package.nls.*.json を同じ変更で更新する。
  • In markdownDescription, use native setting references such as `#editor.wordWrap#`, not [label](#editor.wordWrap#): the latter can leave a trailing hash in the Settings @id: filter. Guard each locale's syntax and verify the resolved target.
  • 設定の並び順や説明を変えたら README の設定表、manifest consistency test、release notes の必要有無までまとめて見る。

Language Model Tools

  • Extension-provided LM Tools need strong modelDescription intent phrases. Prefer Use when the user asks to ... plus natural-language verbs for create/update/delete/toggle paths, and add a manifest/doc guard so future wording changes do not silently weaken agent-mode tool selection.
  • For configuration from VS Code Chat, prefer native LM Tools when no external client is required; do not call them an external MCP server. Share validated domain operations with the GUI, expose only necessary actions, and use explicit enable/disable values rather than retry-sensitive toggles.
  • Keep prepareInvocation side-effect free and request confirmation for mutations or sensitive disclosure. Revalidate input, cancellation, trust and the queried revision inside the locked write after confirmation. Host approval UI/policies still apply; custom confirmation text is not a bypass. Never accept secret values through tool arguments or silently widen execution permissions.
  • Page query results and omit prompt, environment and raw-output payloads by default. Make sensitive detail retrieval explicit with disclosure confirmation; describe which metadata reaches the model and treat stored strings as data, not instructions.
  • Return typed outcomes from shared operations; a GUI handler that catches errors and returns nothing cannot prove a tool succeeded. Keep committed IDs/success when only presentation fails, return a sanitized warning and tell the caller to query rather than repeat the mutation. Configuration saved is not work executed.
  • Never pick a tool target from a name alone: resolve by exact name plus the IDs its search/list result shows (for example source and path); several matches or only a partial name return the candidates and change nothing. Schema enum values are not enforced at runtime, so an unrecognized value must stop the call, not widen the filter. An install refuses an existing destination unless an explicit overwrite flag is passed, then verifies the file at the destination the installer reports.
  • Before publishing an extension with LM Tools, inspect the packaged VSIX rather than trusting source files: confirm extension/package.json has the intended version, expected contributes.languageModelTools count, and no src/, test payloads, or sourcemaps unless intentionally shipped.

Generated Sections

  • START / END marker で囲む generated section は単一の SSOT として扱う。
  • 重複した marker pair を見つけたら、両方を残して追記せず、内容を統合して marker pair を1つに戻す。

命名の一貫性

公開前にパッケージ名・設定キー・コマンド名を統一:

項目例
パッケージ名copilot-scheduler
設定キーcopilotScheduler.enabled
コマンドIDcopilotScheduler.createTask
ビューIDcopilotSchedulerTasks

通知の一元管理

通知は共通helperへ集約し、設定値をruntimeで既知enumへ正規化する。重複抑止、ログとの分離、action、security、起動時の繰り返し失敗の一度きり通知の設計は Notification Normalization を参照する。

FAQ

What does the vscode-extension-guide skill do?

Guide for creating VS Code extensions and plugins from scratch through Marketplace publication. Use when developing a VS Code extension/plugin, adding commands or keybindings, building TreeView or Webview UI, publishing to Marketplace, or troubleshooting activation and packaging issues.

How do I install vscode-extension-guide?

Run npx skills add https://github.com/aktsmm/agent-skills --skill vscode-extension-guide in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/vscode-extension-guide/ (personal) or .claude/skills/vscode-extension-guide/ (project).

Which AI agents can use vscode-extension-guide?

Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.

Is vscode-extension-guide safe to install?

No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.

Who maintains vscode-extension-guide?

It is published by aktsmm in aktsmm/agent-skills. It has 214 recorded installs.

More from aktsmm/agent-skills

View all →

powerpoint-automation

aktsmm/agent-skills

Convert web articles or blog posts into slides through a content.json pipeline, translate or rebuild existing PPTX files onto a template, and edit an already-open PowerPoint deck with COM Automation (RefURL, overflow review). Use for article-to-slides conversion, deck translation, template-based rebuilds, or live COM editing of an open deck. Not for simply reading, inspecting, or lightly editing a .pptx file. Triggers on 記事をスライド化, スライド翻訳, 開いているパワポを編集, COM自動化, RefURL, content.json.

Docs & Writing2K installs

skill-finder

aktsmm/agent-skills

Search, install, and manage Agent Skills locally and from GitHub, then help decide whether the task really needs a skill or another customization primitive. Use when looking for skills, installing skills, managing a skill collection, or choosing between a skill, prompt, instruction, or agent.

AI & Agents679 installs

ocr-super-surya

aktsmm/agent-skills

GPU-optimized OCR using Surya. Use when extracting text from images/screenshots, recovering image-only content in PDFs or slides, or inspecting multilingual document layouts. Preserve source locations and report recognition gaps separately from verified text.

Docs & Writing558 installs

code-simplifier

aktsmm/agent-skills

Guide for simplifying and refining code after coding sessions. Use when cleaning up complex code, reviewing PRs for readability, or applying consistent refactoring patterns. Triggers on simplify code, refactor, clean up, code review, コード整理, リファクタ, 複雑さ削減, コードレビュー.

book-writing-workspace

aktsmm/agent-skills

Operate a reusable technical book manuscript workspace with writing structure, reader persona SSOT, review rules, and optional Markdown to Re:VIEW/PDF support. Use when organizing a book manuscript repo, defining or reviewing target readers, standardizing chapter/section files, setting writing/review agents, handling publisher proof comments, or assessing an existing writing workspace. Triggers on book writing workspace, reader persona, reader audience, 読者ペルソナ, persona SSOT, technical book project, 執筆ワークスペース, manuscript workflow, Re:VIEW workspace, proof PDF, annotated proof, publisher proof comments, 校正, 校正注釈, and 初校.

Docs & Writing235 installs

drawio-diagram-forge

aktsmm/agent-skills

Generate draw.io editable diagrams (.drawio, .drawio.svg) from text, images, or Excel. Orchestrates 3-agent workflow (Analysis → Manifest → SVG generation) with quality gates. Use when creating architecture diagrams, flowcharts, sequence diagrams, or converting existing images to editable format. Supports Azure/AWS cloud icons. Triggers on draw.io, drawio, ダイアグラム, アーキ図, フローチャート, シーケンス図.

Docs & Writing117 installs

Popular frontend & design skills

View category →

setup-matt-pocock-skills

mattpocock/skills

Configure this repo for the engineering skills: set up its issue tracker, triage label vocabulary, and domain doc layout. Run once before first use of the other engineering skills.

Frontend & Design1.1M installs

frontend-design

anthropics/skills

Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.

OfficialFrontend & Design1M installs

hyperframes-animation

heygen-com/hyperframes

All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreography (animation map) and 24 named text-animation effects. HyperFrames-native: single paused timeline, seek-safe, deterministic.

prototype

mattpocock/skills

Build a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a UI should look like.

Frontend & Design999.2K installs

hyperframes-core

heygen-com/hyperframes

The HyperFrames composition contract — build one renderable project. Use for composition structure, the data- timing attributes, class="clip", tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Read before writing composition HTML.

Frontend & Design930.5K installs

vercel-react-best-practices

vercel-labs/agent-skills

React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.

OfficialFrontend & Design843.1K installs