Vibecoding with GitHub Copilot

GitHub Copilot is the most widely-used AI coding assistant in the world. With over 1.8 million paying subscribers and integration into VS Code, JetBrains, Neovim, and more, it’s the tool most developers try first. And at $10/month (free for students and open-source maintainers), it’s the cheapest way to start vibecoding.

Copilot isn’t the most powerful AI coding tool — it doesn’t have Cursor’s Composer or Replit’s full-app generation. But it’s the most accessible, the most stable, and for many workflows, all you need.

What you’ll learn:

How to install and configure Copilot in VS Code
The core workflow: ghost text, inline chat, and Copilot Chat
Tips for getting dramatically better suggestions
When Copilot is the right choice (and when to upgrade)
Advanced features: slash commands, agents, and workspace context

Prerequisites: VS Code installed. Basic coding knowledge.

Installation & Setup

Go to github.com/features/copilot
Sign up for Individual ($10/mo), Business ($19/mo), or Free (students/OSS)
Make sure your GitHub account is linked

Step 2: Install the VS Code Extension

Open VS Code
Go to Extensions (Cmd+Shift+X)
Search “GitHub Copilot”
Install both:
- GitHub Copilot — ghost text completions
- GitHub Copilot Chat — sidebar chat and inline chat
Sign in with your GitHub account when prompted

Step 3: Configure Settings

Open VS Code settings (Cmd+,) and search “copilot”:

{
  // Enable for all languages
  "github.copilot.enable": {
    "*": true,
    "markdown": true,
    "yaml": true
  },
  // Show suggestions automatically
  "editor.inlineSuggest.enabled": true,
  // Copilot Chat settings
  "github.copilot.chat.localeOverride": "en"
}

Step 4: Verify It’s Working

Open any code file and start typing. You should see gray “ghost text” suggestions appear. Press Tab to accept.

// Type this comment, then press Enter:
// function that reverses a string
// Copilot should suggest the full implementation ↓

If no suggestions appear, check the Copilot icon in the bottom-right status bar. It should show a spinning icon or a checkmark, not an error.

The Three Modes of Copilot

1. Ghost Text (Inline Suggestions)

This is Copilot’s signature feature. As you type, it suggests completions in gray text.

# Type the function signature:
def calculate_shipping_cost(weight, distance, express=False):
    # Copilot suggests the implementation...
    # Tab to accept, Esc to dismiss
    # Alt+] for next suggestion, Alt+[ for previous

Best practices for ghost text:

Write descriptive function names — calculateMonthlyRevenue gets better suggestions than calc
Write a comment first — describe what you want, then let Copilot implement it
Type parameters with types — function getUser(id: string): Promise<User> gives strong hints
Accept partially — Cmd+→ (Mac) accepts word-by-word instead of the full suggestion

2. Inline Chat (Cmd+I)

Select code and press Cmd+I to open inline chat. Ask Copilot to modify the selected code:

Select a function → Cmd+I:
"Add input validation and error handling"
"Convert this to async/await"
"Add JSDoc comments"
"Make this work with TypeScript generics"

The changes appear as a diff you can accept or reject.

A full chat interface for longer conversations:

You: "How should I structure the database schema for a multi-tenant SaaS app?"
You: "@workspace What patterns does this project use for API error handling?"
You: "Explain this regex: /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$/"

Essential Shortcuts

Shortcut	Action
`Tab`	Accept suggestion
`Esc`	Dismiss suggestion
`Alt+]`	Next suggestion
`Alt+[`	Previous suggestion
`Cmd+→`	Accept next word only
`Cmd+I`	Inline chat
`Cmd+Shift+I`	Open Copilot Chat sidebar

Tips for Better Suggestions

Tip 1: Write the Comment, Then the Code

// Fetch all active users from the database, sorted by last login date,
// with pagination support (page number and page size parameters)
function getActiveUsers(page, pageSize) {
  // Copilot now has excellent context for the implementation
}

Copilot uses open tabs as context. If you’re writing a component that uses types from types.ts and data from api.ts, open those files in tabs. Copilot will read them.

Tip 3: Use Descriptive Variable Names

# Vague → bad suggestions:
x = get_data(y)

# Descriptive → great suggestions:
monthly_revenue = calculate_revenue_for_period(fiscal_quarter)

Tip 4: Provide Examples

// Format: "John Doe" → "J. Doe"
// Format: "Jane Smith" → "J. Smith"  
function abbreviateName(fullName) {
  // Copilot sees the pattern and generates correctly
}

Tip 5: Start with Tests

Write the test first. Copilot uses test descriptions to generate implementations:

describe('ShoppingCart', () => {
  it('should calculate total with tax', () => {
    const cart = new ShoppingCart();
    cart.addItem({ name: 'Shirt', price: 29.99, quantity: 2 });
    expect(cart.getTotalWithTax(0.08)).toBe(64.78);
  });
});

// Now open ShoppingCart.js — Copilot knows exactly what to implement

Advanced Features

Slash Commands in Chat

/explain  — Explain selected code
/fix      — Fix bugs in selected code
/tests    — Generate tests for selected code
/doc      — Generate documentation
/new      — Scaffold a new project

@workspace Context

Use @workspace in Copilot Chat to give it project-wide context:

@workspace How is authentication implemented in this project?
@workspace What's the convention for error handling in API routes?
@workspace Find all TODO comments in the codebase

Copilot Agents (Preview)

GitHub is rolling out agents that can:

@terminal — Suggest terminal commands
@vscode — Help with VS Code settings and extensions
Custom agents for your specific workflows

Copilot for CLI

# Install GitHub CLI extension
gh extension install github/gh-copilot

# Ask in terminal
gh copilot suggest "find all files larger than 100MB"
gh copilot explain "git rebase -i HEAD~5"

Copilot vs. Cursor: Which Should You Use?

This is the question everyone asks. Here’s the honest answer:

Choose Copilot When:

Budget matters — $10/mo vs $20/mo
You love VS Code — Copilot is an extension, not a fork. All your VS Code setup stays exactly the same
Tab completion is your main need — Copilot’s ghost text is excellent
Team standardization — Copilot Business integrates with GitHub Enterprise
You use JetBrains — Copilot works in IntelliJ, PyCharm, etc. Cursor is VS Code only
Simple projects — For straightforward coding, Copilot is all you need

Choose Cursor When:

Multi-file edits — Composer is a game-changer that Copilot can’t match
Complex projects — Cursor’s codebase indexing provides better context
Agentic workflows — Cursor’s Agent mode can build features autonomously
You want the best AI — Cursor gives you access to Claude Opus, Sonnet, GPT-4o
You’re going all-in on vibecoding — Cursor is purpose-built for it

The Hybrid Approach

Many developers use both:

Copilot for everyday coding — quick completions, inline fixes, documentation
Cursor for big features — multi-file scaffolding, complex refactors, agentic builds

You can even use Copilot inside Cursor (install the extension). Best of both worlds.

The Vibecoding Workflow with Copilot

1. Start with a Comment Block

/**
 * User Profile Component
 * - Displays user avatar, name, bio, and stats
 * - Edit mode toggles between view and edit
 * - Auto-saves changes after 2 seconds of inactivity
 * - Shows loading skeleton while fetching
 */

2. Let Ghost Text Build the Structure

Type the function/component signature. Accept Copilot’s structural suggestions.

3. Refine with Inline Chat

Select rough sections, Cmd+I:

"Add proper TypeScript types"
"Handle the loading and error states"
"Make this accessible — add aria labels and keyboard navigation"

4. Generate Tests

Select the component, then in Chat:

/tests Generate comprehensive tests including edge cases,
loading states, error states, and user interactions.

5. Document

/doc Generate JSDoc documentation for all exported functions

Common Issues

Suggestions Are Generic / Wrong

Copilot’s context window is limited. Fix by:

Opening relevant files in tabs
Adding more comments
Using @workspace in Chat for project context

Copilot Suggests Outdated Patterns

Copilot is trained on public code, which includes old patterns:

// If Copilot suggests class components:
"Use functional components with hooks, not class components"

// If it suggests var:
// Just type 'const' or 'let' — Copilot will follow your lead

Ghost Text Appears Too Often

If suggestions are distracting:

// VS Code settings — reduce suggestion frequency
{
  "github.copilot.inlineSuggest.enable": true,
  "editor.inlineSuggest.showToolbar": "onHover"
}

Getting Started Today

Install Copilot in VS Code (5 minutes)
Write comments before code — train yourself to describe, then implement
Open related files as tabs for better context
Use inline chat (Cmd+I) for refactoring — it’s underutilized
Try Copilot Chat for debugging — paste errors and ask for fixes
Read Prompting Fundamentals — better prompts = better suggestions

Copilot won’t write your entire app, but it’ll make you 2-3x faster at writing the code yourself. And for $10/month, that’s an incredible ROI.

📖 Getting Started with Vibecoding — The fundamentals
📖 Choosing Your AI Tools — Full comparison
📖 Vibecoding with Cursor — The power-user option
📖 Prompting Fundamentals — Write better prompts
📋 AI Tool Shortcuts — Quick reference for all tools