Do you know the key features of GitHub Copilot in VS Code?

Learn how to use the GitHub Copilot in VS Code extension to get AI-powered code suggestions in its editor. Use chat conversations to react to your code and fix code errors with your smart move.

Prerequisites to Use GitHub Copilot in VS Code

Install the GitHub Copilot extension and the GitHub Copilot Chat extension
Go with an active subscription for GitHub Copilot in your account

Here you have some steps To set up Copilot GitHub in VS Code

How to Get Your First Code Suggestion

Let’s see how it helps you take action!

After signing up for Copilot and activating the extension,

You don’t have to do anything special to start with GitHub Copilot in VS Code. Copilot automatically presents you with code suggestions to help you code more efficiently while typing code in the editor.

At first, create a new Typescript file in Visual Studio Code of Calculator.ts.

Start typing In the TypeScript following the definition.
class Calculator

Copilot intuitively suggests a method for our Calculator class, displaying it in grayed-out (ghost) text. In our example, Copilot recommends the add method.

In order to accept the suggestion, press the Tab key.
Boom! Your first AI-powered inline suggestion is ready to go.
If you continue typing, Copilot GitHub updates the inline suggestion accordingly.
There, you can make multiple suggestions for your input.
Add these in the class to a Fibonacci method:fibonacci(n: number): number {
Hover over multiple suggestion in the editor.

You can use the arrow to control or use the key bindings to show the following (Alt+]) or previous (Alt+[) suggestion.

AI-powered code completions can help you generate boilerplate or repetitive code, it allow users to stay in the developer flow and you can easily focus on more complex coding tasks as well.

Refactor Your Code Through AI Chat.

As you work on an existing codebase, you often need to refactor or improve existing code. The Copilot Chat extension allows you to use AI-driven chat conversations in VS Code to ask specific tasks about your code.

Let's use Copilot Chat to help us generate and refactor code.

First, add a new TypeScript file server.ts to your workspace.
Let’s use the Copilot inline chat in the editor to generate a simple Express web server.
Now, press Ctrl+I on your keyboard to bring up Copilot inline chat.With Copilot inline chat, you get a chat interface that lets you ask questions about your code using natural language.

Type “add a simple express web server” in the chat input field, and press Enter to send the chat request or prompt to Copilot.

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

Select Accept or press Ctrl+Enter to apply the proposed code changes.
Congratulations! You’ve used GitHub Copilot Chat to generate code using chat and natural language.
Now, let’s use Copilot Chat to help us refactor the code to return a static HTML file as the home page instead of “Hello, World!”.
In the editor, select the app. to get the (‘/,’ req, res) method, and then press Ctrl+I to start the inline chat.
By selecting a range of text in the editor, you provide Copilot with more context about your request.
Type “return a static index.html file” in the chat input field, and press Enter to send the chat request or prompt.
Notice how Copilot updates the existing method implementation to return an index.html file. Select the Show Changes button to view a different view and compare the changes.

Select Accept or press Ctrl+Enter to apply the proposed code changes.
Experiment further with Copilot Chat, such as adding more routes to your web server or asking Copilot Chat to add error handling.

With Copilot Chat, you can use a chat conversation and natural language to direct Copilot to perform specific tasks on your codebase. Inline chat lets you stay in the coding flow and ask for AI assistance without switching contexts.

Use Copilot Chat for General Programming Questions

You might have more general questions while working in a new codebase or exploring a new programming language. GitHub Copilot Chat lets you open a chat conversation on the side, which keeps track of the history of your questions.

Open the Chat view from the Activity Bar or press Ctrl+Alt+I.

Type “what is recursion?” in the chat input field and press unassigned to send the request to Copilot.

Notice how the chat response contains rich results, consisting of text and a code block.

You can also drag the Chat view to the Secondary sidebar, for example, if you want to view both the Chat and Explorer views.

Learn about custom layouts and the Secondary sidebar.

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 you have a red squiggle because of a compiler error. Let’s see how Copilot can help with resolving coding errors.

Open the server.ts TypeScript file that you created earlier in the editor.
Notice that the import express from the ‘express’ statement contains a red squiggle. The Copilot sparkle appears if you put the cursor on the red squiggle.

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

Notice that the second argument gets a red squiggle because the method only accepts one argument.

Notice that the Copilot inline chat is repopulated 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.

Congratulations

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.

You’ve started experimenting with Copilot, and there’s a lot more you can do with it! Proceed to the Copilot Chat to learn more about GitHub. Also discover Architecting Scalable CI/CD:Excel in GitLab Runner Pipelines.

Discover GitHub Copilot in VS Code

Posted By

Erum Ghulam Hussain