My Development Workflow using GitHub Copilot

AI coding assistants have become an essential part of my daily workflow. Among the many tools available, GitHub Copilot stands out as the most powerful and versatile.

GitHub Copilot integrates with Visual Studio Code and other popular IDEs, providing context-aware suggestions that help write code faster and smarter.

In this post, I will share my personal workflow with GitHub Copilot on why it has become such a big productivity boost, and how it goes far beyond simple code completion to support many other tasks.

Why GitHub Copilot?

Let us first address the fundamental question: Why should you consider using GitHub Copilot in your development workflow?

Speed and Efficiency - Copilot significantly speeds up the coding process by providing context-aware code suggestions, allowing you to write code faster.
Copilot Chat can work in Agent mode, where it can understand complex requirements and iteratively update multiple files in your project to implement features or fix bugs.
Productivity Boost - You can use Copilot to also assist with various tasks beyond just writing code, such as the below list.
- Draft test cases
- Write documentation
- Generate sample data
- Refactor legacy code
- Create and debug scripts
Focus on Higher-Level Problems - This is one of the most significant impacts of using Copilot. It shifts your focus from low-level syntax and implementation details to higher-level problem-solving.
Learning and Exploration - Copilot serves as an incredible learning tool, especially when working with unfamiliar APIs or frameworks.
For example, you can ask Copilot to scan your codebase and provide a summary of how a particular function or module works.
It also enables you to work across multiple programming languages, even ones you're less familiar with.
Reduced Context Switching - You can ask questions and get guidance without leaving your editor. It has a built-in web search tool that can fetch relevant information from the web and display it directly in the chat interface.

Setting Up GitHub Copilot

To get started, go to GitHub Copilot and sign up for the appropriate plan. You can use the Free plan to try out most of the features.
Install the GitHub Copilot extension in VS Code:
- Open VS Code
- Navigate to Extensions (or press Ctrl+Shift+X)
- Search for "GitHub Copilot"
- Click Install

For other IDEs like JetBrains products, follow their specific installation instructions.

After installation:

You'll be prompted to sign in to your GitHub account
Authorize the GitHub Copilot extension
The inline suggestions are the most useful feature. You can accept suggestions with Tab or reject them with Esc. Here is the list of all the Keyboard Shortcuts below.
- Accept suggestion: Tab
- Reject suggestion: Esc
- Show next suggestion: Alt+] (Windows/Linux) or Option+] (Mac)
- Show previous suggestion: Alt+[ (Windows/Linux) or Option+[ (Mac)
- Trigger inline suggestion: Alt+\ (Windows/Linux) or Option+\ (Mac)
- Open Copilot Chat: Ctrl+Shift+I (Windows/Linux) or Cmd+Shift+I (Mac)

Tips for using GitHub Copilot

I have been using GitHub Copilot for over a year now, and it has evolved over time with new features and capabilities. I have shared some strategies below that I personally use to be more effective with Copilot.

Craft Effective Prompts

Copilot performs best when your request is clear and detailed. Think of prompts as requirements you would hand to a teammate.

Be specific about what you want. Include details about the functionality, frameworks, libraries, or patterns you want to use, and call out any important edge cases.

Instead of:

Generate a React component for a form

Use:

Generate a React functional component named UserRegistrationForm using TypeScript and Tailwind CSS that includes:

- Fields: Username, Email, Password, Confirm Password
- Validation: Username (3-20 alphanumeric), Email (valid format), Password (8+ chars, 1 uppercase, 1 lowercase, 1 number, 1 special char), Confirm Password (must match Password)
- Submit button disabled until all fields are valid
- On submit: create a mock user object and log it to the console

Include expected inputs and outputs to guide the result. This helps Copilot understand the rules and constraints and produce more accurate code.


 Generate a function to validate user id. It should be between 3 to 20 characters long and can include letters, numbers, underscores, and hyphens.
 Valid names - JohnDoe, jane_doe123, user-01
 Invalid names - jd, user@name, user name, user!

Don’t worry about typos. Copilot can usually understand your intent even if the wording isn't perfect.
Use the mic button to quickly capture complex requests without losing your train of thought.

Provide Context to Improve Suggestions

Although Copilot can understand your intent and pull the required context by scanning your project files, you can improve the quality of suggestions by explicitly providing context.

You can cherry-pick relevant code snippets or the entire file and paste it into the chat. You can also drag and drop multiple files into the chat.

For example, when you are creating the API endpoint to fetch products, you can provide the existing code for the Product model, database context, and any related services. This helps Copilot understand how to structure the new endpoint and what dependencies to include.

Inline Suggestions for Small Tasks

The inline suggestions are great for small tasks like writing functions, classes, or small components. You can start typing your code, and Copilot will provide suggestions based on the surrounding context or comments.

For example, if you are writing a function to validate an email address, you can start typing the function signature and Copilot will suggest the implementation.

Use Copilot Chat for Complex Tasks

When you are working on a larger feature or need to make changes that span multiple files you can use Copilot Chat.

Break down the large task into smaller, manageable parts and address them one at a time.

Instead of:

  Create a new feature to manage user profiles including
  viewing, editing, and deleting profiles.

Use:

Step 1:

    Create a UserProfile model with fields for name, email, and bio.

Step 2:

    Create a UserProfileController with endpoints to view and edit profiles.

Step 3:

    Add validation to ensure the email is in a valid format and the bio is less than 500 characters.

Stage your changes incrementally to Git as logical units.
Say you have broken down a large task into 3 parts. After each part, you can stage the changes to Git, and move to the next part. This way, if you need to revert or modify something later, you can do so without losing all your progress.
Clear chat history before starting a new task to avoid confusing context.
Use the right mode for different types of interactions:
Standard (Ask) mode - The Ask mode is for Q&A style interactions. You can ask questions about the project, get explanations of code, or request code snippets.
Agent mode - Agent mode is powerful and can handle complex, multi-step tasks that require understanding the entire project context.
- Control changes in Agent Mode - Copilot usually starts making changes to the file. But if you need more control you can explicitly add an instruction to confirm each change before it is applied.
```
    Create a new API endpoint to fetch products from the database.

    1. Create a new controller named ProductsController.
    2. Add a GET endpoint at /api/products that returns a paginated list of products.
    3. Use Entity Framework to query the database and return the products.
    4. Ensure the endpoint supports filtering by category and searching by name.

    Please confirm each change before applying.

    ```
```

Extend Copilot Capabilities with Tools

Copilot Chat has built-in tools. For instance, it can perform web searches to fetch relevant information from the internet using the built-in search tool.

You can further extend the capabilities of Copilot Chat by adding additional tools to the chat.

For example, you can attach Microsoft Docs tool to get answers from the Microsoft Docs platform directly within the chat. Here is the link to all the available tools - MCP Servers for agent mode.

Using Copilot in the Terminal

Copilot also works in the terminal by accessing the terminal output and running commands on your behalf.

This is useful when you are troubleshooting compilation errors, or authoring scripts, or debugging issues that require running commands.

Can you help me run the react app and fix the compilation errors?

Create a bash script to read the csv file and convert it to json format.

Attach Screenshots to generate or fix UI code

Copilot can also analyze images to generate or fix code. This is useful for front-end development tasks like creating responsive layouts, fixing CSS issues, or implementing design changes. You can try by taking the screenshot of the UI you want to create or fix, and paste it directly into Copilot Chat along with the prompt:

 The alignment of the User Name and Email fields is off. Please fix the CSS to align them properly and ensure the form is responsive.

 Generate a responsive login form with fields for Username and Password, a Remember Me checkbox, and a Submit button. Use Tailwind CSS for styling.

Generate Architecture Diagrams and Documentation

Copilot is also useful to document your project and create diagrams.

Create code comments and summaries for complex functions and classes
Generate API documentation from code comments and annotations in your code
Generate ReadMe file for your project

Create mermaid diagrams from prompts or from codebase


 Generate a mermaid architecture diagram for the login flow in my application.
 Include the components: Client, Auth Service, Database, and Token Service.

Use tools like Pandoc to convert markdown to other formats like PDF, HTML, DOCX

Use Copilot Instructions in Codebase to guide Copilot

You can customize Copilot's behavior to always follow your project-specific styles, patterns and standards by embedding instructions directly into your codebase.

Add a .github/copilot-instructions.md file at the root of your repository. This file is where you define the global rules you want Copilot to follow. Copilot automatically reads this file and applies the guidance when suggesting code.

Here is an example of instructions for a .NET Core API project -

# Project Overview

This is a .NET Core Web API project that provides endpoints for managing products and orders.

# Folder Structure

- `src/` - Contains the main application code
- `tests/` - Contains unit and integration tests
- `docs/` - Contains project documentation

# Libraries and Frameworks

- Use ASP.NET Core 6.0 for building the Web API
- Use Entity Framework Core for database interactions
- Use xUnit and Moq for unit testing

## Coding Standards

1. Always use async/await for asynchronous operations.
2. Follow RESTful conventions for API design.
3. Use dependency injection for all services and repositories.
4. Ensure all code is properly documented with XML comments.
5. Use Entity Framework Core for database interactions and follow the repository pattern.

Learn More

Conclusion

In this post, I have only shared a few strategies that I personally use to be more effective with GitHub Copilot in VS Code. There are many more ways to leverage its capabilities in not just VS Code, but also on the GitHub website. The key is to experiment and find what works best for your development style and project requirements.

Tags