Skip to content

Commit 2e80b22

Browse files
lzwjavalzwjava
committed
docs(notes): add vscode copilot guide
1 parent dd74ed7 commit 2e80b22

File tree

1 file changed

+224
-0
lines changed

1 file changed

+224
-0
lines changed

‎notes/2025-06-04-vscode-copilot-guide-en.md

Lines changed: 224 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,224 @@
1+
---
2+
title: Using GitHub Copilot in Visual Studio Code
3+
lang: en
4+
layout: post
5+
audio: false
6+
translated: false
7+
generated: true
8+
---
9+
10+
GitHub Copilot is an AI-powered coding assistant developed by GitHub and OpenAI, designed to enhance developer productivity in Visual Studio Code (VS Code). It provides context-aware code completions, natural language chat, and advanced editing capabilities. This guide walks you through setting up Copilot, exploring its features, and optimizing your workflow with tips and best practices.
11+
12+
## 1. Introduction to GitHub Copilot
13+
GitHub Copilot acts as an AI pair programmer, offering real-time code suggestions, answering coding questions, and automating repetitive tasks. It is powered by large language models trained on vast datasets of public code, enabling it to support numerous programming languages and frameworks, including Python, JavaScript, TypeScript, Ruby, Go, C#, and C++.
14+
15+
Key features include:
16+
- **Code Completions**: Suggests code snippets as you type, from single lines to entire functions.
17+
- **Copilot Chat**: Allows natural language queries to explain code, generate snippets, or debug issues.
18+
- **Agent Mode**: Automates multi-step coding tasks, such as refactoring or creating apps.
19+
- **Custom Instructions**: Tailors suggestions to match your coding style or project requirements.
20+
21+
## 2. Setting Up GitHub Copilot in VS Code
22+
23+
### Prerequisites
24+
- **VS Code**: Download and install Visual Studio Code from the [official website](https://code.visualstudio.com/). Ensure you have a compatible version (any recent version supports Copilot).
25+
- **GitHub Account**: You need a GitHub account with access to Copilot. Options include:
26+
- **Copilot Free**: Limited completions and chat interactions per month.
27+
- **Copilot Pro/Pro+**: Paid plans with higher limits and advanced features.
28+
- **Organization Access**: If provided by your organization, check with your admin for access details.
29+
- **Internet Connection**: Copilot requires an active connection to provide suggestions.
30+
31+
### Installation Steps
32+
1. **Open VS Code**:
33+
Launch Visual Studio Code on your machine.
34+
35+
2. **Install the GitHub Copilot Extension**:
36+
- Go to the **Extensions** view (Ctrl+Shift+X or Cmd+Shift+X on macOS).
37+
- Search for "GitHub Copilot" in the Extensions Marketplace.
38+
- Click **Install** for the official GitHub Copilot extension. This also installs the Copilot Chat extension automatically.
39+
40+
3. **Sign In to GitHub**:
41+
- After installation, a prompt may appear in the VS Code Status Bar (bottom-right corner) to set up Copilot.
42+
- Click the Copilot icon and select **Sign in** to authenticate with your GitHub account.
43+
- If no prompt appears, open the Command Palette (Ctrl+Shift+P or Cmd+Shift+P) and run the command `GitHub Copilot: Sign in`.
44+
- Follow the browser-based authentication flow, copying the code provided by VS Code to GitHub.
45+
46+
4. **Verify Activation**:
47+
- Once signed in, the Copilot icon in the Status Bar should turn green, indicating an active state.
48+
- If you don’t have a Copilot subscription, you’ll be enrolled in the Copilot Free plan with limited monthly usage.
49+
50+
5. **Optional: Disable Telemetry**:
51+
- By default, Copilot collects telemetry data. To disable, go to **Settings** (Ctrl+, or Cmd+,), search for `telemetry.telemetryLevel`, and set it to `off`. Alternatively, adjust Copilot-specific settings under `GitHub Copilot Settings`.
52+
53+
> **Note**: If your organization has disabled Copilot Chat or restricted features, contact your admin. For troubleshooting, refer to the [GitHub Copilot Troubleshooting Guide](https://docs.github.com/en/copilot/troubleshooting).[](https://code.visualstudio.com/docs/copilot/setup)
54+
55+
## 3. Core Features of GitHub Copilot in VS Code
56+
57+
### 3.1 Code Completions
58+
Copilot suggests code as you type, from single lines to entire functions or classes, based on the context of your code and file structure.
59+
- **How It Works**:
60+
- Start typing in a supported language (e.g., JavaScript, Python, C#).
61+
- Copilot displays suggestions in grayed-out "ghost text."
62+
- Press **Tab** to accept a suggestion or continue typing to ignore it.
63+
- Use **Alt+]** (next) or **Alt+[** (previous) to cycle through multiple suggestions.
64+
- **Example**:
65+
```javascript
66+
// Calculate factorial of a number
67+
function factorial(n) {
68+
```
69+
Copilot might suggest:
70+
```javascript
71+
if (n === 0) return 1;
72+
return n * factorial(n - 1);
73+
}
74+
```
75+
Press **Tab** to accept the suggestion.
76+
77+
- **Tips**:
78+
- Use descriptive function names or comments to guide Copilot (e.g., `// Sort an array in ascending order`).
79+
- For multiple suggestions, hover over the suggestion to open the Completions Panel (Ctrl+Enter) to view all options.
80+
81+
### 3.2 Copilot Chat
82+
Copilot Chat allows you to interact with Copilot using natural language to ask questions, generate code, or debug issues.
83+
- **Accessing Chat**:
84+
- Open the **Chat View** from the Activity Bar or use **Ctrl+Alt+I** (Windows/Linux) or **Cmd+Ctrl+I** (macOS).
85+
- Alternatively, use **Inline Chat** (Ctrl+I or Cmd+I) directly in the editor for context-specific queries.
86+
- **Use Cases**:
87+
- **Explain Code**: Select a code block, open Inline Chat, and type `explain this code`.
88+
- **Generate Code**: Type `write a Python function to reverse a string` in the Chat View.
89+
- **Debugging**: Paste an error message into Chat and ask for a fix.
90+
- **Example**:
91+
In the Chat View, type:
92+
```
93+
What is recursion?
94+
```
95+
Copilot responds with a detailed explanation, often including code examples in Markdown.
96+
97+
- **Slash Commands**:
98+
Use commands like `/explain`, `/doc`, `/fix`, `/tests`, or `/optimize` to specify tasks. For example:
99+
```
100+
/explain this function
101+
```
102+
with a selected function will generate a detailed explanation.
103+
104+
### 3.3 Agent Mode (Preview)
105+
Agent Mode enables Copilot to autonomously handle multi-step coding tasks, such as creating apps, refactoring code, or writing tests.
106+
- **How to Use**:
107+
- Open the **Copilot Edits View** in VS Code Insiders or Stable (if available).
108+
- Select **Agent** from the mode dropdown.
109+
- Enter a prompt, e.g., `Create a React form component with name and email fields`.
110+
- Copilot analyzes your codebase, suggests edits, and can run terminal commands or tests.
111+
- **Capabilities**:
112+
- Generates code across multiple files.
113+
- Monitors errors and iterates to fix issues.
114+
- Integrates new libraries or migrates code to modern frameworks.
115+
116+
> **Note**: Agent Mode is experimental and performs best in smaller repositories. Share feedback via the VS Code GitHub repo.[](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode)
117+
118+
### 3.4 Custom Instructions
119+
Customize Copilot to align with your coding style or project requirements.
120+
- **Setup**:
121+
- Create a `.github/copilot-instructions.md` file in your workspace.
122+
- Add instructions in Markdown, e.g., `Use snake_case for Python variable names`.
123+
- Enable custom instructions in **Settings** > **GitHub** > **Copilot** > **Enable custom instructions** (VS Code 17.12 or later).
124+
- **Example**:
125+
```markdown
126+
# Copilot Custom Instructions
127+
- Use camelCase for JavaScript variables.
128+
- Prefer async/await over .then() for promises.
129+
```
130+
Copilot will tailor suggestions to these preferences.
131+
132+
### 3.5 Workspace Context with @workspace
133+
Use the `@workspace` command to query your entire codebase.
134+
- **Example**:
135+
In the Chat View, type:
136+
```
137+
@workspace Where is the database connection string configured?
138+
```
139+
Copilot searches your workspace and references relevant files.
140+
141+
### 3.6 Next Edit Suggestions (Preview)
142+
Copilot predicts and suggests the next logical edit based on your recent changes.
143+
- **How It Works**:
144+
- As you edit code, Copilot highlights potential next edits.
145+
- Accept suggestions with **Tab** or modify them via Inline Chat.
146+
- **Use Case**: Ideal for iterative refactoring or completing related code changes.
147+
148+
## 4. Tips and Tricks for Optimizing Copilot Usage
149+
150+
### 4.1 Write Effective Prompts
151+
- Be specific: Instead of `write a function`, try `write a Python function to sort a list of dictionaries by the 'age' key`.
152+
- Provide context: Include framework or library details (e.g., `use React hooks`).
153+
- Use comments: Write `// Generate a REST API endpoint in Express` to guide completions.
154+
155+
### 4.2 Leverage Context
156+
- **Reference Files/Symbols**: Use `#filename`, `#folder`, or `#symbol` in Chat prompts to scope context.
157+
```
158+
/explain #src/utils.js
159+
```
160+
- **Drag and Drop**: Drag files or editor tabs into the Chat prompt for context.
161+
- **Attach Images**: In VS Code 17.14 Preview 1 or later, attach screenshots to illustrate issues (e.g., UI bugs).
162+
163+
### 4.3 Use Slash Commands
164+
- `/doc`: Generate documentation for a function.
165+
- `/fix`: Suggest fixes for errors.
166+
- `/tests`: Create unit tests for selected code.
167+
- Example:
168+
```
169+
/tests Generate Jest tests for this function
170+
```
171+
172+
### 4.4 Save and Reuse Prompts
173+
- Create a `.prompt.md` file in `.github/prompts/` to store reusable prompts.
174+
- Example:
175+
```markdown
176+
# React Component Prompt
177+
Generate a React functional component with Tailwind CSS styling. Ask for component name and props if not provided.
178+
```
179+
- Attach the prompt in Chat to reuse it across projects.
180+
181+
### 4.5 Choose the Right Model
182+
- Copilot supports multiple language models (e.g., GPT-4o, Claude Sonnet).
183+
- Select models in the Chat View dropdown for faster coding or deeper reasoning.
184+
- For complex tasks, Claude Sonnet may perform better in Agent Mode.[](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode)
185+
186+
### 4.6 Index Your Workspace
187+
- Enable workspace indexing for faster, more accurate code searches.
188+
- Use a remote index for GitHub repositories or a local index for large codebases.
189+
190+
## 5. Best Practices
191+
- **Review Suggestions**: Always verify Copilot’s suggestions for accuracy and alignment with your project’s standards.
192+
- **Combine with IntelliCode**: In Visual Studio, Copilot complements IntelliCode for enhanced completions.[](https://devblogs.microsoft.com/visualstudio/github-copilot-in-visual-studio-2022/)
193+
- **Check Security**: Copilot may suggest code with vulnerabilities. Review suggestions, especially in sensitive projects, and check with your organization’s policies.[](https://medium.com/%40codebob75/how-to-use-copilot-in-visual-studio-a-step-by-step-guide-b2a5db3b54ba)
194+
- **Use Meaningful Names**: Descriptive variable and function names improve suggestion quality.
195+
- **Iterate with Chat**: Refine prompts if initial suggestions are off-target.
196+
- **Monitor Usage Limits**: With Copilot Free, track your monthly completions and chat interactions via the GitHub account settings or Copilot badge in VS Code.[](https://learn.microsoft.com/en-us/visualstudio/ide/copilot-free-plan?view=vs-2022)
197+
198+
## 6. Troubleshooting Common Issues
199+
- **Copilot Inactive**: Ensure you’re signed in with a GitHub account that has Copilot access. Refresh credentials via the Copilot Status Bar dropdown.
200+
- **No Suggestions**: Check your internet connection or switch to a supported language. Adjust settings under **Tools** > **Options** > **GitHub Copilot**.
201+
- **Limited Functionality**: If you hit the Copilot Free usage limit, you’ll revert to IntelliCode suggestions. Upgrade to a paid plan or check your status.[](https://learn.microsoft.com/en-us/visualstudio/ide/copilot-free-plan?view=vs-2022)
202+
- **Network Issues**: See the [GitHub Copilot Troubleshooting Guide](https://docs.github.com/en/copilot/troubleshooting).
203+
204+
## 7. Advanced Use Cases
205+
- **Database Queries**: Ask Copilot to generate SQL queries (e.g., `Write a SQL query to join two tables`).
206+
- **API Development**: Request API endpoint code (e.g., `Create a Flask route to handle POST requests`).
207+
- **Unit Testing**: Use `/tests` to generate tests for frameworks like Jest or Pytest.
208+
- **Refactoring**: Use Agent Mode to refactor code across files (e.g., `Migrate this jQuery code to React`).
209+
210+
## 8. Privacy and Security Considerations
211+
- **Data Usage**: Copilot transmits code snippets to GitHub servers in real-time to generate suggestions but does not retain them (Copilot for Business discards snippets immediately).[](https://medium.com/%40codebob75/how-to-use-copilot-in-visual-studio-a-step-by-step-guide-b2a5db3b54ba)
212+
- **Public Code Matching**: Copilot may suggest code matching public GitHub repositories. Enable code referencing to view license details.[](https://learn.microsoft.com/en-us/visualstudio/ide/visual-studio-github-copilot-extension?view=vs-2022)
213+
- **Organizational Policies**: Check if your organization allows Copilot usage, as some disable Chat or restrict suggestions.[](https://docs.github.com/en/copilot/quickstart)
214+
- **Telemetry**: Disable telemetry in VS Code settings if desired.[](https://code.visualstudio.com/docs/copilot/setup)
215+
216+
## 9. Resources for Further Learning
217+
- [GitHub Copilot Documentation](https://docs.github.com/en/copilot)
218+
- [VS Code Copilot Quickstart](https://code.visualstudio.com/docs/copilot/copilot-quickstart)
219+
- [Copilot Chat Tutorial](https://code.visualstudio.com/docs/copilot/copilot-chat)
220+
- [VS Code Copilot Series on YouTube](https://www.youtube.com/playlist?list=PLj6YeMhvp2S6X0vF4TrRkpZ7GIqM3oPWp)
221+
- [GitHub Copilot FAQs](https://docs.github.com/en/copilot/faq)
222+
223+
## 10. Conclusion
224+
GitHub Copilot in VS Code is a powerful tool that streamlines coding by providing intelligent suggestions, answering questions, and automating complex tasks. By setting it up correctly, leveraging its features, and following best practices, you can significantly boost your productivity and focus on creative coding tasks. Experiment with Copilot’s capabilities, customize it to your workflow, and stay mindful of security and usage limits to make the most of this AI pair programmer.

0 commit comments

Comments
 (0)