Getting started with GitHub Copilot in VS Code https://code.visualstudio.

com/docs/copilot/getting-started

🚀 Get GitHub Copilot Free (vscode://github.copilot-chat?referrer=vscode-updatebanner) in VS

Code!
×

TOPICS Copilot Quickstart

IN THIS ARTICLE Prerequisites

(https://vscode.dev/github/microsoft/vscode-docs/blob/main/docs/copilot/getting-started.md)

Getting started with GitHub Copilot in VS Code

This tutorial walks you through the key features of GitHub Copilot in Visual Studio Code. Learn how to get
started with the GitHub Copilot (https://marketplace.visualstudio.com/items?itemName=GitHub.copilot)
extension to get AI-powered code suggestions in the editor, use chat conversations to refactor your code,
and fix code errors with smart actions.

Tip
If you don't yet have a Copilot subscription, you can use Copilot for free by signing up for the Copilot
Free plan (https://github.com/github-copilot/signup) and get a monthly limit of completions and chat
interactions.

While we're using TypeScript for this tutorial, please note that Copilot is also trained on numerous other
languages and a wide variety of frameworks.

1 sur 12 18/02/2025 22:16

Getting started with GitHub Copilot in VS Code https://code.visualstudio.com/docs/copilot/getting-started

Copilot Best Practices (What Not To Do)

Prerequisites

To use GitHub Copilot in VS Code, you need to have the following:

• Access to GitHub Copilot

• GitHub Copilot extensions installed in VS Code

Follow the steps in the GitHub Copilot set up guide (/docs/copilot/setup) to get access to GitHub Copilot
and install the Copilot extensions in VS Code.

Get your first code suggestion

To get started with GitHub Copilot in VS Code, you don't have to do anything special. As you're typing
code in the editor, Copilot automatically presents you code suggestions in the editor to help you code
more efficiently.

1 Open Visual Studio Code and create a new JavaScript file calculator.js .

2 In the JavaScript file, start typing the following code:

class Calculator Copy

2 sur 12 18/02/2025 22:16

Getting started with GitHub Copilot in VS Code https://code.visualstudio.com/docs/copilot/getting-started

Copilot automatically suggests a method for our Calculator class in gray dimmed text (ghost
text). In our example, the add and subtract methods are suggested. The exact suggestions you
receive might vary.

3 To accept the suggestion, press the Tab key.

Congratulations! You've just accepted your first AI-powered inline suggestion. As you continue
typing, Copilot updates the inline suggestion accordingly.

4 For any given input, there might be multiple suggestions. Type the following code inside the class to
add a factorial method:

factorial(n) { Copy

5 Hover over the suggestion in the editor and notice that there are multiple suggestions.

3 sur 12 18/02/2025 22:16

Getting started with GitHub Copilot in VS Code https://code.visualstudio.com/docs/copilot/getting-started

You can use the arrow controls or use the keyboard shortcuts to show the next ( ⌥] ) or previous
( ⌥[ ) suggestion.

AI-powered code completions can help you with generating boilerplate or repetitive code, letting you stay
in the developer flow and focus on more complex coding tasks.

Use Inline Chat to generate a basic web server

With Copilot Chat, you can start a chat conversation with Copilot in VS Code to ask specific tasks about
your code by using natural language.

Let's use Inline Chat to help generate a basic Express web server.

1 First, add a new TypeScript file server.ts to your workspace.

2 Now, press ⌘I on your keyboard to bring up Copilot Inline Chat.

Copilot Inline Chat gives you a chat interface that lets you ask questions about the code in the
active editor.

3 Type "add a simple express web server" in the chat input field, and press Enter to send the prompt
to Copilot.

Notice that Copilot returns a streaming response in the editor. The response is an implementation
for a simple Node.js Express web server.

4 sur 12 18/02/2025 22:16

Getting started with GitHub Copilot in VS Code https://code.visualstudio.com/docs/copilot/getting-started

4 Select Accept or press ⌘Enter to apply the proposed code changes.

Congratulations! You've used Copilot Chat for generating code using chat and natural language.

Refactor your code through AI chat

You can also use Inline Chat to refactor or improve existing code in the editor.

Notice that our web server is currently using a static port number 3000 . Let's change this to use an
environment variable for the port number.

1 In the editor, select the 3000 port number in the server.ts file, and then press ⌘I to start Inline
Chat.

2 Type "use an environment variable for the port number" in the chat input field, and press Enter to
send the chat request or prompt.

Notice how Copilot updates the existing code to use an environment variable for the port number.

3 Select Accept or press ⌘Enter to apply the proposed code changes.

4 If you're not happy with a proposed change, you can modify the prompt and ask Copilot to provide a
different solution.

For example, you can ask Copilot to use a different environment variable name for the port number.

Use Copilot Chat for general programming questions

5 sur 12 18/02/2025 22:16

Getting started with GitHub Copilot in VS Code https://code.visualstudio.com/docs/copilot/getting-started

As you're working in a new codebase, or exploring a new programming language, you might have more
general coding questions come up. Copilot Chat lets you open a chat conversation on the side, and which
keeps track of the history of your questions.

1 Open the Chat view from the Command Center Copilot menu or press ⌃⌘I .

Tip
You can access different Copilot features from the Command Center menu at any time.

2 Type "what is recursion?" in the chat input field and press Enter to send the request to Copilot.

6 sur 12 18/02/2025 22:16

Getting started with GitHub Copilot in VS Code https://code.visualstudio.com/docs/copilot/getting-started

Notice how the chat response contains rich results, consisting of text and a code block. The code
block in the chat response supports IntelliSense, which enables you get information about methods
and symbols by hovering over them, or to go to their definition.

3 Follow the steps in the Copilot Chat tutorial (/docs/copilot/getting-started-chat) to learn how you
can also use Copilot Chat to ask questions about your specific codebase.

Make edits across multiple files with Copilot Edits

Larger code changes might involve making edits to multiple files. With Copilot Edits, you can get AI-
powered suggestions inline in the editor, across multiple files in your workspace. Instead of applying
individual code blocks, Copilot Edits makes edits across your workspace.

Let's use Copilot Edits to return the contents of an HTML file in a web server response.

1 Select Open Copilot Edits from the Command Center Copilot menu or press ⇧⌘I .

2 The Copilot Edits view is opened. Notice that the server.ts file is added to the working set.

The working set contains the files that can be modified by Copilot Edits. If the file is not added, use
*Add Files... to add the file to the working set.

7 sur 12 18/02/2025 22:16

Getting started with GitHub Copilot in VS Code https://code.visualstudio.com/docs/copilot/getting-started

3 Enter Return a static html page as the home page and implement it. in the chat input field and press
Enter to start a new edit session.

Notice that Copilot Edits makes multiple edits: it updates the server.ts file to return a static HTML
page, and it also adds a new file index.html .

4 If you're happy with the results, select Accept to apply all suggested changes.

8 sur 12 18/02/2025 22:16

Getting started with GitHub Copilot in VS Code https://code.visualstudio.com/docs/copilot/getting-started

You can also navigate between the different edited files and accept/discard them by using the editor
overlay controls.

Fix coding errors with Copilot

Aside from inline completions and chat conversations, GitHub Copilot is available in different places and
throughout your developer flow in VS Code. You might notice the presence of Copilot functionality through
the sparkle icon in the VS Code user interface.

One such place is the Copilot coding actions in the editor, whenever there you have a red squiggle
because of a compiler error. Let's see how Copilot can help with resolving coding errors.

1 Open the server.ts TypeScript file that you created earlier in the editor.

Notice that the import express from 'express'; statement contains a red squiggle. If you put
the cursor on the red squiggle, you can see the Copilot sparkle appear.

2 Select the sparkle to view the Copilot code actions, and then select Fix using Copilot.

9 sur 12 18/02/2025 22:16

Getting started with GitHub Copilot in VS Code https://code.visualstudio.com/docs/copilot/getting-started

3 Notice that the Copilot Inline Chat comes up, prepopulated with the error message, and a solution to
fix the problem.

Directly from the chat response, you can optionally select the Insert into Terminal button to copy
the proposed command in your terminal.

Next steps

Congratulations, you've now used artificial intelligence to enhance your coding! In this tutorial, you
successfully set up Copilot in VS Code, and used Copilot code completions, Copilot Chat, and code
actions to help you code more efficiently.

• To learn more about Copilot Chat, proceed to the Copilot Chat Tutorial (/docs/copilot/getting-
started-chat).

• To learn more about Copilot Edits, proceed to the Copilot Edits (/docs/copilot/copilot-edits)
documentation.

Related resources

Check our Advanced Features (https://www.youtube.com/watch?v=SLMfhuptCo8) video on YouTube for in-

depth coverage of using Copilot for refactoring, context-based suggestions, unit tests, and more.

Was this documentation helpful?

10 sur 12 18/02/2025 22:16

Getting started with GitHub Copilot in VS Code https://code.visualstudio.com/docs/copilot/getting-started

Yes No

02/06/2025

Subscribe(/feed.xml) Ask questions(https://stackoverflow.com/questions/tagged/vscode)

Follow @code(https://go.microsoft.com/fwlink/?LinkID=533687)

Request features(https://go.microsoft.com/fwlink/?LinkID=533482)

Report issues(https://www.github.com/Microsoft/vscode/issues)

Watch videos(https://www.youtube.com/channel/UCs5Y5_7XK8HLDX0SLNwkd3w)

(https://
www.microsoft.com)

(https://go.microsoft.com/fwlink/?LinkID=533687)
(https://github.com/microsoft/vscode) (https://www.youtube.com/@code)

11 sur 12 18/02/2025 22:16

Getting started with GitHub Copilot in VS Code https://code.visualstudio.com/docs/copilot/getting-started

Support (https://support.serviceshub.microsoft.com/supportforbusiness/create?sapId=d66407ed-3967-
b000-4cfb-2c318cad363d)
Privacy (https://go.microsoft.com/fwlink/?LinkId=521839)
Terms of Use (https://www.microsoft.com/legal/terms-of-use) License (/License)

12 sur 12 18/02/2025 22:16