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.

Examination

one can write CSS and JS in HTML (see the <style> and <script> tags). – Vina

Answer 1

you don't need to do anything, GitHub copilot automatically takes context from the css and js files when using html file.

Decalcify

Answer 2

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.

Imf

Answer 3

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.

Lietman

? https://mcmap.net/q/438839/-can-github-copilot-look-at-the-context-of-a-project-with-multiple-files/11107541 – Vina

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Beating

you can use @workspace, but it will hardly do what you expect if the files are too big... – Honorific

Answer 4

GitHub Copilot is designed to automatically observe the necessary context from all called or imported files across any programming language, so this shouldn't be a natural problem.

If you need to manually direct Copilot to consider specific files for its context understanding, you can utilize the syntax @workspace #file:'file name.xxx' #file:'second file.xxx' and continue in the same format for additional files you wish to include. This command tells Copilot to explicitly include these files in its context analysis. It's essential to note that for this functionality to work as expected, you should mention your current workspace and ensure that the files you're referencing are opened in VSCode.

Then no, Copilot has not removed the function to see multiple context files manually.

Damascene

Answer 5

On Vitual Studio Code: open Copilot chat located in the left panel. Before entering your prompt type @workspace. Copilot will now use the entire project as the context to answer your question.

Boatbill

already mentioned in protoncracker's answer. – Vina