|
| 1 | +--- |
| 2 | +title: Getting feedback on your code from GitHub Copilot |
| 3 | +shortTitle: Getting feedback on your code |
| 4 | +intro: "Learn how you can ask {% data variables.product.prodname_copilot %} to review your code changes and apply the suggested changes it creates." |
| 5 | +versions: |
| 6 | + fpt: '*' |
| 7 | +topics: |
| 8 | + - Copilot |
| 9 | + - Pull requests |
| 10 | + - GitHub |
| 11 | + - Open Source |
| 12 | +--- |
| 13 | + |
| 14 | +## About coding collaboratively |
| 15 | + |
| 16 | +When you're working with others on {% data variables.product.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. |
| 17 | + |
| 18 | +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 {% data variables.product.prodname_copilot %} instead. |
| 19 | + |
| 20 | +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. |
| 21 | + |
| 22 | +>[!NOTE] |
| 23 | +>{% data variables.copilot.copilot_code-review_short %} on the {% data variables.product.github %} website is a premium feature, available with the {% data variables.copilot.copilot_pro_short %}, {% data variables.copilot.copilot_pro_plus_short %}, {% data variables.copilot.copilot_business_short %}, and {% data variables.copilot.copilot_enterprise_short %} plans. For more information about how using {% data variables.copilot.copilot_code-review_short %} affects your quotas, see [AUTOTITLE](/copilot/using-github-copilot/code-review/using-copilot-code-review#code-review-monthly-quota). If you're a student, you may be able to get {% data variables.copilot.copilot_pro_short %} for free, see [AUTOTITLE](/copilot/managing-copilot/managing-copilot-as-an-individual-subscriber/getting-started-with-copilot-on-your-personal-account/getting-free-access-to-copilot-pro-as-a-student-teacher-or-maintainer). |
| 24 | +
|
| 25 | +## 1. Creating the practice repository |
| 26 | + |
| 27 | +In this exercise, you’ll use a sample repository with existing code. The sample repository is [`new2code/grid-toy`](https://github.com/new2code/grid-toy), a small HTML and JavaScript project that displays a grid of color-changing squares. This is a {% data variables.product.prodname_pages %} site and you can view the original version at https://new2code.github.io/grid-toy. |
| 28 | + |
| 29 | +Get started by creating your own copy of the `grid-toy` repository. |
| 30 | + |
| 31 | +1. Navigate to the [new repository page](https://github.com/new?template_owner=new2code&template_name=grid-toy). Following this link will pre-select the template on the `new2code` account. |
| 32 | +1. Under "Owner", select your user account. |
| 33 | +1. In the "Repository name" field, type "grid-toy". |
| 34 | +1. Click **Create repository**. |
| 35 | + |
| 36 | +## 2. Making a change |
| 37 | + |
| 38 | +Next, you’ll make a change to the JavaScript file. |
| 39 | + |
| 40 | +1. In your new repository, click **`script.js`** in the file list. |
| 41 | +1. To edit the JavaScript file, at the top-right, click {% octicon "pencil" aria-label="Edit this file" %}. |
| 42 | +1. On line 25, add the following code: |
| 43 | + |
| 44 | + ```javascript copy |
| 45 | + if (Math.random() < INVERT_PROBABILITY) { |
| 46 | + cell.classes.add("black"); |
| 47 | + } |
| 48 | + ``` |
| 49 | + |
| 50 | + This change randomly sets some grid squares to black when the page loads. There's a deliberate error to trigger feedback from {% data variables.product.prodname_copilot %}: the correct property is |
| 51 | + actually `.classList` and not `.classes`. {% data variables.product.prodname_copilot %} should help us fix this. |
| 52 | +1. To commit the change, at the top-right, click **Commit changes...** |
| 53 | +1. In the "Commit message" field, enter something like "Randomly set squares on load". |
| 54 | +1. Select **Create a new branch for this commit and start a pull request**. |
| 55 | +1. Click **Propose changes**. |
| 56 | + |
| 57 | +## 3. Creating a pull request and requesting a review |
| 58 | + |
| 59 | +Now complete the pull request and request a review. |
| 60 | + |
| 61 | +1. Type a title and, optionally, a description for your pull request. |
| 62 | +1. Click **Reviewers**. |
| 63 | + * If Copilot appears in the suggested list, click "Copilot". |
| 64 | + * If not, start typing "Copilot", then click the result. |
| 65 | +1. Click **Create pull request**. |
| 66 | + |
| 67 | +You’ll be taken to your new pull request. |
| 68 | + |
| 69 | +## 4. Applying a suggested change |
| 70 | + |
| 71 | +Within a few minutes, {% data variables.product.prodname_copilot %} will review your pull request, produce a summary, and create suggested changes for any problems found. |
| 72 | + |
| 73 | +1. Wait for the review from {% data variables.product.prodname_copilot %} to appear. |
| 74 | +1. One of these suggestions should correct the intentional error from earlier by changing `.classes` to `.classList`. Below the suggested change, click **Commit suggestion**. |
| 75 | + |
| 76 | +  |
| 77 | + |
| 78 | +1. Click **Commit changes**. |
| 79 | +1. It's possible that {% data variables.product.prodname_copilot %} found other improvements and left additional comments. If you understand the changes suggested, you can apply these too. |
| 80 | + |
| 81 | +## 5. Merging |
| 82 | + |
| 83 | +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`). |
| 84 | + |
| 85 | +1. At the bottom of the page, click **Merge pull request**. |
| 86 | +1. Optionally, update the commit message. |
| 87 | +1. Press **Confirm merge**. |
| 88 | + |
| 89 | +## Next steps |
| 90 | + |
| 91 | +The project can be published using {% data variables.product.prodname_pages %}. Now you've made some changes, you could publish your version of the repository to see it in action. See [AUTOTITLE](/pages/getting-started-with-github-pages/configuring-a-publishing-source-for-your-github-pages-site). |
0 commit comments