花语城2-3#,2-7#,2-11#,2-13#,2-14#,3-3#,3-4#,3.

Visual Studio Code has rich AI features powered by GitHub. In this tutorial, you discover how to use AI while coding in the editor, to ask questions about your code, and to start an editing session to make changes across multiple files.

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

Prerequisites

• VS Code installed on your machine. Download it from the Visual Studio Code website.

• Access to GitHub Copilot. Follow these steps to Set up GitHub Copilot in VS Code.

  Tip

  If you don't have a Copilot subscription or have a seat assigned by your organization, you can sign up to use Copilot for free directly from within VS Code and get a monthly limit of completions and chat interactions.

Get your first code suggestion

To get started with AI features 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 (code completions) in the editor to help you code more efficiently.

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

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

   class Calculator
   

   Notice that as you type, you automatically get code suggestions for the implementation of the Calculator class in gray dimmed text (ghost text). The exact suggestions you receive might vary because large language models are non-deterministic.

   

3. To accept the suggestion, press the Tab key.

   Congratulations! You've just accepted your first AI-powered code suggestion. As you continue typing, Copilot updates the code 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) {
   

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

   

   You can use the arrow controls or use the keyboard shortcuts to show the next (?] (Windows, Linux Alt+])) or previous (?[ (Windows, Linux Alt+[)) 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 editor inline chat to generate a basic web server

With chat-based AI, you can use natural language to ask questions about your code or to ask it to generate code for you. Editor inline chat provides a chat interface directly in the editor, so you can prompt about the code in the active editor.

Let's use editor 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 (Windows, Linux Ctrl+I) on your keyboard to bring up editor inline chat.

   Editor inline chat gives you a chat interface that lets you ask questions about the code in the active editor or generate code for you.

   

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

   Notice that the code changes start streaming directly in the editor. The response is an implementation for a simple Node.js Express web server.

   

4. Select Accept or press ?Enter (Windows, Linux Ctrl+Enter) to apply the proposed code changes.

   Congratulations! You've used editor inline chat for generating code using chat and natural language.

Refactor your code through AI chat

You can also use editor inline chat to refactor or improve existing code in the editor.

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

1. In the editor, select the 3000 port number in the server.ts file, and then press ?I (Windows, Linux Ctrl+I) to open 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 the existing code is updated to use an environment variable for the port number.

   

3. Select Accept or press ?Enter (Windows, Linux Ctrl+Enter) to apply the proposed code changes.

4. If you're not happy with a proposed change, you can modify the prompt and keep iterating to get a different solution. For example, ask to use a different environment variable name for the port number.

Use chat for general programming questions

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

1. Open the Chat view from the Copilot menu in the title bar or press ??I (Windows, Linux Ctrl+Alt+I).

   

2. You can use chat in different ways. Select Ask from the mode dropdown to ask questions.

   In a later step, you'll use chat to start an editing session and make changes across multiple files.

   

   Tip

   You can change the language model that is used in chat by choosing a different model from the dropdown.

3. Type "what is recursion?" in the chat input field and press Enter to submit your chat prompt.

   Notice how the chat response contains rich results like Markdown text and code blocks.

   

4. Follow the steps in the Chat Tutorial to learn how you can also use chat to ask questions about your specific codebase.

Make edits across multiple files

For larger code changes that might involve making edits to multiple files, you can start an AI-powered editing session. Instead of receiving code blocks in the Chat view, the edits are applied directly to your files across your workspace.

Let's start an editing session to return the contents of an HTML file for our web server.

1. Select Edit from the mode dropdown in the Chat view.

   

2. Notice that the server.ts file is automatically added as context for your chat prompt.

   By adding the file as context to your prompt, the AI model can provide more relevant code edits. Optionally, add more context to your prompt with the Add Context button.

   

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 multiple edits are applied to your project: the server.ts file now returns the newly created index.html HTML page.

   

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

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

   

Fix coding errors with AI

Aside from inline suggestions and chat conversations, AI features are available in different areas throughout your developer flow in VS Code. You might notice the presence of AI functionality through the sparkle icon in the VS Code user interface.

One such place is the editor, whenever there's a red squiggle due to a compiler error. Let's use AI to fix a coding error.

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 sparkle icon appear.

   

2. Select the sparkle icon to view the AI Code Actions, and then select Fix using Copilot.

   

3. Notice that editor 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 AI to enhance your coding! In this tutorial, you successfully used AI features in VS Code to get code completions in the editor, and used chat to ask questions and generate code edits.

• To learn more about chat, proceed to the Copilot Chat Tutorial.

• To learn more about AI code editing, proceed to the Copilot Edits documentation.

Related resources

• Check our videos on YouTube about Copilot Best Practices and Advanced Features.