Loading...
Loading...
Guide for creating VS Code extensions from scratch to Marketplace publication. Use when: (1) Creating a new VS Code extension, (2) Adding commands, keybindings, or settings to an extension, (3) Publishing to VS Code Marketplace, (4) Troubleshooting extension activation or packaging issues, (5) Building TreeView or Webview UI, (6) Setting up extension tests.
npx skill4agent add aktsmm/agent-skills vscode-extension-guide# 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/vscodemy-extension/
├── package.json # Extension manifest (CRITICAL)
├── src/extension.ts # Entry point
├── out/ # Compiled JS (gitignore)
├── images/icon.png # 128x128 PNG for Marketplace
└── .vscodeignore # Exclude files from VSIXnpm run compile # Build once
npm run watch # Watch mode (F5 to launch debug)
npx @vscode/vsce package # Creates .vsix.vscodeignore| Symptom | Fix |
|---|---|
| Extension not loading | Add |
| Command not found | Match command ID in package.json/code |
| Shortcut not working | Remove |
| Topic | Reference |
|---|---|
| AI Customization | references/ai-customization.md |
| Code Review Prompts | references/code-review-prompts.md |
| Code Samples | references/code-samples.md |
| TreeView | references/treeview.md |
| Webview | references/webview.md |
| Testing | references/testing.md |
| Publishing | references/publishing.md |
| Troubleshooting | references/troubleshooting.md |
| 項目 | 例 |
|---|---|
| パッケージ名 | |
| 設定キー | |
| コマンドID | |
| ビューID | |
type NotificationMode = "sound" | "silentToast" | "silentStatus";
function getNotificationMode(): NotificationMode {
const config = vscode.workspace.getConfiguration("myExtension");
return config.get<NotificationMode>("notificationMode", "sound");
}
function notifyInfo(message: string, timeoutMs = 4000): void {
const mode = getNotificationMode();
switch (mode) {
case "silentStatus":
vscode.window.setStatusBarMessage(message, timeoutMs);
break;
case "silentToast":
void vscode.window.withProgress(
{ location: vscode.ProgressLocation.Notification, title: message },
async () => {},
);
break;
default:
void vscode.window.showInformationMessage(message);
}
}
function notifyError(message: string, timeoutMs = 6000): void {
const mode = getNotificationMode();
if (mode === "silentStatus") {
vscode.window.setStatusBarMessage(`⚠ ${message}`, timeoutMs);
console.error(message);
return;
}
void vscode.window.showErrorMessage(message);
}notificationMode