Site logo
Authors
  • avatar Nguyễn Đức Xinh
    Name
    Nguyễn Đức Xinh
    Twitter
Published on
Published on

Guide to Using GitHub Copilot in VS Code

GitHub Copilot is an AI-powered coding assistant developed by GitHub in collaboration with OpenAI. It acts as your virtual pair programmer, offering intelligent code suggestions, autocompletions, and even entire function implementations based on natural language comments or existing code. Powered by OpenAI's Codex model, Copilot supports a wide range of programming languages and frameworks, making it a versatile tool for developers. Follow this guide to install and use GitHub Copilot in VS Code.

Requirements

  • An active GitHub Copilot subscription.
  • VS Code installed on your machine.

Installing the GitHub Copilot Extension

  1. Open the Extensions tab by clicking on the Extensions icon in the sidebar or use the shortcut: Ctrl+Shift+X (Windows), Cmd+Shift+X (Mac).
  2. Search for GitHub Copilot and press Enter.
  3. Select the extension named GitHub Copilot and click Install .

Copilot

  1. Note : Installing the GitHub Copilot extension will also automatically install the GitHub Copilot Chat extension.

Logging into GitHub in VS Code

  1. After successfully installing the GitHub Copilot extension, a login prompt will appear at the bottom-right corner of VS Code.

Copilot

  1. Proceed to link your GitHub account.

Copilot

  1. You can check or change the linked GitHub account by clicking the Profile icon in the left sidebar. Copilot

Using GitHub Copilot

You can utilize GitHub Copilot in three main ways:

  • Github Copilot Chat
  • Github Copilot Inline
  • Github Copilot Edits

1. Using GitHub Copilot Inline

  • Activate GitHub Copilot Inline by pressing: Ctrl+I (Windows), Cmd+I (Mac).
  • Enter your desired prompt.

GitHub Copilot Inline

  • Example: Request Copilot to create a login page with the prompt: Help me to create a Login form.

  • Copilot generates the relevant code. If the result meets your expectations, click Accept or refine your request for additional changes.

GitHub Copilot Inline

Inline Code Suggestions

  • Start typing, and Copilot will suggest code based on context.
  • Accept suggestion: Tab
  • Dismiss suggestion: Esc
  • Cycle through suggestions: Alt + ] (Windows/Linux) / Option + ] (Mac)

Image

Block Code Completion

Write a comment describing what you want the function to do, and Copilot will generate entire functions or code blocks for you.

Image

Natural Language to Code

Copilot understands comments and converts them into code:

Image

2. GitHub Copilot Chat

GitHub Copilot Chat allows you to interact with Copilot via a chat interface, asking for explanations, refactoring help, and best practices.

  • Open the GitHub Copilot Chat by clicking the Copilot icon at the top of VS Code or using the shortcut:

    • Ctrl+Shift+I (Windows)

    • Cmd+Shift+I (Mac). Copilot Chat

  • Example: Request Copilot to explain your source code using the following prompt: Can you tell me about this repository?

  • Result: Copilot provides detailed explanations, including an overview, folder significance, installation steps, configuration, scripts, and more. Copilot Chat

3. Using GitHub Copilot Edits

  • Open GitHub Copilot Edits by clicking the Copilot icon at the top of VS Code or using the shortcut: Cmd+Control+I (Mac).

  • Add related files to the Working Set to ensure Copilot generates contextually accurate code.

Copilot Edits

  • Example: Request Copilot to create a login form: Help me to create a Login form.

  • Copilot generates the requested code. Review and accept the result or provide additional prompts for refinement. Copilot Chat

Conclusion

You’ve successfully installed and started using GitHub Copilot in VS Code. This powerful tool helps you accelerate software development with intelligent code suggestions and other productivity-enhancing features. Explore its full potential to improve your programming skills and efficiency!