Inline Code Completion Mastery

How Inline Completion Works

When you pause typing, the tool sends your file content (up to the context limit) to the model. The model predicts what comes next based on everything it sees. Your job is to give it the right signals.

The Comment-First Technique

Write your intent as a comment, then let AI write the code. This is the single highest-leverage technique for inline completion.

// BAD: ambiguous, poor completion
function process(data) {
  // ...
}

// GOOD: descriptive name + comment = excellent completion
// Validates email format and checks if domain is in the blocked list
// Returns { valid: boolean, reason: string }
function validateEmailAddress(email: string, blockedDomains: string[]) {
  // AI now knows exactly what to write

// EVEN BETTER: JSDoc comment triggers full implementation
/**
 * Calculates compound interest over a given period.
 * @param principal - Initial investment amount in USD
 * @param rate - Annual interest rate as decimal (e.g. 0.05 for 5%)
 * @param years - Investment duration in years
 * @param compoundsPerYear - Times compounded per year (12 for monthly)
 * @returns Final amount after compound interest
 */
function calculateCompoundInterest(
  principal: number,
  rate: number,
  years: number,
  compoundsPerYear: number = 12
): number {
  // Accept the AI's completion here
}

Keyboard Shortcuts (VS Code + Copilot)

Tab              → Accept full suggestion
Escape           → Dismiss suggestion
Alt+]            → Next suggestion (cycle through alternatives)
Alt+[            → Previous suggestion
Ctrl+Enter       → Open Copilot panel (see 10 alternatives)
Alt+            → Trigger suggestion manually (if it didn't appear)

// In Cursor:
Tab              → Accept full suggestion
Cmd+Right        → Accept one word at a time (very useful!)
Escape           → Dismiss

Writing AI-Readable Code

// Pattern 1: Show one example, let AI complete the rest
const STATUS_MESSAGES = {
  200: 'OK',
  201: 'Created',
  // Accept completion — AI will fill in 400, 401, 403, 404, 500...
}

// Pattern 2: Consistent naming = consistent completions
// After writing getUserById, getProductById, getOrderById...
// getInvoice| → AI autocompletes "ById" and the full implementation

// Pattern 3: Start the body, not just the signature
async function fetchUserProfile(userId: string) {
  const response = await fetch(
  // AI now knows it's an API call and completes the full fetch chain

// Pattern 4: Use types to constrain completions
type PaymentStatus = 'pending' | 'processing' | 'completed' | 'failed'
function handlePaymentStatus(status: PaymentStatus) {
  switch (status) {
    // AI generates all 4 cases with appropriate handling
  }
}

When to NOT Trust Inline Completion

Hands-on: Complete a CRUD Module