Getting started with GitHub Copilot Chat in VS Code
This tutorial walks you through using the GitHub Copilot Chat extension in Visual Studio Code. You use AI-powered chat conversations to help with refactoring code, improving your code understanding, and finding your way around configuring VS Code.
If you're new to using GitHub Copilot in VS Code, see the GitHub Copilot Overview or get set up and discover the key capabilities in the GitHub Copilot Getting Started Tutorial.
Prerequisites
-
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.
-
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.
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.
Get your first Copilot chat conversation
GitHub Copilot Chat is a chat interface that lets you interact with GitHub Copilot, to ask and receive answers to coding-related questions. The chat interface provides access to coding information and support without requiring you to navigate documentation or search online forums.
In this tutorial, you'll be creating a simple Node.js web application. So, let's get started and ask Copilot to tell us more about web frameworks for Node.js.
-
Open the Chat view from the Activity Bar or press ⌃⌘I (Windows, Linux Ctrl+Alt+I).
Tip: You can drag the Chat view to the Secondary side bar to keep the Chat view and Explorer view open at the same time. Learn about custom layouts and the Secondary side bar.
-
In the chat input field, enter nodejs web server frameworks, and then press Enter to send the request to Copilot.
Copilot returns a list of web frameworks and with some additional information. So, you can search for coding information while you stay in VS Code.
Note that your results might be different from what is shown in the screenshots. AI models are non-deterministic, which means that they can return different responses when asked the same question. This might be due to additional learning and adaption over time, language variation, changes in context, such as your chat history, and more.
Notice that Copilot also suggests relevant follow-up questions, which you can select to directly submit directly to Copilot.
Tip: To get help about GitHub Copilot and how to interact with Copilot Chat, you can type
/help
in the chat input field. -
Let's get more information about Express.js. Enter how to create an express app in the chat input field.
The response contains step-by-step instructions for setting up an Express.js app. Notice that the output combines code blocks with shell commands, and JavaScript code.
You can interact with these code blocks by copying the content in the editor or inserting it in the terminal.
Generate a new workspace
Even to create a simple Express.js application involves creating multiple files: a JavaScript file to set up the server, a package.json
, HTML (template) files, and more. Rather than asking Copilot to generate each individual file, you can instruct it to create an entire workspace for you.
Let's ask Copilot to generate a workspace for an Express.js and Pug application.
-
Enter @workspace /new express with typescript and pug in the chat input field, and press Enter to send the request.
Notice how this chat prompt is precise and concise about its intent, which is to create a workspace for an Express.js web app that uses TypeScript and Pug.
In the chat prompt, you referred to
@workspace
, which is called a chat participant. Participants are domain experts that can perform tasks or answer questions in a specific domain. Specifically,@workspace
knows about VS Code workspaces and your codebase.And with
/new
you can tell the@workspace
participant about your intent, namely to create a new workspace. These commands are known as slash commands. A chat participant can publish slash commands as a shorthand for commonly used instructions. Enter the/
symbol in the chat input to get the list of supported commands for a participant. -
Copilot returns a file tree that represents the new workspace files, and a button to create the workspace.
-
You can select a file in the file tree to preview its content.
-
Press the Create workspace button to create a new workspace. Select a folder on disk where the workspace should be created.
When the workspace creation finishes, VS Code reloads with the new workspace.
Congratulations! You've just created a workspace with Copilot Chat by using natural language. The advantage of this approach is that you tweak your request as you like. Maybe you prefer using Express.js with EJS, or not use Express.js at all and use plain Node.js with Bootstrap. Choose what you prefer most!
Use chat participants
Previously, you used @workspace
to generate a new workspace, but you can also use this to ask questions about the actual code in the workspace.
-
In the Chat view, enter the @workspace how to add a new page?
-
Notice that Copilot returns step-by-step instructions and code blocks for adding a new page to the application.
The instructions are specific for your technology selection. This is because you added
@workspace
in the chat prompt, which has the context about your specific workspace contents. If you wouldn't include@workspace
, you would get more generic instructions. -
Optionally, you can follow the instructions to add a new page to your app.
There are other chat participants available in Copilot Chat:
-
Start typing
@
in the chat window and notice the list of available chat participants.For example,
@vscode
knows about using VS Code, and how to use the VS Code API. -
Continue typing and enter
@vscode how to debug node.js app
.You get instructions about how to debug a Node.js app in VS Code, and also get a button to directly access the corresponding VS Code functionality.
Stay in the flow with inline chat
While the Chat view is great for keeping a conversation going with Copilot, having access to chat directly from the editor might be more efficient for particular scenarios.
Let's look at how to use chat for code refactoring.
-
Open the
app.ts
file in the editor and select the lineconst port = 3000
By selecting a line of code, you can provide more context to Copilot about what we want to change.
-
Then press ⌘I (Windows, Linux Ctrl+I) on your keyboard to bring up Copilot inline chat.
Copilot inline chat enables you to ask questions to Copilot directly from the editor.
Let's now ask Copilot to make the port number configurable.
-
Enter make configurable in the chat input field and press Enter.
Notice how Copilot updates the selected code and suggests reading the port number from an environment variable.
You can view the applied changes in a diff view by selecting the Show Changes control.
-
Select Accept or Discard to apply or ignore the changes.
If you're not happy with the suggested code changes, you can select the Regenerate button to get another suggestion.
Congratulations on using Copilot inline chat in the editor to help you with code refactoring!
Use smart actions
There are some common scenarios where you might invoke Copilot directly, without having to enter a chat prompt. For example, Copilot can help with adding code documentation, or generating a unit test, or help fix coding errors.
-
Open the
app.ts
file and select one of the symbols that has a red squiggle. -
Select the sparkle to view the Copilot code actions, and then select Fix using Copilot.
-
Copilot inline chat comes up, prepopulated with the error message, and suggestion to resolve the problem.
Alternately, you can select the code block with errors, right-click to get the editor context menu, and select Copilot > Fix this.
Copilot provides more smart code actions, such as /doc
to generate code documentation, or /tests
to generate unit tests.
And if you come across some block of code that's unclear, use /explain
to get Copilot to give you an explanation and help improve your code understanding.
Provide context by using chat variables
Previously, you used @workspace
to ask questions about the workspace. What if you want to ask Copilot a question about something specific? How can you provide context to Copilot without having to describe everything in natural language?
Let's use chat variables to ask Copilot about a specific file in our workspace.
-
Open the Chat view from the Activity Bar or press ⌃⌘I (Windows, Linux Ctrl+Alt+I).
-
Enter @workspace what does this do #file in the chat input field, and press Enter.
You can use the
#
symbol to reference a chat variable. With#file
you can pass the contents of a file in the workspace to Copilot. -
Select the
types/index.ts
file.Notice how Copilot provides an explanation about the purpose of the code in the selected file.
When you type
#
in the chat input field, you can find the list of available chat variables, such as#selection
,#editor
, and more.
Congratulations
Congratulations, you successfully used the GitHub Copilot Chat extension to have AI-powered conversations to help refactor your code, fix problems, or improve your code understanding.
Additional resources
- Get an overview of GitHub Copilot Chat in VS Code
- Optimize your Copilot experience with prompt crafting and context setting