[译] [203] 在 VS Code 中使用 Copilot

[cssmagic]

2.3 Working with Copilot in Visual Studio Code

2.3 在 VS Code 中使用 Copilot

---

本节译文略。

---

Now that you have your system set up, let’s get acquainted with the VSCode interface shown in figure 2.1. (You may need to click on the “Explorer” icon in the middle/top left to have this same view.) The following regions are identified in figure 2.1:

• Activity Bar - on the far left is the activity bar where we can open file folders or install extensions (as you did to install the Github Copilot extension in the previous section).

• Side Bar – shows what is presently open in the Activity Bar. In figure 2.1, the Activity Bar has the “Explorer” selected and hence the Side Bar is showing the files in the present folder.

• Editor Pane(s) - these are the primary areas we will be using to create our software. The editor in the Editor Pane is similar to any other text editor in that you can write text, edit text, copy and paste using the clipboard, and so on. What is special about it, however, is that it is designed to work well with code. As we’ll see in the next example, you will be primarily working in this window by asking Copilot to generate code and then testing that code.

• Output and Terminal Panel – this is the area of the interface for seeing the output of your code or any errors that have occurred. It has the tabs “Problems”, “Output”, “Debug Console”, and “Terminal.” We will primarily be using the “Problems” tab where we can see potential errors in our code and the “Terminal” tab that allows us to interact with Python and will be where we see the output of our code.

We highlighted the Copilot logo in the bottom right of figure 2.1 as you should be seeing this symbol (or similar) if you setup Copilot properly in the previous section.

Figure 2.1 The VSCode Interface [3].

2.3.1 Set up your working folder

In the top of the Activity Bar on the left in VSCode you will find the “Explorer” as the top icon. After you click on the “Explorer”, it should say “No Folder Open.” Click on the button to “Open Folder” and select a folder in your computer (or make a new one—we like the folder name fun_with_Copilot). Once you’ve opened this folder, your workspace will be the folder you opened which means you should have your code and any data files, like the one we’ll use later this chapter, in that folder.

File not found or file missing errors

If you ever receive an error that says you are missing a file, these are the kind of errors that can be really annoying when writing software. It could be that you just didn’t put the file in your working folder, this happens. That’s an easy fix by copying or moving the file into the correct folder. However, sometimes, you’ll look in the folder and the file will be there, but when you run your code in VSCode, Python can’t seem to find it. If this happens to you (it happened to us when writing the book!), be sure to have the folder with the code and the desired file open using Explorer in VSCode (as shown in the Side Bar in figure 2.1).

2.3.2 Check to see if your setup is working properly

Let’s check to see if we’ve set up everything properly and that Copilot is working. To do this, start by creating a new file to hold our program. You do this by going to “File -> New File” (figure 2.2), then selecting “Python File” (figure 2.3).

Figure 2.2 How to create a new file in VSCode.

Figure 2.3 Select to create the New File as a Python File.

After creating it, we like to make sure that we’ve saved the file. Go to “File -> Save As” and let’s just name this file first_Copilot_program.

Next, in the text editor, type:

# output "Hello Copilot" to the screen

The prompts and code we write will be in bold font (as above) to help distinguish between what we write and the code and comments Copilot may give us. The “#” sign at the start is important (and you should include it in what you typed). It means that what you wrote is a comment (depending on your VSCode color palette, it’ll be a different color than the code we’re about to produce). Comments are not code: the computer executes code and does not execute comments. Comments are used by programmers to provide a human-readable summary of what the code did to help other software engineers read the code. Today, its purpose has expanded to also work as a way to prompt Copilot. After writing a comment (and sometimes even while writing comments), Copilot will attempt to give us suggestions. You can think of this as a much more sophisticated autocomplete, like when you type “New York T” in your search engine, and it autocompletes with “New York Times.”

To trigger Copilot to start giving us code (or more comments), press Enter at the end of the line, and you’ll be at the start of a new line. Pause for a moment, and you should see something appear. Until accepted, Copilot’s suggestions are in light gray italics. If you do not get a suggestion yet, you may need to hit enter a second time to trigger Copilot to suggest the code.

Here’s what happened for us:

# output "Hello Copilot" to the screen
print("Hello Copilot")

If you still do not see a suggestion from Copilot, try pressing <CTRL>+Enter (hold “CTRL” while pressing “Enter”). When you press <Ctrl>+Enter, a new window on the right-hand side of the screen should appear. The window will be to the right of your editor window with the program and will be called “GitHub Copilot”. If that window does not appear, there may be something wrong with your setup, and we encourage you to go to the Appendix to double-check that you followed all the steps correctly or go to our book website to find (or ask for) help.

If you saw the suggestion, like above, from Copilot, then you need to just press <Tab> to accept Copilot’s suggestion. Once you do this, the suggestion that was previously in light gray italics should now be in a standard font like below:

# output "Hello Copilot" to the screen
print("Hello Copilot")

If you are seeing different code than this, it’s because of something we mentioned in the introduction: Copilot is non-deterministic, so you may see different code than us. We mention this because sometimes Copilot makes a minor mistake with the code here and may give you code similar to this:

print "Hello Copilot"

You might think this slight difference (no parentheses around “Hello Copilot”) wouldn’t matter, but it does. Before Python 3, this was the correct syntax for a print statement and when Python 3 was introduced, it switched to the code with parentheses. Since we’re running Python 3, you need to have the parentheses for the code to work. You might ask why Copilot gets this wrong, but the issue is Copilot was trained on Python code before Python 3.

If this seems annoying, we agree. But it’s a hint of the frustration novice programmers went through before Copilot. Most of what Copilot suggests is syntactically correct. But if you were a novice writing the code from scratch, missing parentheses or a missing colon somewhere might cost you a lot of time.

Now that we have the correct code:

# output "Hello Copilot" to the screen
print("Hello Copilot")

which, as you might guess, prints “Hello Copilot” to the screen, we should test it. First, you’ll want to save your file by going to File->Save.

Be sure to save your file before you run it. We’re embarrassed to admit the amount of time we’ve spent trying to fix code that was actually correct but hadn’t been saved.

To run your program, go to the top right corner of the text editor and press the “Run Code” icon as shown in figure 2.1. After pressing the icon, in the Terminal section at the bottom, you should see something like this:

> & C:/Users/YOURNAME/AppData/Local/Programs/Python/Python311/Python.exe c:/Users/YOURNAME/Copilot-book/first_Copilot_program.py

Hello Copilot

The top line starting with > is the command for the computer to run your code and all it says is to run your first_Copilot_program.py using Python. The second line is the output from running the command, and it says “Hello Copilot” which is what we’d hoped to see.

Congratulations! You’ve written your first program! We now know that your programming environment is set up correctly, and we can move onto our first programming task. But before we do, we’d like to go over some tips for how to deal with some common issues we’ve encountered when working with Copilot, so you have these tips available to you when working through the next example.