Use GitHub Copilot to Supercharge Your Coding in VS Code

James Gress

Advanced Technology Center AI Lead Accenture

LinkedIn: jamesgress
GitHub: jmgress
X.com: @jmgress
Tampa Bay Generative AI Meetup

AI-Generated Code: CEO Insights (2025)

Current Impact

• Satya Nadella (Microsoft)
  “20–30% of the code in our repos today is written by AI.”
  Date: Apr 29, 2025 (LlamaCon)

• Sundar Pichai (Google)
  “AI is generating more than 30% of the company’s code.”
  Date: Apr 2025 (Alphabet Earnings Call)

Future Projections

• Kevin Scott (Microsoft CTO)
  “95% of all code will be AI-generated by 2030.”
  Date: Apr 2025

• Mark Zuckerberg (Meta)
  “Within a year, maybe half of development will be done by AI.”
  Date: Apr 29, 2025 (LlamaCon)

• Dario Amodei (Anthropic)
  “We’re 3–6 months from AI writing 90% of code.”
  Date: Mar 12, 2025

Key Trend

• Today: 20–30% of production code is AI-generated.
• Next 12 months: 50%+ expected.
• By 2030: 95% projected.

Understanding Copilot's Strengths & Weaknesses

Remember: You Are In Charge!

Copilot is a powerful tool at your service, not a replacement for your knowledge.

Create Thoughtful Prompts

Prompt Engineering Best Practices:

Remember: Clear prompts = better results from Copilot!

Check Copilot's Work

Understanding & Review

• Understand suggested code before implementing it
• Ask Copilot Chat to explain if you're unsure
• Review carefully for functionality, security, readability

Automated Validation

• Use automated tests to verify correctness
• Run linting tools for code quality
• Code scanning for security vulnerabilities

Remember: You're Responsible!

Copilot is powerful but can make mistakes - always validate before shipping.

Time for Live Demo!

Switching to Hands-On Experience

What's Next:

• Live demonstrations, what could go wrong? :)
• Real-world examples in VS Code

Remaining Slides:

• Reference material on the demo sequence and for you to reference later

Setting Up GitHub Copilot in VS Code

Quick Setup

1. Install Extension: Search "GitHub Copilot" in Extensions
2. Sign In: Command Palette → GitHub Copilot: Sign In
3. Start Coding: Open any file and begin typing

Pop Quiz!

What is Ghost Text?

Ghost Text & Code Completion

What You'll See

Ghost Text: Gray suggestions that appear as you type
Tab: Accept the suggestion
Escape: Dismiss the suggestion

Keyboard Shortcuts

Another Pop Quiz!

Do you know what these are?

• Context Creep
• Context Confusion

Context Creep & Context Confusion

Context Creep

• Conversations that gradually drift off-topic
• Accumulating irrelevant information over time
• AI gets "distracted" by previous unrelated discussions

Context Confusion

• AI mixes up different topics/projects in same chat
• Wrong assumptions based on earlier context
• Reduced accuracy and relevance of suggestions

Start Fresh Chats

Why Start New Chats:

• Avoid context confusion and prevent topic drift
• Get focused suggestions

When to Start New:

• Switching files/projects
• Different programming language
• New feature vs. bug fix
• Code review vs. implementation

How: Click "New Chat" or Cmd/Ctrl + Shift + Alt + L

Ask Mode - Copilot Chat

Access:

• Chat Panel: Cmd/Ctrl + Shift + I
• Inline Chat: Cmd/Ctrl + I

Examples:

• Explain this code
• Generate unit tests
• How do I run this code?
• What are the options for pip install?

Chat History Tip

Did you know?

Press the up arrow (↑) in the chat input to quickly access your previous chat messages!

Benefits:

• Quickly repeat or modify previous questions
• No need to retype complex queries
• Navigate through your recent chat history

Pro Tip: Use this to iterate on your questions without starting over

Copilot Chat Actions

After Getting a Response, You Can:

• Copy - Copy response to clipboard
• Insert at Cursor - Add code at current cursor position
• Insert in New File - Create new file with the response
• Insert in Terminal - Run command in integrated terminal
• Apply in Editor - Replace/modify existing code

Pro Tip: Hover over code blocks in chat responses to see action buttons

Edit Mode - Direct Code Changes

Access:

• Select code + Cmd/Ctrl + I
• Type /edit in chat or select edit option

Examples:

• "Add error handling"
• "Convert to async/await"
• "Add TypeScript types"
• "Refactor this function"

Built-in @ Agents

Available Agents:

• @workspace - Entire codebase context
• @vscode - VS Code specific questions
• @terminal - Command line operations
• @github - Specifically focused on GitHub platform features and workflows

Examples:

• "@workspace find all TODO comments"
• "@vscode how to configure extensions"
• "@terminal run the build script"

Agent Mode - Multi-File Tasks

Access:

• Type @workspace in chat
• Use agent commands like @terminal

Examples:

• "@workspace create a new component"
• "@terminal run the tests"
• "@workspace refactor this feature"
• "@workspace add documentation"

Ask vs Edit vs Agent Modes

Choose the right mode for your task!

Copilot Instructions File

Create: .github/copilot-instructions.md

Example Content:

- All functions must include JSDoc comments
- Use TypeScript for new files
- Follow company naming conventions
- Always add error handling
- Write unit tests for new functions

Benefits:

• Team-wide consistency
• Project-specific guidance
• Version controlled instructions

Settings Locations

Personal (User Settings):

• macOS: ~/Library/Application Support/Code/User/settings.json
• Windows: %APPDATA%\Code\User\settings.json
• Linux: ~/.config/Code/User/settings.json

Project (Team Settings):

• .vscode/settings.json

Access via VS Code:

• Cmd/Ctrl + , → Open Settings (JSON) icon
• Command Palette → "Preferences: Open User Settings (JSON)"

Copilot Prompt Files

Create: .github/copilot/prompts/[name].md

Example: .github/copilot/prompts/test-generator.md

# Test Generator Prompt

Generate comprehensive unit tests for the selected function including:
- Happy path scenarios
- Edge cases and error conditions
- Mock external dependencies
- Use Jest testing framework

Usage: Type #test-generator in Copilot Chat

Prompt File Examples in Action

Code Review Prompt

.github/copilot/prompts/code-review.md

# Code Review Assistant
Review the selected code for:
- Security vulnerabilities and best practices
- Performance optimizations
- Code maintainability and readability
- Adherence to project coding standards

Usage: #code-review + select code

Architecture Documentation

.github/copilot/prompts/arch-docs.md

# Architecture Documentation Generator
Update architecture documentation for:
- System design patterns used
- Component relationships and dependencies
- Data flow and API contracts
- Deployment and scaling considerations

Usage: #arch-docs + select relevant files

AI-Readable Documentation

Why Mermaid Diagrams Matter

• Visual context that AI can parse and understand
• Structured format that enhances Copilot's comprehension
• Living documentation that stays in sync with code

Examples AI Can Easily Parse:

graph TD
    A[User Request] --> B[Authentication]
    B --> C[Data Processing]
    C --> D[Database Query]
    D --> E[Response]

Best Practices:

• Use standardized formats (Mermaid, PlantUML)
• Include clear labels and descriptions
• Keep diagrams close to relevant code
• Add comments explaining relationships

Result: Copilot understands your architecture and suggests better code!

Instructions.md File

Create: instructions.md (project root)

Example Content:

# Project Instructions

## Code Style
- Use camelCase for variables and functions
- Add TypeScript types for all parameters
- Include JSDoc comments for public functions

## Architecture
- Follow MVC pattern
- Keep components under 200 lines
- Use dependency injection for services

Custom Chat Mode

Create: .github/copilot/chat-modes/[name].md

Example: .github/copilot/chat-modes/code-reviewer.md

# Code Reviewer Mode

You are an expert code reviewer. Focus on:
- Security vulnerabilities
- Performance optimizations
- Code maintainability
- Best practices adherence

Always provide specific suggestions with examples.

Usage: @code-reviewer in Copilot Chat

Another Pop Quiz!

What are Sparkles?

Sparkles Explained

Sparkles are visual indicators in VS Code that show:

• AI-powered suggestions are available
• Copilot can help with the current context
• Interactive features you can click or invoke

Custom Instructions

Setup:

• VS Code Settings → GitHub Copilot
• Project-specific .vscode/settings.json

Examples:

{
  "github.copilot.chat.commitMessageGeneration.instructions": [
    {"text": "Use conventional commit format"}
  ],
  "github.copilot.chat.codeGeneration.instructions": [
    {"text": "Always add TypeScript types"}
  ]
}

Configuring GitHub Copilot in VS Code

VS Code Settings Configuration

{
    "github.copilot.chat.commitMessageGeneration.instructions": [
        {
            "text": "Changes in the Slides.md it is important to describe the changes in the content and not the technical changes that were done."
        }
    ]
}

VS Code Settings Location

your-project/
├── .vscode/
│   └── settings.json
└── other-files...

Enhancing Copilot with Context

Three Ways to Enhance Your Interactions:

1. Add Context (#) - Include files, selections, terminal output
2. Use Extensions (@) - Leverage installed VS Code extensions
3. Run Commands (/) - Execute built-in Copilot commands

Syntax Summary:

• # for context
• @ for extensions
• / for commands

Adding Context (#)

Include Specific Context:

• #file:README.md - Include specific file
• #file:src/utils.js - Reference any project file
• #selection - Current code selection
• #terminalLastCommand - Last terminal output
• #codebase - Entire project context

Benefits:

• More accurate suggestions
• Relevant code examples
• Better understanding of project structure

Using Extensions (@)

Access VS Code Extensions:

• Install Copilot-compatible extensions
• Access via @extension-name syntax
• Extensions appear in autocomplete

Popular Examples:

• @prettier - Code formatting
• @eslint - Linting and fixes
• @git - Git operations
• @npm - Package management

Setup: Extensions must support Copilot integration

Running Commands (/)

Built-in Copilot Commands:

• /explain - Explain selected code
• /fix - Fix issues in code
• /tests - Generate test cases
• /doc - Generate documentation
• /optimize - Improve performance
• /new - Create new files/features

Usage: Type / in chat to see all available commands

Combining Context, Extensions & Commands

Fix issues in a specific file:

/fix #file:src/components/Button.js

Generate tests for selected code:

/tests #selection

Explain codebase with workspace context:

@workspace /explain #codebase

MCP Servers: Connect to External Services

Model Context Protocol (MCP) enables Copilot to connect to external services like GitHub and Jira.

Popular MCP Servers:

• GitHub for repositories, issues, PRs
• Atlassian for Jira and Confluence

Setting Up MCP Servers

Setup Process:

1. Install MCP server extension from VS Code marketplace
2. Configure authentication (API keys/tokens)

Smart Agent Detection vs Explicit # Syntax

Copilot Can Auto-Detect Context:

"Create a bug ticket for the login timeout issue"
"Show me open issues in the frontend repo"
"Update ticket DEV-456 status to In Progress"

Use # for Explicit Control:

#getJiraIssue 
#editJiraIssue 

MCP Servers in Action: Real Developer Workflows

Bug Discovery & Ticket Creation:

Create a high priority bug ticket in Jira for the login timeout issue in authentication module

Pull Down Issues to Work On:

Show me all open issues assigned to me in the frontend repository
List my current sprint tasks with status "To Do"

Update Progress & Add Comments:

Update ticket AUTH-123 status to "In Progress" and add comment "Started investigating timeout configuration"
Add comment to issue #45: "Fixed the validation logic, testing in progress"

GitHub Copilot Coding Agent: Autonomous Development

What is the Coding Agent?

• Autonomous AI agent that can complete entire features
• Assign GitHub issues directly to the agent
• Works independently to implement solutions

How It Works:

1. Assign Issue: Tag github-copilot on any GitHub issue
2. Agent Analysis: Reviews issue requirements and codebase
3. Implementation: Creates branch, writes code, runs tests
4. Pull Request: Submits PR with complete solution

Thank You!