| ← Slash Commands | Next: Actions and Pages → |
|---|
Now that we have our code, we need to add documentation!
READMEs are incredibly helpful when we're trying to learn
about a new repository. Let's use Copilot Edits to create
one for us, summarizing the app, how it's implemented, and most importantly,
how the community can contribute! We were last in the chat view. To switch to
Copilot Edits, click on the Copilot Edits tab at the top of the Copilot pane.
Add the index.html, script.js, and styles.css files to the working set.
Tip
You can drag and drop the files as we introduced earlier. Alternatively, you
can use the paperclip icon or the Add files button in the Copilot Edits
pane to reveal a dropdown of recently opened files.
When you have a file selected, you can quickly add them to the working set by using the following keyboard shortcuts:
- macOS: Cmd + →
- Windows / Linux: Ctrl + →
Once you have the files added to the working set, provide a prompt to Copilot Edits to generate a README file.
Please take two steps in order:
1. Create walkthrough-README.md which contains the current contents of README.md.
2. Replace README.md and summarize the purpose of the repository, the current implementation and how users can contribute to it.
Copilot will create a new README.md file for us. We can review the changes,
and accept the edit.
If you're happy with the changes, accept the edit and save the files. You can also mark the working set as done.
We've been using Copilot Chat and Copilot Edits to help us with our code. But what if we want to use Copilot with our preferred tools and services?
For example, I'm much more of a visual learner. And I'd love to see some class diagrams to understand how the classes relate, and what methods are available. Copilot Extensions can help us with that. The Mermaid Chart extension for GitHub Copilot can help us write mermaid diagrams.
Note
This step is entirely optional. If you're not interested in creating UML diagrams, feel free to skip this section. You can still follow along to see how Copilot Extensions work!
You will need to install the Mermaid Chart extension for GitHub Copilot from the GitHub Marketplace to use this feature.
Once you have the extension installed, refresh your Visual Studio Code window to enable the extension. You can do this by opening the command palette and running the reload window command:
- macOS: Cmd + Shift + P
- Windows / Linux: Ctrl + Shift + P
In the command palette, type > Developer: Reload Window and select it.
We were last in Copilot Edits, so let's switch back to Copilot Chat. You can
invoke extensions by typing the @ symbol into the chat pane. You should see
a list of installed extensions, including the Mermaid Chart extension that you
just setup.
Let's ask Copilot to help us write a UML diagram for our classes. Before you
do that, make sure you've added the relevant files as context for Copilot (such
as the script.js file).
Tip
You can do this by dragging and dropping into the chat pane, or by using the paperclip icon in the chat pane.
Add the following prompt to the chat pane:
@mermaid-chart Add a UML diagram to the README showing how the classes interact
Just like the earlier responses from Copilot, you can review the suggested
codeblocks and incorporate them into your README file (either by copying the
code, inserting at the cursor or using Apply in Editor.). We'll leave this
as an exercise for you to complete.
In this section, we've explored how GitHub Copilot can assist with documentation tasks:
- Using Copilot Edits to generate a comprehensive README.md file
- Leveraging Copilot Extensions, specifically the mermaid extension
- Creating UML diagrams to visualize class relationships
Next up, we'll see how Copilot can help us create a GitHub Actions workflow to deploy to GitHub Pages.
- About READMEs
- GitHub Copilot Chat documentation
- GitHub Copilot Edits documentation
- GitHub Copilot Extensions documentation
- Mermaid Chart extension for GitHub Copilot
| ← Slash Commands | Next: Actions and Pages → |
|---|