How to use GitHub Copilot for multiple files?

Question

I am looking to explore GitHub Copilot. I don't have in-depth coding experience and I graduated just a few months ago. I was planning to build a small website to explore what GitHub copilot has to offer.

When I added comments for the copilot to generate code, it wasn't generating the required code. In the html file, I commented that I want to create text with glitch animations and a section containing the header, navigation icon and to play a video on loop. It wasn't able to generate code that I wanted. So, how do I use it for code that requires reference for other files too(.css or .js files). I'm still learning about front end since I've most experience in C, C++ and Core Java.

Answer 1

@workspace prefix solves this:

You can use the @workspace command to provide context to Copilot Chat. This will let you ask questions about the entire codebase. You can take a look at Workspace Context to read more about it.

The sources used for this context are:

• All files in the workspace, except for files that are ignored by a .gitignore file
• Directory structure with nested folder and file names
• GitHub's code search index, if the workspace is a GitHub repository and indexed by code search
• Symbols and definitions in the workspace
• Currently selected text or visible text in the active editor

For inline suggestions (ghost text) Copilot looks at the current and open files in your editor to analyze the context and create appropriate suggestions. See Getting the most out of Copilot inline suggestions

I would also suggest to take a look at these sections which contain examples of how to use chat participants with slash commands and variables to select context:

• Chat Participants
• Slash commands
• Chat context

Hope this helps you.

Answer 2

Currently (jan 2024) copilot will reference only one file at a time. IF you want it to take your CSS and JS into consideration, you need to either paste it into the conversation, or include it all in one file.