LaunchKit with VS Code + GitHub Copilot: Complete Guide

VS Code + Copilot: The Classic Combo

VS Code is the world's most popular editor. GitHub Copilot is the most widely-used AI coding assistant. Together with LaunchKit, they form a powerful stack for shipping SaaS products.

This guide covers optimal setup, essential extensions, and workflows that maximize Copilot's effectiveness with LaunchKit's codebase.

Essential Extensions

Install these extensions for the best experience:

• GitHub Copilot — AI code completion
• GitHub Copilot Chat — Conversational AI assistant
• ESLint — JavaScript/TypeScript linting
• Prettier — Code formatting
• Tailwind CSS IntelliSense — Tailwind autocomplete
• PostCSS Language Support — For Tailwind v4

code --install-extension GitHub.copilot
code --install-extension GitHub.copilot-chat
code --install-extension dbaeumer.vscode-eslint
code --install-extension esbenp.prettier-vscode
code --install-extension bradlc.vscode-tailwindcss

Workspace Settings

Create .vscode/settings.json for optimal LaunchKit development:

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  },
  "typescript.preferences.importModuleSpecifier": "non-relative",
  "tailwindCSS.experimental.classRegex": [],
  "github.copilot.enable": {
    "*": true,
    "markdown": true,
    "plaintext": false
  }
}

Using Copilot Chat Effectively

Open Copilot Chat (Ctrl+Shift+I) and use these patterns:

Understand the Codebase

@workspace How does authentication work in this project?

@workspace Where are the Stripe webhook handlers?

@workspace Explain the lead capture flow from form to database

Generate Code

/new Create a new API route at /api/feedback that accepts
{ message, rating } and saves to Supabase

/new Create a React component for a testimonial card that
matches the existing design system

Fix Issues

/fix This component has a TypeScript error

/explain What does this Supabase query do?

@workspace Why might the Stripe webhook be failing?

Inline Completions

Copilot shines at inline completions. Write a comment describing what you want, and Copilot will suggest the implementation:

// API route to get all leads for the current user, sorted by created_at desc
export async function GET(request: Request) {
  // Copilot will suggest the implementation...
}

// Component that displays a pricing card with plan name, price, and features
function PricingCard({ plan }: { plan: Plan }) {
  // Copilot will suggest the JSX...
}

Recommended Workflow

• Explore with Chat — Use @workspace to understand existing patterns before adding features
• Generate with /new — Create new files using Copilot's file generation
• Refine with inline — Let Copilot complete your code as you type
• Review carefully — Always verify generated code matches LaunchKit's patterns

Tips for Better Suggestions

• Open related files — Copilot uses open tabs for context
• Write descriptive comments — Better comments = better completions
• Use TypeScript — Type annotations help Copilot understand intent
• Reference existing code — "Similar to the ButtonCheckout component"