Mobile Study: Using Chat in VS Code with GitHub Copilot

2025年8月31日日曜日

Using Chat in VS Code with GitHub Copilot

GitHub Copilot Chat in VS Code allows you to interact with your codebase using natural language. You can:

Ask questions about your code
Fix bugs
Add features
Optimize performance
Learn best practices

✅ Prerequisites

Latest version of Visual Studio Code
GitHub Copilot access (Free or Paid plan)

🚀 Chat Interfaces in VS Code

Experience	Shortcut	Best For
Chat View	`Ctrl+Alt+I`	Ongoing multi-turn chats, multiple modes
Inline Chat	`Ctrl+I`	In-place edits or suggestions in files/terminal
Quick Chat	`Ctrl+Shift+Alt+L`	Fast, one-off questions

Access any of these via the Copilot icon or Command Palette.

🧰 Built-in Chat Modes

Mode	Description
Ask	Ask about your codebase, frameworks, or dev concepts
Edit	Make precise edits across multiple files based on natural language prompts
Agent	Autonomously analyze, plan, and implement complex multi-file changes

✨ You can create custom chat modes for tasks like code review, documentation, etc.

🔄 Switch Models

In the chat input field, use the Model Picker dropdown to choose from available models.
Different models are better suited for different tasks (e.g., fast code gen vs. deeper reasoning).

🗨️ Submitting Prompts

Use natural language like:

📖 “Explain how the login system works”
🐞 “Fix the null reference in script.js”
🚀 “Create a new endpoint for updating user settings”
🎨 “Style the submit button using #styles.css”
📘 “What’s the best way to handle async errors in Node?”

🧩 Add Context to Prompts

Use # to reference:

#codebase — entire project
#<filename> — specific file
#usages — show where a function is used
#problems — unresolved issues
#fetch <url> — web content (e.g. docs)
#githubRepo — search GitHub repos (e.g. #githubRepo microsoft/vscode)

Also use the "Add Context" button in the Chat View for visual selection.

🧪 Experimental Features

✏️ Edit Previous Prompts

Edit a previous chat message in place (via hover or inline).
Reverts changes made after that prompt.
Enable via chat.editRequests setting (inline, hover, input, none).

🔁 Checkpoints (Preview)

Restores workspace to a pre-prompt state.
Enable via chat.checkpoints.enabled
Use Restore Checkpoint or Redo to manage file changes.
Enable chat.checkpoints.showFileChanges to show which files were affected.

🖼️ Vision Support

Drag & drop images or screenshots into Chat View.
Example: ask “What does this diagram show?” or “Implement this UI sketch.”

🗃️ Chat History & Management

Use New Chat (+) to reset context
Use Show Chats... to view previous sessions
Export chat to JSON (Command Palette: Chat: Export Chat...)
Copy individual messages (Markdown format)

🪄 Open Chat in New Window or Tab

In the Chat View:

Click ... > Open Chat in Editor
Or ... > Open Chat in New Window
Enable Always on Top for floating windows

🎙️ Voice Interactions (Optional)

Install VS Code Speech extension:

Dictate prompts
Use “Hey Code” to start chats
Hold-to-speak mode for faster input

🔧 Developer Tools

Use Developer: Show Chat Debug View (from Command Palette) to inspect:
- System/user prompts
- Tools used
- Response payloads

💻 Start Chat from the Command Line


code chat "Find and fix all untyped variables"

Options:

-m, --mode <ask|edit|agent|custom>: Set chat mode
-a, --add-file <path>: Add files as context
--maximize: Maximize view
-r, --reuse-window: Use current window
-n, --new-window: Open in new window
-: Pipe from stdin

Example:


cat app.js | code chat "Why does this fail?" -

Mobile Study