Week 10 - Asynchronous programming

Synchronous vs Asynchronous Code

Callbacks

Promises

Asynchronous File I/O

Event Loop

Fetch API

Async/Await and Promise.all()

AI Using GitHub Copilot in VS Code

Practice

Assignment

• Teachers

Core program

Using GitHub Copilot in VS Code

The information in this section can also be found in the Learning-Resources repository.

GitHub Copilot is an AI coding assistant built into VS Code. It can help you learn, understand code, and write code faster. This guide covers the two features that are most useful while you are learning: inline suggestions and Ask mode.

<aside> 💭

This guide assumes you already have Copilot enabled in VS Code. If you don't see a Copilot icon in the VS Code title bar, ask your mentor for help setting it up.

</aside>

Before You Start

A few things to keep in mind:

• Copilot suggests code as you type and can answer questions about code.
• It does not always give correct answers. You need to think critically about every suggestion.
• It works best when you already understand what you want to write.
• It is a learning aid, not a shortcut to skip learning.

<aside> ❗

Your goal is to understand the code you write. If Copilot suggests something and you don't understand it, don't accept it. Instead, ask Copilot to explain the suggestion using Ask mode (covered below).

</aside>

Inline Suggestions

What Are Inline Suggestions?

As you type code in the editor, Copilot shows dimmed (gray) text ahead of your cursor. This is called ghost text. It is a suggestion for what you might want to type next.

<aside> 💡

Note that the appropriately chosen function name in this example already suggests what implementation might be needed. It pays off to choose your function and variable names with care.

</aside>

Taken from: Inline suggestions from GitHub Copilot in VS Code

How to Respond to a Suggestion

<aside> 💡

Accept word by word is often the best approach when you are learning. It lets you read and think about each part of the suggestion before accepting it. You stay in control.

</aside>

Snoozing or Disabling Inline Suggestions

Inline suggestions can sometimes be distracting. If ghost text keeps appearing while you are trying to think through a problem, it can disrupt your train of thought. In that case, you can temporarily snooze or completely disable inline suggestions.

Click the GitHub Copilot icon in the VS Code status bar (bottom of the window). A menu will appear that lets you snooze suggestions for a period of time or disable them entirely. You can turn them back on from the same menu whenever you are ready.

Snooze inline suggestions

<aside> 💡

There is no shame in turning off suggestions while you think. Experienced developers do this too. Turn them back on when you are ready to start typing again.

</aside>

Example: Completing a TODO function

Imagine you are working on completing a getMe() function in aservices.js file. You start typing the function header up to the opening curly brace:

export async function getMe() {

Copilot may come up with the following inline suggestion:

Before pressing Tab to accept the suggestion ask yourself:

1. Does the URL look correct? Check the API documentation or the function's JSDoc comment.
2. Is the HTTP method right? (fetch defaults to GET, which is correct here.)

If you are unsure about any of these, don't accept the suggestion. Instead, check the docs or ask Copilot to explain it (see the next section).

<aside> ❗

Copilot bases its suggestions on patterns in your code and public code. It does not read the assignment instructions or the API documentation. Always verify suggestions yourself.

</aside>

Additional Reading

• Inline suggestions from GitHub Copilot in VS Code

Ask Mode (Copilot Chat)

What Is Ask Mode?

Ask mode lets you have a conversation with Copilot about your code. You can ask it to explain code, help you understand errors, or teach you a concept. The key point: Ask mode only provides information. It never changes your files.

<aside> 💡

Ask mode is read-only. It will not modify any of your files. This makes it safe to use at any time.

</aside>

Opening Copilot Chat

Method 1: Chat Panel

The Chat panel is best for longer questions and follow-up conversations.

You can also click the Copilot icon in the VS Code title bar:

Open Github Copilot Chat

Method 2: Inline Chat

Inline Chat opens a small chat box right next to your code in the editor. It is handy for quick questions about a specific line or function.

Inline Chat

Make Sure You Are in Ask Mode

At the bottom of the Chat panel, you will see a mode dropdown. Make sure it says Ask. If it says something else (like "Edit" or "Agent"), click the dropdown and select Ask.

Use Ask mode when beginning with GitHub Copilot Chat

Useful Chat Commands

You can type a slash command to tell Copilot what kind of help you need:

| --- | --- |

You can also just type a question in plain English without any slash command. For example:

What does response.ok mean in fetch?

Adding Context to Your Questions

Copilot can only help you if it knows what code you are asking about. This is called context. The more relevant context Copilot has, the better its answers will be.

Here is how context works:

• Your currently open file is automatically included. If you have services.starter.js open in the editor, Copilot already knows about that file when you ask a question.
• Selected text narrows the focus. If you select a specific function or a few lines before asking, Copilot treats that selection as the main focus of your question.
• Dragging files or folders into the Chat input area adds them as context. This is useful when you want to ask about a file you don't have open, or about how multiple files work together.
• The # symbol lets you type a reference directly in the Chat. For example, type #file and a list of your project files will appear for you to pick from. You can also use #selection to refer to whatever text you currently have selected in the editor.

<aside> 💡

</aside>

Ways to Ask About Your Code

1. Select code, then ask

Select some code in the editor, then open the Chat panel and type your question. Copilot will use your selection as context.

For example: select the createUser() function in services.starter.js and ask:

Explain this function line by line

2. Right-click and ask

Select code in the editor, right-click, and choose Explain from the context menu. Then select an option such as Explain or type your own question.

RIght-click context menu: Explain

3. Drag a file or folder into the Chat