Getting feedback on your code from GitHub Copilot

About coding collaboratively

When you're working with others on GitHub, you typically make your changes in a branch or fork of the main project and then submit them as a pull request. A pull request shows the differences between the original code and your changes, and invites the repository maintainer to merge your code into the project.

Getting feedback on your pull request from others is an important part of the software development process. Pull request reviews improve the specific code you're working on, and also improves your coding and collaboration skills over time. Sometimes, especially when you're learning to code, you may not always have someone to ask for feedback. In those cases, you can get feedback and all its benefits from GitHub Copilot instead.

A pull request is a collaborative place where you can show other people the changes you're proposing and get feedback. When you request a review from Copilot, you'll be learning the same process that you'll use use when working with development teams. The only difference is you'll also be requesting reviews from human colleagues alongside Copilot.

1. Creating the practice repository

In this exercise, you’ll use a sample repository with existing code. The sample repository is new2code/grid-toy, a small HTML and JavaScript project that displays a grid of color-changing squares. This is a GitHub Pages site and you can view the original version at https://new2code.github.io/grid-toy.

Get started by creating your own copy of the grid-toy repository.

1. Navigate to the new repository page. Following this link will pre-select the template on the new2code account.
2. Under "Owner", select your user account.
3. In the "Repository name" field, type "grid-toy".
4. Click Create repository.

2. Making a change

Next, you’ll make a change to the JavaScript file.

1. In your new repository, click script.js in the file list.

2. To edit the JavaScript file, at the top-right, click .

3. On line 25, add the following code:

   JavaScript

   if (Math.random() < INVERT_PROBABILITY) {
      cell.classes.add("black");
   }
   

   This change randomly sets some grid squares to black when the page loads. There's a deliberate error to trigger feedback from GitHub Copilot: the correct property is actually .classList and not .classes. GitHub Copilot should help us fix this.

4. To commit the change, at the top-right, click Commit changes...

5. In the "Commit message" field, enter something like "Randomly set squares on load".

6. Select Create a new branch for this commit and start a pull request.

7. Click Propose changes.

3. Creating a pull request and requesting a review

Now complete the pull request and request a review.

1. Type a title and, optionally, a description for your pull request.
2. Click Reviewers.
   • If Copilot appears in the suggested list, click "Copilot".
   • If not, start typing "Copilot", then click the result.
3. Click Create pull request.

You’ll be taken to your new pull request.

4. Applying a suggested change

Within a few minutes, GitHub Copilot will review your pull request, produce a summary, and create suggested changes for any problems found.

1. Wait for the review from GitHub Copilot to appear.

2. One of these suggestions should correct the intentional error from earlier by changing .classes to .classList. Below the suggested change, click Commit suggestion.

   

3. Click Commit changes.

4. It's possible that GitHub Copilot found other improvements and left additional comments. If you understand the changes suggested, you can apply these too.

5. Merging

Once you're happy with the changes, you can merge the pull request. This adds the changes from your branch to the repository’s default branch (main).

1. At the bottom of the page, click Merge pull request.
2. Optionally, update the commit message.
3. Press Confirm merge.

Next steps

The project can be published using GitHub Pages. Now you've made some changes, you could publish your version of the repository to see it in action. See GitHub Pages 사이트에 대한 게시 원본 구성.