Advanced IDE Integration and Configuration

Before we customize GitHub Copilot, let’s first understand how it becomes a part of your coding workflow. Copilot isn’t just a pop-up for autocompleting lines: it’s a smart assistant built into your IDE. Whether you’re writing new features, reviewing someone else’s code, or updating an existing app, Copilot works quietly in the background to suggest, guide, and speed things up.

In this lesson, you’ll first set up Copilot in your IDE, configure it for your workspace, and explore how it integrates into your development flow. By the end of this lesson, you’ll not only have Copilot fully running but also use it to make meaningful code changes that bring the Edit Task feature.

Let’s get started!

Setting up the GitHub Copilot

Let’s discuss how we can set up the GitHub Copilot in VS Code:

Install Copilot in VS Code

If you’re using Visual Studio (VS) Code, follow the steps below:

1. Launch VS Code.

2. Go to the “Extensions” sidebar (Ctrl+Shift+X or Cmd+Shift+X).

3. Search for “GitHub Copilot.”

4. Click the “Install” button on the official extension.

Once installed, the Copilot icon will appear in your status bar.

Your task: Try to install the extension. Once done, return to continue.

Authenticating with GitHub

Copilot will prompt you to sign in with your GitHub account upon installation. Here’s how:

1. Click the “Copilot” icon or open any file.

2. A browser tab opens asking for GitHub authorization.

3. Click “Authorize GitHub Copilot.”

4. Once complete, you’ll be redirected, and the IDE will confirm setup.

💡 If the sign-in window doesn’t appear, or you accidentally close it, open the “Command Palette” and run Copilot: Sign In to manually authenticate your GitHub account.

Once authenticated, you’re ready to code with AI by your side.

Let’s look at how Copilot can help as you improve your project. To follow along, clone the daily-task-app repository into your local IDE. This will be your working project as we explore Copilot’s touchpoints.

Inline suggestions

You’ve opened App.js and want to add the “Edit Task” functionality. This means:

• Letting users click “Edit” on a task.

• Typing in the new task name.

• Saving or canceling the change.

Normally, planning and writing can take a while, but here’s where inline suggestions help.

Try this:

Build the “Edit Task” feature, where users can update a task’s title or description before marking it as done. In App.js, right after your handleDelete function, type this comment:

Press “Enter” and pause. Watch how Copilot suggests the full handleEdit logic. It might even create editingId and editingValue state for you.

You don’t even need to finish the comment. Copilot will likely:

• Suggest new useState hooks: editingId, editingValue.

• Show how to toggle edit mode for a task.

• Help build the update and cancel logic.

Side chat panel

Let’s say you aren’t sure how to conditionally render the edit input field in your task list. Instead of searching Stack Overflow, just open Copilot chat using:

Ask something like:

“How do I show an input field for editing a task in a list using React?”

Copilot chat will understand:

• You’re in App.js.

• You’re mapping through tasks.

• You want to show either the task name or an input box.

You’ll get a direct answer with code examples.

Workspace

Imagine you wrote an updateTaskTitle() helper function in another file, maybe later in utils.js. You forgot what it’s called or where it is.

In Copilot chat, type:

Copilot will scan your entire project (index.js, App.js, utils.js) and respond with something like:

Below is the updated code generated with Copilot. You can explore the App.js file and interact with the user interface right in the widget.

GitHub Copilot works best when it understands your coding habits and environment. But by default, it tries to help everywhere, and that’s not always what you want. You can customize GitHub Copilot’s behavior to match your workflow by:

• Ignoring specific files or folders.

• Controlling which programming languages it works with.

• Adjusting how suggestions appear in your editor.

Setting the Copilot

Let’s discuss what setting we need to start working with Copilot below:

Ignore specific files and folders

You might have folders like node_modules, dist, or autogenerated code, where suggestions just don’t make sense. Let’s tell Copilot to skip them.

VS Code steps:

1. Open your “Command Palette.”

Windows/Linux:

Mac:

1. Open settings.json.

2. Add this block:

Set language preferences

Copilot supports many languages, but if you’re only working with a few, you can keep it focused.

How to enable or disable language suggestions:

In your settings.json:

This setup tells Copilot to:

• Provide help with JavaScript, Python, and HTML.

• Stay quiet in markdown files.

You can enable/disable suggestions for any supported language like Go, TypeScript, Ruby, Java, etc.

Customize how suggestions appear

Want fewer distractions? You can adjust Copilot’s suggestion frequency and method.

A. Turn off inline suggestions:

This disables inline suggestions while typing, and lets you rely on Copilot chat or manual triggers.

B. Change Copilot behavior per project:

Create a settings.json file inside your project:

This helps keep different settings for different projects, especially useful in a team setting.

What’s next?

You now know how to code with Copilot and how to do it responsibly. As a seasoned developer, your job isn’t just to generate code faster, but to ensure it’s ethical, safe, and aligned with best practices. In the upcoming lesson, we will discuss how to turn responsible use into team-wide standards with policies and guardrails.