Harnessing GitHub Copilot with JavaScript

In this module, we'll continue to dive into GitHub Copilot capabilities as an AI developer tool designed to enhance your coding experience. Imagine writing code faster and with less effort—GitHub Copilot makes this a reality by seamlessly generating suggestions based on the context of your comments and code.

As a developer seeking increased productivity, you'll embark on a journey to master GitHub Copilot's capabilities, focusing on its application in JavaScript. By the module's end, you will not only enable the GitHub Copilot extension in Visual Studio Code but also become adept at crafting prompts that yield valuable suggestions. Elevate your coding skills as you use GitHub Copilot to enhance a JavaScript project, experiencing firsthand how this AI pair programmer offers autocomplete-style suggestions, transforming your development workflow.

By mastering GitHub Copilot, you'll not only configure repositories in Codespaces but also efficiently utilize this AI tool to improve your coding projects. Prepare to revolutionize your coding experience and boost your productivity in this dynamic learning adventure!

• Who this is for: Developers, DevOps Engineers, Software development managers, Testers.
• What you'll learn: Harnessing GitHub Copilot to create code and add comments to your work.
• What you'll build: Javascript files that will have code generated by Copilot AI for code and comment suggestions.
• Prerequisites: To use GitHub Copilot you must have an active GitHub Copilot subscription. Sign up for 30 days free Copilot.
• Timing: This course can be completed in under an hour.

By the end of this module, you'll aquire the skills to be able to:

• Configure a GitHub repository in Codespaces and install GitHub Copilot extension.
• Crafted prompts to generate suggestions from GitHub Copilot
• Applied GitHub Copilot to improve your projects.

Prerequisite reading:

• Introduction to prompt engineering with GitHub Copilot
• Using GitHub Copilot with JavaScript

Requirements

1. Enable your GitHub Copilot service
2. Open this repository with Codespaces

💪🏽 Exercise

In this template portfolio, we have a React based web application ready for you to easily customize and deploy using only your web browser.

🛠 Step 1: Customize the web app

Customize the portfolio with your own links. Go to src/App.jsx and update the siteProps with your information. The siteProps variable is a JavaScript object that holds key value pairs used to customize the site, it should look like this:

const siteProps = {
  name: "Alexandrie Grenier",
  title: "Web Designer & Content Creator",
  email: "alex@example.com",
  gitHub: "microsoft",
  instagram: "microsoft",
  linkedIn: "satyanadella",
  medium: "",
  twitter: "microsoft",
  youTube: "Code",
};

🔎 Step 2: Animate the social media icons with a prompt

Next, generate a new endpoint with GitHub Copilot by adding the comment:

An animation can make the social media section more eye-catching. Ask Copilot’s help to animate the icons. Write the following prompt in the src/styles.css file:

/* add an amazing animation to the social icons */

The suggestion from Copilot should look similar to the following:

img.socialIcon:hover {
  animation: bounce 0.5s;
  animation-iteration-count: infinite;
}

@keyframes bounce {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

🚀 Step 3: Work with the suggestion

Accept the suggestion by pressing the tab key. If you don't receive the exact same suggestion, then you can either experiment with the suggestion provided or keep typing the CSS code until it matches.

Your site should already be running in your Codespace, and the change will reload onto the page automatically. To see them, hover over one of your social media icons in the footer to see the magic!

Congratulations, through the exercise, you haven't only used copilot to generate code but also done it in an interactive and fun way! You can use GitHub Copilot to not only generate code, but write documentation, test your applications and more.