31 KiB
Order | Area | TOCTitle | ContentId | PageTitle | DateApproved | MetaDescription | MetaSocialImage |
---|---|---|---|---|---|---|---|
6 | copilot | Copilot Chat | 130ecf6c-6f06-4ddd-8b1d-f85f023af77b | AI-powered chat conversations with GitHub Copilot | 10/29/2024 | Interact with GitHub Copilot through AI-powered chat conversations in VS Code to generate code, increase your code understanding, and even configure your editor. | images/shared/github-copilot-social.png |
Using Copilot Chat in VS Code
With the GitHub Copilot Chat extension in Visual Studio Code, you can have AI-powered chat conversations to generate code, increase your code understanding, and even configure your editor. Instead of searching for answers in documentation or online forums, you can ask Copilot Chat directly in VS Code, and get code suggestions while you're in the flow of coding.
Copilot Chat integrates in your developer flow and gives you assistance where you need it:
- Inline Chat: start a chat conversation directly from the editor and get inline suggestions while you're coding
- Chat view: have an AI assistant on the side to help with your questions and to provide code suggestions
- Quick Chat: ask a quick question and get back into what you're doing
Copilot Chat use cases
You can use Copilot Chat in various developer scenarios, such as:
- Answering questions about coding and technology topics ("What is a linked list?", "top 10 popular web frameworks")
- Answering coding questions on how to best solve a problem ("How to add auth to my project?")
- Explaining someone else's code and suggesting improvements ("@workspace /explain", "What does this code do?")
- Proposing code fixes ("@workspace /fix", "This method gives a FileNotFoundException")
- Generating unit test cases ("@workspace /tests")
- Generating code documentation ("/doc")
Prerequisites
-
To use GitHub Copilot, you must have an active subscription for GitHub Copilot in your personal account, or you need to be assigned a seat by your organization.
-
To use GitHub Copilot in VS Code, you must have the GitHub Copilot extension. When you install this extension, the GitHub Copilot Chat extension is also installed.
Follow these steps to set up GitHub Copilot in VS Code by signing up for a subscription and installing the Copilot extension in VS Code.
Getting started
Open chat
Use the Copilot Chat menu in the VS Code Command Center to get started with the different chat experiences.
Or use one of the keyboard shortcuts to start a chat conversation with Copilot.
Shortcut | Description |
---|---|
kb(workbench.action.chat.open) |
Open the Chat view and start a chat conversation with Copilot by using natural language. |
kb(workbench.action.quickchat.toggle) |
Open Quick Chat and ask a quick question to Copilot. |
kb(inlinechat.start) |
Start Inline Chat to send a chat request to Copilot directly from the editor. Use natural language or use / commands to give instructions to Copilot. |
Chat context
Copilot tries to determine the intent and scope of your question based on your natural language chat prompt. To help Copilot give you the best and most relevant answers, add context to your chat prompt. For example, attach specific files or even the full contents of your workspace, the current editor selection, and more.
You can add context to your chat message by using the button (kb(workbench.action.chat.attachContext)
) in any of the chat experiences. You can then select the specific type of context from a Quick Pick, such as the current selection, one or more files from the workspace, or one or more symbols from your source code.
[!TIP] To quickly add multiple items from the attachment Quick Pick, use the
kbstyle(Up)
andkbstyle(Down)
keys to navigate the list, use thekbstyle(Right)
key to add the item as context, and then repeat this for other items.
Another quick way to add specific files to your chat prompt is to drag and drop files from the Explorer or Search view onto the chat input field. You can also drag and drop an editor tab onto the chat input field to add the file as context.
VS Code automatically adds the currently active editor as context to your chat prompt in the Chat view. If you have a block of code selected in the editor, only that selection is added as context. You can disable adding the active editor by selecting the disable icon on the context item.
You can also reference context by using chat variables. Type the #
character and you'll see a list of available chat variables. For example, you can use #selection
to add the current editor selection to your chat prompt, or #file
to add a specific file from the workspace.
[!NOTE] If possible, the full contents of the file will be included when you attach a file. If that is too large to fit into the context window, an outline of the file will be included that includes functions and their descriptions without implementations. If the outline is also too large, then the file won't be part of the prompt.
Changing your AI model
The model picker in the chat input field enables you to change the language model that is used to generate responses. Select the model picker and choose one of the available language models.
You can use the model picker in the different chat experiences.
Inline Chat
Inline Chat enables you to have a chat conversation with Copilot directly from the editor without leaving the context of your work. With Inline Chat, you can preview code suggestions in-place within your code, which can be useful for quickly iterating on code changes.
In any file, press kb(inlinechat.start)
on your keyboard to bring up Copilot Inline Chat and get started. Alternatively, open a file and select Editor Inline Chat in the Copilot Chat Command Center menu.
Depending on your question, Copilot suggests code modifications or refactorings for the file you're currently in. Copilot gives a preview of the updates, which you can then accept (kb(inlineChat.acceptChanges)
) or discard (kb(inlineChat.close)
). Optionally, you can generate a new code suggestion.
If you have a block of code selected in the editor, Copilot scopes your question to the selection.
You can also ask Copilot more exploratory questions that emerge as you write and iterate on code, such as "Explain this piece of code", or "How do I add functionality to do X?".
With the setting(inlineChat.mode)
setting, you can configure how Inline Chat shows updates in the editor. The default setting value is live
, which means that the updates are applied directly in the editor. If you prefer to preview the changes side-by-side instead, you configure the setting to preview
.
The following example shows the preview
mode for Inline Chat.
Chat view
Open the Chat view
The Chat view enables you to have a chat conversation with Copilot in a separate view. By default, the Chat view is located in the Secondary Side Bar. The Secondary Side Bar is always positioned opposite the Primary Side Bar, so you can have the Chat view open at the same time as the Explorer, Source Control, or other views in the Primary Side Bar.
You can access the Chat view by pressing kb(workbench.action.chat.open)
or by selecting Open Chat in the Copilot Chat Command Center menu.
You can also use the layout controls in the VS Code title bar to toggle the Secondary Side Bar, which contains the Chat view.
[!TIP] At any time, you can drag the Chat view to another location, or even open it as an editor. Learn more about custom layouts in VS Code.
Enter a chat prompt
To get started, type your question in the chat input field. For example, ask a question about a general programming topic, or ask about the specific code in your workspace. Make sure to attach the relevant context for your chat prompt to help Copilot give you more relevant answers.
[!TIP] Type
/help
in the chat input box to get help about GitHub Copilot and how to interact with Copilot Chat.
Copilot Chat can provide rich and interactive results that contain: simple text, images, buttons for invoking VS Code commands, references URIs or editor locations, or file trees (for example, to show a workspace preview when a chat participant proposes to create a new workspace).
The following example ("@workspace /new Express with TypeScript and pug") shows a chat prompt to create an Express app, which returns a tree view with a suggested workspace structure and a button to create a new workspace.
As you keep the conversation going, Copilot maintains the history of your chat messages and responses, and provides related follow-up questions or commands in its response too.
Code blocks
Depending on your question, Copilot Chat might return source code in a code block. Depending on the language extension, the code block in the chat response might support IntelliSense, which enables you get information about methods and symbols by hovering over them, or to go to their definition.
Hovering over the code block presents options to Apply in Editor, Insert at Cursor, and Copy.
The More Actions (...
) button gives options to Insert Into New File and Insert into Terminal (kb(workbench.action.chat.runInTerminal)
).
If Copilot Chat detects that a code block contains a shell command, you can run it directly in the integrated terminal with Insert into Terminal (kb(workbench.action.chat.runInTerminal)
). This option creates or opens the active terminal and inserts the command text, ready for you to run.
[!TIP] Navigate between code blocks with Chat: Next Code Block (
kb(workbench.action.chat.nextCodeBlock)
) and Chat Previous Code Block (kb(workbench.action.chat.previousCodeBlock)
).
You can control the font for code blocks in chat with the following settings:
setting(chat.editor.fontFamily)
setting(chat.editor.fontSize)
setting(chat.editor.fontWeight)
setting(chat.editor.lineHeight)
Chat history
Copilot Chat maintains a history of your previous chat conversations, which you can access by using the Show Chats... button in the Chat view or by using the Chat: Show Chats... command in the Command Palette.
A Quick Pick shows the list of previous chats, order by most recent. You can select a chat to open it in the Chat view.
Quick Chat
If you want to ask Copilot a quick question and don't want to start a full Chat view session or open Inline Chat in your editor, you can use the Quick Chat dropdown.
Press kb(workbench.action.quickchat.toggle)
on your keyboard to bring up Quick Chat. Alternatively, select Quick Chat in the Copilot Chat Command Center menu.
You can type questions, scope your questions with chat participants and slash commands, and promote the discussion to a full Chat view session with the Open in Chat View button in the upper right of the dropdown.
Multi-turn conversations
When you ask a question in Copilot Chat, you aren't stuck with the first response. Keep the chat conversation open and continue to iterate and prompt Copilot to improve the suggested solution. Copilot has both the context of the generated code and your current conversation history. As you keep asking additional questions, Copilot further refines the response according to your requirements.
Here's an example using Inline Chat to create a function to calculate Fibonacci numbers:
If you prefer a solution that doesn't use recursion, update the chat prompt and submit it to Copilot to get a different response.
Learn more about how to iterate over a Copilot chat conversation.
Terminal Inline Chat
Similar to Inline Chat in the editor, you can bring up Copilot Inline Chat in the terminal to help you answer questions related to the terminal and shell commands. The terminal Inline Chat uses the @terminal
chat participant, which has context about the integrated terminal's shell and its contents. For example, you can ask questions such as "how to install npm packages", or "list the top 5 largest files in the src directory".
To start Inline Chat in the terminal, press the kb(inlinechat.start)
keyboard shortcut.
Once a command is suggested, use Run (kb(workbench.action.terminal.chat.runCommand)
) to run the command in the terminal, or Insert (kb(workbench.action.terminal.chat.insertCommand)
) to insert the command into the terminal.
Optionally, you can edit the command directly in the Copilot response before running it by placing the cursor in the response or by pressing kbstyle(Ctrl+down)
, kbstyle(Tab)
, kbstyle(Tab)
on Windows & Linux, or kbstyle(Cmd+down)
, kbstyle(Tab)
, kbstyle(Tab)
on macOS.
Chat smart actions
To make it easier to use Copilot Chat features, smart actions are integrated in your VS Code flow and they do not require you to write any prompt at all. For example, you can access Copilot smart actions from the editor context menu or through Quick Fix actions.
Access the smart actions by selecting a block of code, right-clicking, and choosing Copilot. The smart actions are context-aware and can help you with common tasks, such as generating documentation, fixing code, or explaining code.
The most powerful smart action is /fix
. Here is a relatively simple TypeScript calculator with an error noting that "Argument of type 'string' is not assignable to parameter of type 'number'". Select the sparkle icon, and then choose Fix using Copilot.
Similar to /fix
, the /doc
smart action is popular with users. To use /doc
, select a block of code, right-click, and choose Copilot > Generate Docs. Copilot will generate a documentation comment for your code.
Chat participants
To further help Copilot give you more relevant answers, you can indicate the scope and intent of your question through chat participants.
Chat participants are like experts who have a specialty that they can help you with, and you can talk to them in the chat by mentioning them with the @
symbol. Currently, these are the following built-in chat participants:
@workspace
has context about the code in your workspace and can help you navigate it, finding relevant files or classes.@vscode
knows about commands and features in the VS Code editor itself, and can help you use them.@terminal
has context about the integrated terminal shell and its contents.@github
has knowledge about your GitHub repositories, issues, pull requests, and topics, and can also perform web searches using the Bing API.
Extensions can also contribute chat participants to provide specialized help for their domain.
@workspace
The @workspace
chat participant knows how to gather context about the code in your workspace, can help you navigate it, find relevant classes, files, and more.
Because it has all of the necessary context, @workspace
can answer the kinds of questions that developers are much more likely to ask. For example, questions that pertain to how different parts of the code interact:
- "
@workspace
how are notifications scheduled?"
Or questions that require knowledge of related code, dependencies, and design patterns:
- "
@workspace
add form validation, similar to the newsletter page"
@vscode
VS Code can be customized in so many ways that people get pleasantly surprised when they discover some hidden functionality. To help you to unlock the full power of VS Code, we created @vscode
.
This chat participant knows all about VS Code and can help you bridge the gap between natural language and VS Code commands and customizations. @vscode
internally uses tools that give it access to the index of all the settings and commands and we are in the process of adding a tool so that this chat participant can also use the VS Code documentation. Now you can ask vague questions like:
- "
@vscode
the name of that thing when vscode fake opens a file? And how to disable it?" - "
@vscode
how do I change my VS Code colors?"
With the /runCommand
slash command, you can ask @vscode
to run a command in the editor. For example, you can ask @vscode /runCommand show minimap
to show the minimap in the editor.
@terminal
With @terminal
you can ask questions about the integrated terminal shell, its buffer, and the current selection. In the following example, you use the Quick fix Explain using Copilot in the terminal to get information about a failed shell command.
Notice how the prompt in the Chat view is populated with @terminal #terminalLastCommand
to help correct the error. #terminalLastCommand
is a chat variable, which allows you to add more context to the chat prompt. Learn more about adding context to chat.
[!NOTE] The terminal doesn't pull in the workspace context automatically, so questions about your workspace could take some time.
@github
With @github
you can ask questions about your GitHub repositories and your commits, issues, pull requests, and more. The following are examples of how you can use the @github
participant:
@github What are all of the open PRs assigned to me?
@github What are the latest issues assigned to me?
@github When was the latest release?
Get more information about the available GitHub skills in the GitHub documentation.
Extension-contributed chat participants
You can install additional chat participants from either the Visual Studio Code Marketplace or from the GitHub Marketplace.
Chat participants contributed via a VS Code extension are client-side extensions that have full access to the VS Code extension API surface.
Chat participants contributed via a GitHub App do not run on your local machine and must explicitly request access to your local editor context. After you install a GitHub App that contributes a chat participant, the first time you @-mention
the participant in VS Code, you are asked to authorize its access to your local editor context.
[!NOTE] To protect your privacy, your preference for sharing editor context with chat participants from GitHub App is saved on a per-workspace basis, unless you select 'Allow for All Workspaces'.
Slash commands
One of the tasks when answering questions is to determine the intent, understanding what you want to do. You can use natural language to describe your intent, but it can be ambiguous. To help with this, you can use slash commands. Chat participants can contribute slash commands, which are shortcuts to specific, commonly used functionality provided by that chat participant.
For example, we can infer that "Create a new workspace with Node.js Express Pug TypeScript" means that you want a new project. Instead, you can also use "@workspace /new Node.js Express Pug TypeScript" is explicit, concise, and saves you time typing. In this case, the /new
slash command is a shortcut to create a new workspace.
Once the intent is clear, @workspace
has a better chance of addressing your needs, despite the inherent ambiguity of natural language. The @workspace chat participant can propose a directory structure and users can select the proposed files to preview them. There is a Create Workspace button that generates these files in a new folder.
Examples of built-in commands - type @
or select the icon.
/clear
: start a new chat session/help
: get help about using GitHub Copilot/doc
: generate code documentation (Inline Chat)@workspace /explain
(or/explain
): explain how the selected code works@workspace /fix
(or/fix
): propose a fix for the problems in the selected code@workspace /fixTestFailure
(preview): propose a fix for failing tests@workspace /setupTests
: configure a testing framework for your workspace@workspace /tests
(or/tests
): generate unit tests for the selected code@workspace /new
(or/new
): scaffold code for a new workspace or new file@workspace /newNotebook
(or/newNotebook
): create a new Jupyter Notebook@vscode /runCommand
: search or run a VS Code command@vscode /search
(or/search
): generate query parameters for the Search view@vscode /startDebugging
(experimental): generatelaunch.json
file to set up debugging configuration and start debugging@terminal /explain
: explain terminal functionality or shell commands
Improve the performance of Copilot Chat
Copilot works best when it has sufficient context to know what you're doing and what you want help with. Just as you would provide a colleague with the context when asking for help with a specific programming task, you can do the same with Copilot.
You can help Copilot provide better answers by upvoting or downvoting responses with the thumbs up and down icons in the upper right of its response. This provides Copilot feedback on how much it helped with your scenario so that it can help you even better in the future.
Use chat variables
By using a chat variable in your chat prompt, you can be more specific about the context that you provide to Copilot. For example, the prompt "which sorting algo is used #selection" focuses the chat request on the selected code snippet.
Use chat participants and commands
Chat participants, such as @workspace
, might have context associated within them. For example, @vscode
is aware of VS Code settings and its APIs. When you include a chat participant in the chat prompt, you inherently add context to the prompt. Similarly, by using slash commands, you can further focus the intent of the chat request.
Conversation history
Copilot keeps track of the history of your conversation in the Chat view. Copilot can use this information as context in subsequent prompts, for example when you have a multi-turn conversation.
For example, when you first ask "what is the number data type in TypeScript?" and then ask "Can you use it for decimal numbers too?", Copilot knows that you're still referring to the number
data type.
You can delete a prompt and the corresponding response from the conversation history by hovering over the prompt and selecting the x control. It might be useful to delete one or more prompts to get more relevant responses.
You can export all prompts and responses for a chat session in a JSON file with the Chat: Export Chat... command in the Command Palette.
Context in Inline Chat
If you're using Inline Chat, and you have code selected in the editor, Copilot scopes your question to the selection.
Ignore files
When you're using @workspace
to ask questions related to your VS Code workspace, you can explicitly ignore specific files from the workspace by using a .gitignore
file. @workspace
respects .gitignore
when deciding which files from the workspace to index.
Use voice interactions
With the voice control capabilities in VS Code, provided by the VS Code Speech extension, you can initiate a chat conversation by using your voice:
- Use your voice to dictate your chat prompt
- Use the "Hey Code" voice command to start a voice session with Copilot Chat
- Accelerate voice input for chat by using the "hold to speak" mode
Learn more about how to use voice interactions in VS Code.
Privacy and transparency
We emphasize responsible usage of AI, especially when it comes to source code. The setting(inlineChat.acceptedOrDiscardBeforeSave)
setting, which is enabled by default, asks you for confirmation before saving code that was generated by Copilot.
When the setting is enabled, a file save operation waits for you to accept or discard any pending Inline Chat session. This also applies when Auto Save is enabled, which will be temporarily disabled until Inline Chat has ended.
To enable more workspace search features for private repositories, we require additional permissions. If we detect that we don't have these permissions already, we will ask for them at startup. Once granted, we'll securely store the session for the future.
Learn more about security, privacy, and transparency in the GitHub Copilot Trust Center.
Frequently asked questions
How do I choose between Inline Chat, Chat view, and Quick Chat?
The following table provides a comparison of the capabilities of each interface.
Capability | Chat view | Inline Chat | Quick Chat |
---|---|---|---|
Ask general technology questions | ✅ | ✅ | ✅ |
Receive code suggestions | ✅ | ✅ | ✅ |
View code suggestions in the editor | ✅ | ||
Code suggestions for multiple files | ✅ | ✅ | |
Generate a new project | ✅ | ✅ | |
Attach context | ✅ | ✅ | ✅ |
Use chat participants | ✅ | ✅ | |
Use commands | ✅ | ✅* | ✅ |
Chat history | ✅ |
* only a limited set of commands is available in Inline Chat
Additional resources
You can read more about GitHub Copilot and how to use it in VS Code in the GitHub Copilot documentation.
Or check out the VS Code Copilot Series on YouTube, where you can find more introductory content and programming-specific videos for using Copilot with Python, C#, Java, PowerShell, C++, and more.
Next step
Get started with the introductory Copilot Chat tutorial.