From a14d890e39bd1c6d1b1b10a23c0c941c9fe5cdd6 Mon Sep 17 00:00:00 2001 From: "github-classroom[bot]" <66690702+github-classroom[bot]@users.noreply.github.com> Date: Wed, 2 Oct 2024 15:02:01 +0000 Subject: [PATCH 1/5] GitHub Classroom Autograding Workflow From 8a00b31b43327bd431961d30460ed30550c1e645 Mon Sep 17 00:00:00 2001 From: Janus Eros Canlobo Date: Wed, 2 Oct 2024 23:06:54 +0800 Subject: [PATCH 2/5] Create devcontainer.json --- .devcontainer/devcontainer.json | 11 +++++++++++ 1 file changed, 11 insertions(+) create mode 100644 .devcontainer/devcontainer.json diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json new file mode 100644 index 00000000..b4617c42 --- /dev/null +++ b/.devcontainer/devcontainer.json @@ -0,0 +1,11 @@ +{ + // Name this configuration + "name": "Codespace for Skills!", + "customizations": { + "vscode": { + "extensions": [ + "GitHub.copilot" + ] + } + } +} From 765199ca673e47660f0130bf7cf523b099bf106f Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" Date: Wed, 2 Oct 2024 15:07:21 +0000 Subject: [PATCH 3/5] Update to 2 in STEP and README.md --- .github/steps/-step.txt | 2 +- README.md | 80 +++++++++++++++++++---------------------- 2 files changed, 38 insertions(+), 44 deletions(-) diff --git a/.github/steps/-step.txt b/.github/steps/-step.txt index d00491fd..0cfbf088 100644 --- a/.github/steps/-step.txt +++ b/.github/steps/-step.txt @@ -1 +1 @@ -1 +2 diff --git a/README.md b/README.md index 02f1e408..a2fba2dd 100644 --- a/README.md +++ b/README.md @@ -16,65 +16,59 @@ _GitHub Copilot can help you code by offering autocomplete-style suggestions rig -## Step 1: Leverage Codespaces with VS Code for Copilot +## Step 2: Seeing AI code suggestions in a Javascript file! -_Welcome to "Develop With AI Powered Code Suggestions Using GitHub Copilot and VS Code"! :wave:_ +_Nice work! :tada: You created a Codespace using a devcontainer file that installed Copilot!_ -GitHub Copilot is an AI pair programmer that helps you write code faster and with less work. It draws context from comments and code to suggest individual lines and whole functions instantly. GitHub Copilot is powered by OpenAI Codex, a generative pretrained language model created by OpenAI. +GitHub Copilot provides suggestions for numerous languages and a wide variety of frameworks, but works especially well for Python, JavaScript, TypeScript, Ruby, Go, C# and C++. The following samples are in JavaScript, but other languages will work similarly. -**Copilot works with many code editors including VS Code, Visual Studio, JetBrains IDE, and Neovim.** +Let's try this out utilizing Javascript for Copilot. -Additionally, GitHub Copilot is trained on all languages that appear in public repositories. For each language, the quality of suggestions you receive may depend on the volume and diversity of training data for that language. +### :keyboard: Activity: Add a Javascript file and start writing code -Using Copilot inside a Codespace shows just how easy it is to get up and running with GitHub's suite of [Collaborative Coding](https://github.com/features#features-collaboration) tools. +1. From inside the codespace in the VS Code explorer window, create a new file. -> **Note** -> This skills exercise will focus on leveraging GitHub Codespace. It is recommended that you complete the GitHub skill, [Codespaces](https://github.com/skills/code-with-codespaces), before moving forward with this exercise. +> **Note**: +> If you closed the Codespace from above, please open it back up or create a new Codespace. -### :keyboard: Activity: Enable Copilot inside a Codespace +2. Name the file `skills.js` +3. Verify your new file looks like: + ![Screen Shot 2023-03-09 at 9 21 34 AM](https://user-images.githubusercontent.com/26442605/224105906-d1beb531-b747-4c7a-85ba-a12526488422.png) +4. In the `skills.js` file, type the following function header. -**We recommend opening another browser tab to work through the following activities so you can keep these instructions open for reference.** + ``` + function calculateNumbers(var1, var2) + ``` + + GitHub Copilot will automatically suggest an entire function body in grayed text. Below is an example of what you'll most likely see, but the exact suggestion may vary. + ![Screen Shot 2023-04-27 at 10 23 06 AM](https://user-images.githubusercontent.com/26442605/234941079-b4bf3e9d-fc70-4b20-b74c-0ee753ba344e.png) -Before you open up a codespace on a repository, you can create a development container and define specific extensions or configurations that will be used or installed in your codespace. Let's create this development container and add copilot to the list of extensions. +5. Press `Tab` to accept the suggestion. + +### :keyboard: Activity: Push code to your repository from the codespace + +1. Use the VS Code terminal to add the `skills.js` file to the repository: -1. Navigating back to your **Code** tab of your repository, click the **Add file** drop-down button, and then click `Create new file`. -1. Type or paste the following in the empty text field prompt to name your file. ``` - .devcontainer/devcontainer.json + git add skills.js ``` -1. In the body of the new **.devcontainer/devcontainer.json** file, add the following content: + +2. Next from the VS Code terminal stage and commit the changes to the repository: + + ``` + git commit -m "Copilot first commit" + ``` + +3. Finally from the VS Code terminal push to code to the repository: + ``` - { - // Name this configuration - "name": "Codespace for Skills!", - "customizations": { - "vscode": { - "extensions": [ - "GitHub.copilot" - ] - } - } - } + git push ``` -1. Select the option to **Commit directly to the `main` branch**, and then click the **Commit new file** button. -1. Navigate back to the home page of your repository by clicking the **Code** tab located at the top left of the screen. -1. Click the **Code** button located in the middle of the page. -1. Click the **Codespaces** tab on the box that pops up. -1. Click the **Create codespace on main** button. - - **Wait about 2 minutes for the codespace to spin itself up.** - -1. Verify your codespace is running. The browser should contain a VS Code web-based editor and a terminal should be present such as the below: - ![Screen Shot 2023-03-09 at 9 09 07 AM](https://user-images.githubusercontent.com/26442605/224102962-d0222578-3f10-4566-856d-8d59f28fcf2e.png) -1. The `copilot` extension should show up in the VS Code extension list. Click the extensions sidebar tab. You should see the following: - ![Screen Shot 2023-03-09 at 9 04 13 AM](https://user-images.githubusercontent.com/26442605/224102514-7d6d2f51-f435-401d-a529-7bae3ae3e511.png) **Wait about 60 seconds then refresh your repository landing page for the next step.** From f22f84353e80d4857111030ad9eebe45611ee5f0 Mon Sep 17 00:00:00 2001 From: Janus Eros Canlobo Date: Wed, 2 Oct 2024 15:11:27 +0000 Subject: [PATCH 4/5] Copilot first commit --- .vscode/settings.json | 5 +++++ skills.js | 3 +++ 2 files changed, 8 insertions(+) create mode 100644 .vscode/settings.json create mode 100644 skills.js diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 00000000..b242572e --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,5 @@ +{ + "githubPullRequests.ignoredPullRequestBranches": [ + "main" + ] +} \ No newline at end of file diff --git a/skills.js b/skills.js new file mode 100644 index 00000000..3e7464c7 --- /dev/null +++ b/skills.js @@ -0,0 +1,3 @@ +function calculateNumbers(var1, var2){ + +} \ No newline at end of file From 9573bb3943b06dc4c0d49e59c7fa503ddca77c0c Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" Date: Wed, 2 Oct 2024 15:12:00 +0000 Subject: [PATCH 5/5] Update to 3 in STEP and README.md --- .github/steps/-step.txt | 2 +- README.md | 46 +++++++++++++++++++++-------------------- 2 files changed, 25 insertions(+), 23 deletions(-) diff --git a/.github/steps/-step.txt b/.github/steps/-step.txt index 0cfbf088..00750edc 100644 --- a/.github/steps/-step.txt +++ b/.github/steps/-step.txt @@ -1 +1 @@ -2 +3 diff --git a/README.md b/README.md index a2fba2dd..aee5902c 100644 --- a/README.md +++ b/README.md @@ -16,52 +16,54 @@ _GitHub Copilot can help you code by offering autocomplete-style suggestions rig -## Step 2: Seeing AI code suggestions in a Javascript file! +## Step 3: View the GitHub Copilot tab with multiple suggestions -_Nice work! :tada: You created a Codespace using a devcontainer file that installed Copilot!_ +_Nice work! You just used AI code suggestions within a Javascript file by using GitHub Copilot :sparkles:_ -GitHub Copilot provides suggestions for numerous languages and a wide variety of frameworks, but works especially well for Python, JavaScript, TypeScript, Ruby, Go, C# and C++. The following samples are in JavaScript, but other languages will work similarly. +Keep in mind that as you continue to use copilot, you may not want some of the suggestions GitHub Copilot offers. GitHub Copilot will show you multiple suggestions in a new tab. -Let's try this out utilizing Javascript for Copilot. +### :keyboard: Activity: Pull the latest code to the Codespace repo. -### :keyboard: Activity: Add a Javascript file and start writing code +> **Note** +> Pull MUST be done prior to the next activity. -1. From inside the codespace in the VS Code explorer window, create a new file. - -> **Note**: -> If you closed the Codespace from above, please open it back up or create a new Codespace. - -2. Name the file `skills.js` -3. Verify your new file looks like: - ![Screen Shot 2023-03-09 at 9 21 34 AM](https://user-images.githubusercontent.com/26442605/224105906-d1beb531-b747-4c7a-85ba-a12526488422.png) -4. In the `skills.js` file, type the following function header. +1. Use the VS Code terminal to pull the latest code: ``` - function calculateNumbers(var1, var2) + git pull ``` - GitHub Copilot will automatically suggest an entire function body in grayed text. Below is an example of what you'll most likely see, but the exact suggestion may vary. - ![Screen Shot 2023-04-27 at 10 23 06 AM](https://user-images.githubusercontent.com/26442605/234941079-b4bf3e9d-fc70-4b20-b74c-0ee753ba344e.png) +### :keyboard: Activity: Add another Javascript method and view all suggestions -5. Press `Tab` to accept the suggestion. +1. From inside the codespace in the VS Code explorer window, create a new file. Note: If you closed the Codespace from above please open it back up or create a new Codespace. +2. Name the file `member.js` +3. In the `member.js` file, type the following function header. + ``` + function skillsMember() + ``` +4. Stop typing and view the Copilot suggestion by hovering over the red squiggly and select the `...` +5. Click `Open Completions Panel`. Copilot will synthesize around 10 different code suggestions. You should see something like this: + ![Screen Shot 2023-04-27 at 10 06 55 AM](https://user-images.githubusercontent.com/26442605/234937592-d196bd5e-8ac2-4d9a-87f4-94e8a9b6a417.png) +6. Find a solution you like and click `Accept Solution`. +7. Your `member.js` file will be updated with your solution. ### :keyboard: Activity: Push code to your repository from the codespace -1. Use the VS Code terminal to add the `skills.js` file to the repository: +1. Use the VS Code terminal to add the `member.js` file to the repository: ``` - git add skills.js + git add member.js ``` 2. Next from the VS Code terminal stage and commit the changes to the repository: ``` - git commit -m "Copilot first commit" + git commit -m "Copilot second commit" ``` 3. Finally from the VS Code terminal push to code to the repository: