ai-hub
[en]es
[concept][changing]

Introduction to AI Extensions in VS Code

Copilot, Cody, and Continue bring LLMs directly into your editor. Learn how they work and how to pick the right one for your workflow.

// 6 min read · updated 2026-06

AI extensions turn VS Code into an assisted development environment where the editor doesn't just color your syntax — it understands your code, suggests entire lines, answers questions about your codebase, and even runs commands for you. Instead of tabbing between your editor and a web chat, you get an assistant that lives inside your workflow: it autocompletes as you type, explains functions without leaving the file, and can scaffold entire files from a natural language instruction.

Pro Tip: You don't need every AI extension. Pick one primary tool (Copilot or Cody are the most complete) and learn it well before trying others. Each extension has its own shortcuts and interaction model.

What is it

An AI extension for VS Code is a plugin that connects the editor to one or more LLMs through an API. It adds capabilities ranging from code autocompletion to fully autonomous task execution — all without leaving the editor.

The most common features:

  • Inline autocompletion: as you type, the extension suggests the next line or block of code in ghost text.
  • Sidebar chat: a panel where you ask questions about your project, request explanations, or refactor code.
  • Inline editing: select code and ask for modifications directly in the editor (e.g., "convert this to TypeScript").
  • Selection commands: quick actions like "explain this code," "find bugs," "generate tests."
  • Autonomous agent: the extension reads files, runs terminal commands, and proposes multi-file changes.

Most popular extensions as of June 2026:

ExtensionDeveloperModelsFocus
GitHub CopilotGitHub / OpenAIGPT-4o, ClaudeAutocomplete + chat + agent
CodySourcegraphClaude, GPT-4o, customContextual chat + autocomplete
ContinueContinue (open source)Any model (OpenAI, Anthropic, local)Extensible modular framework
SupermavenSupermavenCustom modelUltra-fast autocomplete
Amazon QAWSAWS modelsAWS ecosystem focus

Note: Most extensions rely on cloud models, but Continue stands out by supporting local models (Ollama, LM Studio) that never send your code off-device.

Mental model

Think of an AI extension as a silent pair programmer who reads your screen and is ready to help when called. It's not a colleague making decisions for you — it's someone passing suggestions while you work.

The key difference from a web chat (ChatGPT, Claude.ai) is context. A web chat doesn't know what files you have open, what functions you just wrote, or what dependency versions you're using. An extension does. Everything in your editor is potential context: the active file, defined symbols, problems panel errors, terminal output.

graph LR A[You write code] --> B[Extension analyzes context] B --> C{What do you need?} C --> D[Autocomplete] C --> E[Chat / Explain] C --> F[Inline edit] C --> G[Autonomous agent] D --> H[Ghost text suggestion] E --> I[Side panel answer] F --> J[Diff applied to file] G --> K[Multi-file changes proposed]

How it's used

Usage varies by extension, but they all share a common install flow and basic features. We'll use GitHub Copilot as the primary example since it's the most widely adopted.

Step 1: Install the extension

  1. Open VS Code
  2. Go to the Extensions panel (Ctrl+Shift+X / Cmd+Shift+X)
  3. Search for "GitHub Copilot"
  4. Click Install
  5. VS Code will prompt you to sign in with your GitHub account
  6. Once authenticated, you'll see the Copilot icon in the status bar (bottom right)

Pro Tip: If you use multiple AI extensions, disable autocomplete on the ones you're not actively using to avoid conflicts and latency. You can disable an extension from the panel without uninstalling it.

Step 2: Try autocomplete

Autocomplete works automatically. No special action needed:

  1. Create a new JavaScript or TypeScript file
  2. Start writing a function, for example:
    function calculateFibonacci(n) {
  3. After typing { and pressing Enter, Copilot will suggest the function body in ghost text
  4. Press Tab to accept, Esc to dismiss

Suggestions appear:

  • When writing new code
  • When writing comments that describe what you want
  • When pressing Alt+\ (Windows/Linux) or Option+\ (Mac) to force a suggestion

Warning: Copilot is not always right. Always review suggested code before accepting. Autocomplete is a proposal, not a guaranteed correct answer. For critical logic (security, authentication, error handling), write the code manually or ask for an explanation in chat.

Step 3: Use the sidebar chat

  1. Open the chat with Ctrl+Shift+I (Windows/Linux) or Cmd+Shift+I (Mac)
  2. Ask a question related to your open code, for example:
    Explain what this function does and suggest performance improvements
  3. The extension responds in the side panel with explanation and suggestions
  4. You can select code, open chat, and the extension will use it as context automatically

Useful Copilot chat commands:

CommandAction
/explainExplain the selected code
/fixSuggest a fix for the selected code
/testsGenerate tests for the selection
/docGenerate documentation (JSDoc, etc.)

Step 4: Inline editing (Copilot Edits)

  1. Select a block of code
  2. Press Ctrl+Shift+P and search for "Copilot: Start Edit Session"
  3. Type an instruction like:
    Refactor this function to use async/await instead of promises
  4. The extension applies a diff that you can review and accept or discard

Pro Tip: Inline editing is safer than letting the autonomous agent make unsupervised changes. Always review the diff before accepting — especially when the change spans multiple lines or files.

Step 5: Try agent mode (where available)

Some extensions (Copilot Agent, Cody Agent) can run terminal commands, read unopened files, and propose multi-line changes:

  1. Open the chat
  2. Toggle agent mode (usually a switch in the chat panel)
  3. Write a broad task like:
    Add input validation to all API routes in this project. Use zod schemas.
  4. The agent explores relevant files, proposes changes, and in some cases runs npm install zod
  5. Review each proposed change before approving

When to use it / when not to

Use it when:

  • Writing boilerplate code (getters, setters, validations, CRUDs)
  • Exploring an API or library you don't know well
  • Needing to understand legacy code quickly —ask the extension to explain it
  • Generating unit tests to cover edge cases
  • Prototyping functions quickly before refining the implementation
  • Working with a standard stack (JavaScript, TypeScript, Python, React, Next.js)

Don't use it when:

  • The code handles sensitive data or credentials — some extensions send code to external servers
  • The output must be exact with no room for hallucinations (financial calculations, critical security logic)
  • You don't yet understand the code you're writing — the extension can give a false sense of comprehension
  • Your team has very specific style standards the extension doesn't know about
  • You're learning a new concept — writing code manually helps cement understanding

Privacy warning: Review each extension's data policy. GitHub Copilot and Cody offer enterprise plans where code is not used for training. Continue with local models sends no data to any server. Choose based on your compliance needs.

// related