How to use GitHub Copilot (the complete beginner's guide)

Key Concepts

GitHub Copilot, AI pair programmer, code completion, natural language coding, debugging, GitHub Copilot license, Visual Studio Code, JetBrains IDEs, inline code completion, Completions Panel, non-deterministic responses, Large Language Models (LLMs), context, tokens, hallucinations, prompt engineering, prompt confusion, attack surface, SQL injection, Dependabot, CodeQL analysis, secret scanning, Copilot Autofix, inline chat, slash commands, chat participants, Copilot Edits, Flask, SQLAlchemy, JWT, CRUD operations, CORS, React, Vite, MaterialUI, code review, refactoring, Test-driven development (TDD), unit tests.

GitHub Copilot Overview

GitHub Copilot is an AI pair programmer designed to accelerate coding tasks. It functions as an assistant within code editors and on GitHub.com, offering more than just code completion. It can generate code from natural language, explain shell commands, aid in debugging, and describe pull request changes.

Availability: Visual Studio Code, Visual Studio, JetBrains IDEs, Neovim, Xcode, GitHub Mobile, terminals, and GitHub.com.

License Options:

• GitHub Copilot (free)
• Copilot Pro (paid, individual)
• Copilot Business (paid, business)
• Copilot Enterprise (paid, enterprise)
• Free access for students/educators (via GitHub Education) and popular open-source maintainers.

Installation and Authentication

Visual Studio Code:

1. Install the GitHub Copilot extension from the marketplace. This installs both GitHub Copilot and GitHub Copilot Chat.
2. Sign in to VS Code with your GitHub account.
3. Authorize VS Code in your GitHub account via the browser.
4. Verify installation by checking for the Copilot icon in the editor.

JetBrains IDEs (e.g., PyCharm):

1. Install the GitHub Copilot plugin from the Plugins marketplace.
2. Restart the IDE.
3. Sign in to GitHub via the Copilot icon or the "Login to GitHub" option.
4. Authorize the plugin in your browser by copying and pasting the provided code.
5. Authorize GitHub Copilot Chat separately.

Using GitHub Copilot

Inline Code Completion: As you type, Copilot suggests code snippets (ghost text). Press Tab to accept. Use the Completions Panel to view multiple suggestions.

GitHub Copilot Chat: Use /explain to get explanations of code. Ask questions to improve code, such as enhancing regex for email validation. Use "Apply in Editor" to accept changes.

Example: Validating email addresses in Python using the re module.

Non-Deterministic Responses: Copilot's suggestions may vary each time due to the nature of LLMs.

Large Language Models (LLMs) and Prompt Engineering

LLMs: AI models trained on vast amounts of text data to generate human-like language by predicting the next word in a sentence.

Key Concepts:

• Context: Surrounding information that helps the LLM understand the prompt.
• Tokens: Units of text (words, parts of words, or letters) that the LLM processes.
• Limitations: LLMs rely on patterns and probabilities and may produce incorrect or nonsensical answers ("hallucinations").

Prompt Engineering: Crafting clear and precise prompts to guide LLMs.

Effective Prompting:

• Be clear and precise.
• Provide sufficient context.
• Iterate and refine prompts.

Example: Refining the prompt "Write a function that will square numbers in a list" to "Write a Python function that takes a list of integers and returns a new list where each number is squared, excluding any negative numbers."

Troubleshooting Prompts:

• Prompt Confusion: Break down complex requests into separate, iterative prompts.
• Token Limits: Keep prompts concise and provide only necessary context.
• Assumed Knowledge: Explicitly state requirements and constraints.

Security Best Practices with GitHub Copilot

GitHub Copilot can assist in writing more secure code, but it's not a replacement for dedicated security tools.

Example: Using Copilot to regenerate code for SQL database insertion to sanitize input and prevent SQL injection attacks.

Workflow:

1. Ask Copilot to find and fix vulnerabilities using prompts like "Are there any vulnerabilities in this function?" or "@workspace, what is the attack surface?".
2. Use the /fix slash command for broader recommendations.
3. Ask Copilot for detailed explanations of security problems and alternative solutions.

GitHub Security Features (Free for Open Source):

• Dependabot: Checks dependencies for vulnerabilities and creates pull requests for updates. Enable in repository settings under "Code security".
• CodeQL Analysis: Scans code for pattern-based vulnerabilities. Enable in repository settings under "Code security".
• Copilot Autofix: Automatically suggests fixes for CodeQL-identified problems.
• Secret Scanning: Warns about exposed secrets (passwords, tokens) in code. Enable "Push protection" to block new secrets.

Key Security Tips:

1. Use Copilot to find and fix vulnerabilities.
2. Ask Copilot for details about identified problems.
3. Enable Dependabot, CodeQL, and secret scanning in repository settings.

Building a Rock, Paper, Scissors Game with GitHub Copilot

MVP Creation:

1. Create a new Python file.
2. Add a comment describing the game's requirements.
3. Use inline code completion to generate the game logic.
4. Accept suggestions by pressing Tab or selecting from the Completions Panel.

Enhancements with Inline Chat:

1. Highlight code to update.
2. Press CMD/CTRL+I to open inline chat.
3. Enter a prompt, such as "Allow the user to enter 'r' for rock, 'p' for paper, and 's' for scissors."

GUI Creation with Copilot Chat:

1. Open Copilot Chat.
2. Enter a prompt, such as "Create a simple GUI using a library like Tkinter for the game."
3. Review the generated code, plan, and citations.
4. Use the "Apply in Editor" button to update the code.

Slash Commands:

• /explain: Explains code in the current file.
• /help: Provides an overview of Copilot's capabilities and available slash commands.

Chat Participants:

• @workspace: Provides context about the entire workspace.
• @terminal: Provides context about the integrated terminal.
• @GitHub: Provides knowledge about the GitHub repository, issues, and pull requests.

GitHub Copilot Edits:

• Allows iterative code changes using natural language.
• Supports editing multiple files simultaneously.

Example: Using Copilot Edits to add a detailed scoreboard to the Rock, Paper, Scissors game.

Code Reviews:

• Generate commit messages using the sparkly icon in the "Commit Message" box.
• Get code reviews in the editor by highlighting code and selecting "Review using Copilot."

Building a Backend API with Flask and GitHub Copilot

Project Setup:

1. Clone the Planventure API repository.
2. Create and activate a virtual environment.
3. Install dependencies from requirements.txt.
4. Start the Flask server in debug mode.

Database Setup:

1. Use Copilot Chat to update the Flask app with SQLAlchemy configurations.
2. Install necessary packages for Flask API with SQLAlchemy and JWT.

Model Creation (User and Trip):

1. Use Copilot Edits to create SQLAlchemy User and Trip models with specified attributes and relationships.
2. Create a Python script to create the database tables.
3. Initialize the database.

Authentication:

1. Use Copilot Edits to create password hashing and salt utility functions.
2. Set up JWT token generation and validation functions.
3. Create authentication routes for user registration with email validation.
4. Create a login route with JWT token generation.
5. Implement authentication middleware to protect routes.

Trip Routes (CRUD Operations):

1. Use Copilot Edits to create trip routes blueprint with CRUD operations.
2. Create a function to generate a default itinerary template.

Additional Features:

1. Set up CORS (Cross-Origin Resource Sharing).
2. Add a basic health check endpoint.
3. Generate a detailed README using Copilot Chat.

Building a Frontend Client with React and GitHub Copilot

Project Setup:

1. Clone the Planventure client repository.
2. Install dependencies using npm install.
3. Start the development server.

Authentication Setup:

1. Create an AuthLayout component with navigation and centered content.
2. Build a LoginForm component with email and password fields and validation.
3. Update the Home component to route to the login page.
4. Create a SignupForm component matching the login form style and a new SignupPage.
5. Set up authentication context and token management in AuthContext.jsx.

Data Fetching and Display:

1. Create a Dashboard component to display trips.
2. Create a TripsCard and TripsList component to showcase trips.
3. Add a message for various loading states.

Trip Management:

1. Create a NewTripForm with destination and date inputs using the dayjs library.
2. Create ItineraryDay and TimeSlot components for managing daily activities with editing capabilities.
3. Prompt users to add an itinerary if they don't have one, and include a default itinerary template.

Testing with GitHub Copilot

Testing Fundamentals:

• Testing: Ensuring code does what it's expected to do.
• Unit Tests: Testing small, isolated units of code.
• Importance: Ensures code performs as expected, identifies broken code after changes.

Test-Driven Development (TDD):

• Writing tests before implementation.
• Red, Green, Refactor: Write failing test (Red), write code to pass test (Green), refactor code (Refactor).

Workflow with Copilot:

1. Highlight a function in the editor.
2. Use the /tests slash command in Copilot Chat to generate unit tests.
3. Create a new file (e.g., test_validators.py) for the tests.
4. Run the tests to verify functionality.

Example: Creating unit tests for a validate_email function.

Best Practices:

• Document tests.
• Treat tests like production code.
• Create utilities to speed up test writing.
• Keep tests updated with code changes.

Code Review and Refactoring with GitHub Copilot

Definitions:

• Code Review: Having a second pair of eyes on code to catch bugs and improve quality.
• Refactoring: Restructuring existing code without changing its functionality.

Workflow:

1. Open Copilot Chat and ask, "How can I improve this code?"
2. Apply suggestions using the "Apply in Editor" button.
3. Ask Copilot to explain each suggestion.
4. Ask specific questions, such as "How can I extract the data fetching logic into a custom hook?"
5. Identify redundant code by asking, "Are there any redundant code in this file?"

Copilot Code Review on GitHub.com:

1. Request a review from Copilot on a pull request.
2. Review Copilot's comments and suggestions.
3. Accept suggestions by committing them directly on GitHub.

Key Components:

• Automated suggestions.
• Consistency checks.
• Refactoring assistance.
• Error detection.
• Comment support.

Limitations:

• Copilot relies on the context provided.
• It's not a substitute for thorough human review.