Mastering Context

If you’ve worked with large language models (LLMs) before, you already know one essential rule: context is everything. The better the context you provide, the better the quality of the output.

This chapter dives deep into how you can supercharge GitHub Copilot by feeding it the right information, whether it’s single files, entire folders, or even complete codebases.

Why Context Matters

AI models, including GitHub Copilot, are like highly skilled assistants—but only if they clearly understand what you’re asking. In coding, providing enough surrounding information can be the difference between getting a perfect solution and getting something irrelevant.

More context = Better results.
This is why Copilot gives you multiple ways to add context during your sessions.

Ways to Provide Context in Copilot Chat

When you're inside Copilot Chat, you have several options to enhance context:

  • File Context: Attach one or multiple files to your conversation.

  • Folder Context: Attach entire folders to let Copilot understand larger projects.

  • Drag and Drop: Quickly drag files or folders into the chat for instant context.

  • Manual Selection: Use the # (hash) symbol to add files, folders, or entire projects manually.

You can see the files you're working with from the Folder Tree on the right side of Visual Studio Code.

Practical Example: Adding File Context

Let’s walk through an example.

  1. Open the chat window.

  2. Add index.html by using the context menu or # file selection.

Now, whatever question you ask Copilot will be understood through the lens of index.html.

You can even add multiple files. For instance, also attach names.json and ask:

Are the people listed in names.json the same as those in index.html?

Copilot reads both files and compares them intelligently.

Scaling Up: Using Entire Folders

You don’t have to stop at individual files. If you need broader understanding, you can:

  • Attach an entire folder.

  • Let Copilot scan the whole codebase.

This is incredibly powerful for larger projects. For example, attaching your full app directory allows Copilot to answer questions with a much deeper awareness of dependencies, file structures, and business logic.

Real-World Task: Making the App Dynamic

Let's give Copilot a slightly more complex task.

Prompt:

This app in the folder tree is hardcoded. Make it dynamic by using the names defined in names.json.

  • Attach names.json as file context.

  • Attach your project folder as folder context.

Copilot will:

  • Read names.json

  • Update your app to dynamically load names into the carousel

  • Modify your HTML and JavaScript as needed

Note: Copilot might sometimes look outside the intended folder, but overall, it performs remarkably well.

Managing Styling Issues

Sometimes Copilot may not perfectly replicate your styling (like missing CSS classes). When this happens, you can give it another focused task:

Copy the styles from the begin folder’s CSS to the end folder.

Since the AI knows which files you attached, it can transfer styling between folders—even for relatively complex tasks like this.

While today's Copilot might struggle slightly with huge datasets or context overload, it’s evolving rapidly. What feels like a workaround today will likely become seamless in the near future.

Solving CORS Errors with Live Server

If you're working with local JSON files, you might encounter CORS (Cross-Origin Resource Sharing) issues. Your browser blocks fetching local files for security reasons.

Solution: Use Live Server in VS Code:

  1. Install the Live Server extension.

  2. Disable your regular run session.

  3. Click Go Live at the bottom of VS Code.

  4. Your app will now run in a local development server, avoiding CORS problems.

Once Live Server is running, your carousel app will fetch dynamic names properly.

Connect