Copilot Guide — VS Code Extension

A developer productivity tool that surfaces coding guidelines, architecture patterns, and secure coding rules directly inside VS Code. Integrates with GitHub Copilot Chat as a registered participant (@guide) and provides a persistent sidebar webview panel.

Features

How to Use

1. Open the Sidebar

Click the Copilot Guide icon in the VS Code Activity Bar (book icon) to open the sidebar panel.

2. Browse Guidelines

• Use the search bar at the top to filter guidelines by keyword.
• Click a category pill (react, typescript, architecture, secure-coding, performance, custom) to filter by topic.
• Click any guideline card to expand it and see the bad/good code examples.
• Click "Insert at cursor" on an expanded card to inject the preferred code into your active editor.

3. Use @guide in Copilot Chat

Open GitHub Copilot Chat (Ctrl+Alt+I) and type @guide followed by your request.

Search for guidelines:

@guide /search how should I handle auth tokens?
@guide /category react

Generate code using guidelines as context:

@guide make a React higher-order component that accepts any component and adds a logger
@guide create a custom hook for fetching data with error handling
@guide write a TypeScript utility type for deep partial

When you use an action verb (make, create, build, generate, write, implement, etc.), the extension automatically:

1. Finds relevant guidelines for your request
2. Sends them as rules to GitHub Copilot
3. Streams back generated code that follows your team's standards
4. Appends the matched guidelines below the code so you can see what was applied

4. Add Custom Guidelines

You can save your own team-specific guidelines that persist on your machine:

1. In the sidebar, click the + Add button next to the search bar.
2. Fill in the form:
   • Title (required) — short name for the rule, e.g. Always wrap API calls in try/catch
   • Category — pick from the existing categories or use custom
   • Severity — info, warning, or error
   • Description (required) — explain the rule and why it matters
   • Avoid — optional code snippet showing the anti-pattern
   • Prefer — optional code snippet showing the correct approach
   • Tags — comma-separated keywords used for search, e.g. error-handling, async, api
3. Click Save Guideline.

Your custom guideline appears in the list immediately and is saved to your machine (globalStorage/custom-guidelines.json). It will persist across VS Code sessions and workspaces.

To delete a custom guideline, expand it and click the ✕ button in the card title.

Custom guidelines are also picked up by @guide in Copilot Chat — if your query matches a custom guideline's title, description, or tags, it will be used as context for code generation.

5. Audit Selected Code

1. Select a block of code in the editor.
2. Right-click → Copilot Guide: Audit Selection.
3. The Audit tab in the sidebar shows any detected anti-patterns with descriptions and suggested fixes.

6. Hover Tips

Hover over known anti-patterns in TypeScript/JavaScript files (e.g. dangerouslySetInnerHTML, eval(, innerHTML =) to see an inline warning with the relevant guideline.

Project Structure

copilot-guide/
├── src/                  # Extension host (Node.js / VS Code API)
│   ├── extension.ts      # activate() / deactivate() only
│   ├── chatParticipant.ts
│   ├── commands/
│   ├── providers/
│   ├── services/
│   └── utils/
├── webview/              # React 18 sidebar UI
│   └── src/
│       ├── components/
│       ├── hooks/
│       ├── store/        # Zustand
│       └── styles/
├── guidelines/           # JSON guideline library
│   ├── coding/
│   └── secure-coding/
└── dist/                 # Compiled output (gitignored)

Getting Started

Prerequisites

• Node.js 20+
• VS Code 1.85+
• GitHub Copilot extension installed and signed in

Install & Build

# Install extension host deps
npm install

# Install & build webview
cd webview && npm install && npm run build && cd ..

# Build extension host
npm run build

Run in Development

Press F5 in VS Code (uses .vscode/launch.json).

Or watch mode:

npm run dev                    # webpack watch (extension host)
cd webview && npm run dev      # vite dev server (webview)

Run Tests

npm test

Package

npm run package
# Produces copilot-guide-0.0.1.vsix

Install the .vsix in VS Code via Extensions → Install from VSIX.

Adding a New Built-in Guideline Category

1. Create guidelines/coding/<category>.json following the schema below
2. Add an entry to guidelines/index.json
3. Add the category to GuidelineCategory enum in src/types/index.ts

Guideline JSON Schema

{
  "id": "category-NNN",          // e.g. "react-001"
  "category": "react",           // must match a folder/enum value
  "severity": "info|warning|error",
  "title": "Max 80 chars",
  "description": "Plain text, no markdown",
  "bad": "// anti-pattern code example",
  "good": "// correct code example",
  "tags": ["lowercase", "hyphenated"],
  "references": ["https://..."],
  "copilotPrompt": "Optional prompt snippet"
}

Tech Stack

Security

• Strict Content Security Policy on all webview HTML
• All webview messages validated via isWebviewMessage() type guard
• No eval(), no raw innerHTML assignments
• Secrets via VS Code SecretStorage API only
• JSON guideline files validated at load time — bad files are skipped, not thrown

Configuration

Last updated: May 2026 — Anup Kumar Patra