Use GitHub Copilot Chat to Style, Test, and Explain Your UI

Contributed by: Rizèl Scarlett

Difficulty level: Medium

Let’s write unit tests, style the UI, and get an explanation of the code. To complete this task, you will need access to Copilot Chat. Additionally, you need an active subscription to GitHub Copilot to access Copilot Chat.

Copilot Chat is a ChatGPT-like experience in your editor, but it’s not just a chat window. Because it’s deeply embedded into your IDE, Copilot Chat shows the context of what a developer types and the error messages a developer receives.

Let’s try using Copilot Chat to style, test, and explain the code in your markdown editor!

Step 1: Open The Extension

Following installation, try opening the extension. It should render a panel with a welcome message.

Figure 0.

Step 2: Get an Explanation of the Generated Code Block

Let’s have Copilot Chat explain the handleChange function:

• First, highlight the code block for the handleChange function.

• Right click after highlighting.

• Choose “Copilot.”

• Choose “Explain This.”

After you follow these steps, Copilot Chat should provide an explanation.

This code defines a function called handleChange that takes an event object as its argument. The handleChange function is typically used as an event ...