Skip to content

COPILOT_QUICK_START.md

Latest commit

 

History

History
318 lines (234 loc) · 7.71 KB

COPILOT_QUICK_START.md

File metadata and controls

318 lines (234 loc) · 7.71 KB
Raw

GitHub Copilot Quick Start Guide

This guide helps you get started with GitHub Copilot in this repository, leveraging the configured MCP (Model Context Protocol) servers for enhanced AI assistance.

🚀 Quick Setup

Option 1: GitHub Codespaces (Recommended)

  1. Click the Code button on the repository
  2. Select Codespaces tab
  3. Click Create codespace on main
  4. Wait for automatic setup (2-3 minutes)
  5. Start coding with Copilot!

Benefits:

  • ✅ Zero configuration required
  • ✅ All MCP servers pre-configured
  • ✅ Copilot extensions pre-installed
  • ✅ Development environment ready to use

Option 2: Local Development with VS Code

  1. Clone the repository:

    git clone https://github.com/Hack23/game.git
cd game

  2. Install dependencies:

    npm install

  3. Open in VS Code:

    code .

  4. Install GitHub Copilot extension from VS Code Marketplace

  5. MCP servers are automatically configured for the repository context

💬 Using Copilot Chat

Basic Commands

Ask questions about the codebase:

What does the Game component do?

Get code suggestions:

Create a new Three.js sprite component for a player character

Debug issues:

Why is this TypeScript error occurring?

Generate tests:

Write unit tests for the Player component

MCP-Enhanced Commands

With MCP servers, Copilot has enhanced capabilities:

File System Access:

Find all React components in the src directory
Show me the structure of the components folder

GitHub Integration:

What are the recent issues in this repository?
Show me the latest pull requests

Git History:

What changes were made to this file recently?
Show me the commit history for this component

Documentation Search (if Brave API key configured):

Search for Three.js sprite anchor documentation
Find React 19 best practices for hooks

🎮 Game Development with Copilot

Creating New Game Components

  1. Open Copilot Chat
  2. Ask: "Create a new Three.js sprite component following the project guidelines"
  3. Review the generated code
  4. Accept and customize as needed

Adding Game Logic

  1. Describe your game mechanic
  2. Example: "Add collision detection between player and enemies"
  3. Copilot will suggest implementation using Three.js patterns

Writing Tests

  1. Open a component file
  2. Ask: "Generate Vitest unit tests for this component"
  3. Copilot will create tests following project conventions

📝 Copilot Best Practices

Be Specific

❌ Bad: "Make a component" ✅ Good: "Create a TypeScript React component for a Three.js sprite with position state"

Provide Context

❌ Bad: "Fix this" ✅ Good: "This TypeScript error occurs because the texture type is not defined. How do I properly type a Three.js texture?"

Reference Project Guidelines

✅ "Following the strict TypeScript rules in copilot-instructions.md, create a game component"

Use Inline Suggestions

  1. Start typing code
  2. Wait for Copilot suggestions (gray text)
  3. Press Tab to accept
  4. Press Esc to dismiss

🔍 MCP Server Capabilities

Filesystem Server

  • Read and write project files
  • List directory contents
  • Search for files
  • Understand project structure

GitHub Server

  • Access repository metadata
  • Read issues and PRs
  • View workflow status
  • Search code

Git Server

  • View commit history
  • Understand code changes
  • Track file evolution
  • Analyze branches

Memory Server

  • Remember conversation context
  • Track your preferences
  • Maintain session history
  • Improve suggestions over time

Playwright Server

  • Automate browser testing
  • Debug UI components
  • Take screenshots
  • Test interactions

⚙️ Configuration Files

.github/copilot-instructions.md

  • Coding guidelines for this project
  • TypeScript strict mode rules
  • Three.js patterns
  • Testing requirements

Note: MCP servers are automatically configured in the GitHub Codespaces environment.

🛠️ Troubleshooting

Copilot Not Working

  1. Check Copilot is enabled in VS Code settings
  2. Verify you're signed in to GitHub
  3. Reload VS Code window
  4. Check Copilot status bar icon

MCP Servers Not Loading

  1. Check environment variables are set (especially GITHUB_TOKEN for product-task-agent)
  2. Restart VS Code or Codespace
  3. Review VS Code output panel for errors

Suggestions Not Relevant

  1. Be more specific in your prompts
  2. Reference project guidelines
  3. Provide more context
  4. Try rephrasing your question

Performance Issues

  1. Close unnecessary files
  2. Restart VS Code
  3. Check system resources

📚 Learning Resources

Project Documentation

Security & Compliance

This project follows Hack23 AB's Information Security Management System (ISMS):

For security questions, use the 🔒 security-specialist agent.

External Resources

🎯 Example Workflows

Building a New Game Feature

  1. Plan: Ask Copilot to help design the feature

    Help me design a scoring system for the game

  2. Implement: Generate the component

    Create a ScoreDisplay component using Three.js Text

  3. Test: Generate unit tests

    Write Vitest tests for the ScoreDisplay component

  4. Document: Add JSDoc comments

    Add TypeScript JSDoc documentation to this component

Debugging Issues

  1. Identify: Describe the problem

    The sprite is not rendering at the correct position

  2. Analyze: Get suggestions

    What could cause incorrect sprite positioning in Three.js?

  3. Fix: Implement the solution

    Update the sprite position calculation to account for anchor points

  4. Verify: Generate test cases

    Create tests to verify sprite positioning

Refactoring Code

  1. Review: Understand current code

    Explain how this component works

  2. Improve: Get refactoring suggestions

    How can I improve this code following TypeScript best practices?

  3. Refactor: Apply changes

    Refactor this to use React hooks instead of class components

  4. Test: Ensure functionality

    Generate regression tests for this refactored component

🤝 Contributing

When contributing code with Copilot:

  1. Follow project guidelines in .github/copilot-instructions.md
  2. Ensure TypeScript strict mode compliance
  3. Add tests for new features
  4. Run npm run lint and npm run test
  5. Review Copilot suggestions before accepting

📞 Support

For help with Copilot or MCP servers:

Happy coding with Copilot! 🚀