VS Code GitHub Copilot | Tutorial

\n

GitHub Copilot is an AI coding assistant jointly developed by GitHub and OpenAI. It can automatically complete code, generate functions, optimize logic, and even write entire code modules based on context, helping developers code more efficiently.

\n

GitHub Copilot integrates into various IDEs such as VS Code, Visual Studio, and JetBrains, making you feel like you have an experienced partner assisting you while you code.

\n\n

---

\n

Core Features

\n

Automatic Code Completion

\n

GitHub Copilot can provide real-time code suggestions based on your code context and comments. It can:

\n

\n
• Complete entire lines of code
\n
• Generate complete functions
\n
• Generate code based on descriptive comments
\n

\n

Code Explanation

\n

Copilot can help you understand unfamiliar code:

\n

\n
• Explain the functionality of complex code snippets
\n
• Provide code optimization suggestions
\n
• Identify potential issues
\n

\n

Multi-language Support

\n

Supports almost all mainstream programming languages, including:

\n

\n
• JavaScript/TypeScript
\n
• Python
\n
• Java
\n
• C++
\n
• Go
\n
• Ruby, etc.
\n

\n

---

\n

Installation and Setup

\n

Installation Steps

\n

\n
1. Prerequisites\n
   \n
   • VS Code must be correctly installed, version 1.57 or higher is recommended.
   \n
   • A GitHub account, and you need to enable a GitHub Copilot subscription (Personal, Team, or Enterprise editions are all supported).
   \n
   \n
\n
2. Install Extension\n
   \n
   • Open VS Code and go to the Extensions Marketplace.
   \n
   • Search for GitHub Copilot.
   \n
   • Click Install to install.
   \n
   \n
\n

\n\n

After installation, you can click the small icon in the top right corner to open the Copilot chat window:

\n\n

You can also click the icon in the bottom right corner:

\n\n

\n
3. Log in to GitHub Account\n
   \n
   • After installation, VS Code will prompt you to log in to your GitHub account.
   \n
   • Click Sign in to GitHub. The browser will redirect to the GitHub authorization page. After authorizing, it will automatically return to VS Code.
   \n
   \n
\n

\n\n

\n
4. Enable GitHub Copilot\n
   \n
   • In VS Code, press Ctrl + Shift + P and type Copilot: Enable.
   \n
   • Once confirmed, you can start using it.
   \n
   \n
\n

\n

After installation, open VS Code settings and search for Copilot. Here you can adjust settings in VS Code:

\n

\n
• Suggestion trigger method (automatic or manual)
\n
• Suggestion display position
\n
• Language preference settings
\n

\n\n

---

\n

Usage Tips

\n

Smart Completion

\n

When you start typing code, GitHub Copilot will automatically provide suggestions, for example:

\n

function fetchData(url) { // Copilot will automatically provide an implementation based on the fetch API}\n

\n\n

We can press the Tab key to accept the suggestion.

\n

\n
• If there are multiple suggestions, press Ctrl + ] or Ctrl + [ to switch.
\n
• If you don't want to use the suggestion, press Esc to cancel.
\n

\n

Generate Code from Comments

\n

Simply write a comment, and Copilot will implement it for you:

\n

# Implement a quicksort algorithm\n

\n\n

Example

\n

# Implement a quicksort algorithm\n\ndef quick_sort(arr):\n\nif len(arr)<=1:\n\nreturn arr\n\n pivot = arr[len(arr) // 2]\n\n left =\n\nreturn quick_sort(left) + middle + quick_sort(right)\n

\n

Generate Test Cases

\n

You can even write comments directly to let Copilot generate tests for you:

\n

// is quicksort Generate Unit Tests for Functions\n

\n\n

Additionally, you can right-click in the editor, select Copilot, and bring up the desired feature:

\n\n

Shortcut Key Reference:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n

Shortcut Key	Function Description
Tab	Accept suggestion
Esc	Ignore suggestion
Ctrl + ]	View next suggestion
Ctrl + [	View previous suggestion
Ctrl + Enter	Open Copilot panel
Ctrl + Shift + P	Enable/Disable Copilot

\n

---

\n

Using Chat Features in VS Code

\n

To use the chat feature in Visual Studio Code, you can ask questions about your codebase in natural language, or perform multi-file editing within your project. The chat feature can run in different modes according to your needs, satisfying everything from asking questions and multi-file editing to initiating agent-based coding workflows.

\n

You can use VS Code's chat feature in the following scenarios:

\n

\n
• Understanding Code: For example, "Explain how this authentication middleware works?"
\n
• Debugging Issues: For example, "Why am I getting a null reference in this loop?"
\n
• Getting Code Suggestions: For example, "Show me how to implement a binary search tree in Python?"
\n
• Optimizing Performance: For example, "Help me improve the efficiency of this database query?"
\n
• Learning Best Practices: For example, "What are the recommended methods for handling errors in asynchronous functions?"
\n
• Getting VS Code Tips: For example, "How do I customize keyboard shortcuts?"
\n

\n

Tip: If you don't have a Copilot subscription yet, you can use Copilot for free by registering for the Copilot Free plan, which offers limited completions and chat interactions per month.

\n

Chat Modes

\n

Depending on your specific needs, you can choose different chat modes:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n

Mode	Description	Scenario
Ask	Ask questions about the codebase or technical concepts.	Available in Stable or Preview. Understand how code snippets work, brainstorm software design ideas, or explore new technologies.
Edit	Perform multi-file edits within the codebase.	Available in Stable or Preview. Apply code edits directly in your project to implement new features, fix bugs, or refactor code.
Agent	Initiate an agent-based coding workflow.	Available in Stable or Preview. Autonomously implement new features or advanced project requirements with minimal guidance, call tools to execute specialized tasks, and iterate to resolve issues when they arise.

\n

You can switch between different chat modes by using the mode dropdown menu in the chat view.

\n