|
1 |
| -## GitHub Copilot Hackathon Extended Drilling Exercises (Up to 60 Minutes - Adjust as Needed) |
| 1 | +## GitHub Copilot Hackathon Extended Drilling Exercises (Up to 75 Minutes - Adjust as Needed) |
2 | 2 |
|
3 |
| -This extended set of exercises will further explore GitHub Copilot's capabilities within VS Code. Aim to spend roughly 1-2 minutes on simpler exercises and 2-3 minutes on more complex ones. |
| 3 | +**EXPERIMENTAL** |
| 4 | + |
| 5 | +This extended set of exercises will further explore GitHub Copilot's capabilities within VS Code, incorporating more advanced features. Aim to spend roughly 1-2 minutes on simpler exercises and 2-4 minutes on more complex ones. |
4 | 6 |
|
5 | 7 | **Setup:**
|
6 | 8 |
|
7 |
| -1. ✅ Open Visual Studio Code. |
8 |
| -2. ✅ Ensure you have the GitHub Copilot extension installed and are logged in. |
9 |
| -3. ✅ Open an existing code project (or create a more substantial one with multiple files, functions, and potentially some comments for better exploration). |
| 9 | +- [ ] Open Visual Studio Code. |
| 10 | +- [ ] Ensure you have the GitHub Copilot extension installed and are logged in. |
| 11 | +- [ ] Open an existing code project (or create a more substantial one with multiple files, functions, and potentially some comments and intentional errors for better exploration). |
| 12 | +- [ ] **(Optional for Diagram Exercises)** Install a VS Code extension for rendering PlantUML or Mermaid diagrams (e.g., "PlantUML" by jebbs or "Markdown Preview Enhanced" which supports Mermaid). |
10 | 13 |
|
11 | 14 | **Exercises:**
|
12 | 15 |
|
13 |
| -1. ✅ **Exploring Basic In-line Suggestions:** (Same as before - Reinforce the basics) |
| 16 | +- [ ] **Exploring Basic In-line Suggestions:** |
14 | 17 | * Start typing common code structures. Observe and accept/ignore suggestions.
|
15 | 18 |
|
16 |
| -2. ✅ **Getting Alternative In-line Suggestions:** |
| 19 | +- [ ] **Getting Alternative In-line Suggestions:** |
17 | 20 | * Type some code and wait for an in-line suggestion.
|
18 | 21 | * Press `Ctrl+Enter` (or `Cmd+Enter` on macOS) to open the Copilot window with alternative suggestions.
|
19 | 22 | * Browse through the alternatives and select one you like.
|
20 | 23 | * **Goal:** Learn how to access and choose from multiple in-line suggestions.
|
21 | 24 |
|
22 |
| -3. ✅ **Understanding Codebase with `@workspace /explain` (Revisited):** (Same as before - Emphasize on a more complex part of the codebase) |
| 25 | +- [ ] **Understanding Codebase with `@workspace /explain` (Revisited):** |
23 | 26 | * Use `@workspace /explain` on a more intricate section of your code.
|
24 | 27 |
|
25 |
| -4. ✅ **Generating Diagrams with `@workspace` (More Specific):** |
26 |
| - * Use `@workspace /diagram` with more specific instructions (e.g., "Show the data flow for the user registration process.", "Create a component diagram for the main modules."). |
| 28 | +- [ ] **Generating Diagram Code with `@workspace` (More Specific):** |
| 29 | + * In the Copilot Chat panel, type: `@workspace Generate PlantUML code for a class diagram showing the relationships between the User, Order, and Product models.` (or use Mermaid syntax if preferred). |
| 30 | + * Copy the generated PlantUML/Mermaid code. |
| 31 | + * (If you have a diagram extension installed) Open a new file, paste the code, and see the rendered diagram. |
| 32 | + * **Goal:** Understand how to use `@workspace` to generate code that *describes* diagrams, which can then be rendered using other tools. |
27 | 33 |
|
28 |
| -5. ✅ **Generating Unit Tests with `#selection` (Multiple Scenarios):** |
| 34 | +- [ ] **Generating Unit Tests with `#selection` (Multiple Scenarios):** |
29 | 35 | * Select different types of code (e.g., a function with conditional logic, a class method) and use `#selection write unit tests`.
|
30 | 36 | * **Goal:** See how test generation adapts to different code structures.
|
31 | 37 |
|
32 |
| -6. ✅ **Targeting Codebase Understanding with `@workspace #folder /explain` (Multiple Folders):** |
| 38 | +- [ ] **Targeting Codebase Understanding with `@workspace #folder /explain` (Multiple Folders):** |
33 | 39 | * Try using `@workspace #folder` with different folders in your project to understand their respective roles.
|
| 40 | + * **Optional Extension:** You could ask Copilot to generate PlantUML or Mermaid diagram code to visualize components within a specific folder. |
34 | 41 |
|
35 |
| -7. ✅ **Referencing a Specific File with `@workspace #file /explain` (Different File Types):** |
| 42 | +- [ ] **Referencing a Specific File with `@workspace #file /explain` (Different File Types):** |
36 | 43 | * Use `@workspace #file` to ask questions about different types of files in your project (e.g., configuration files, data structures).
|
37 | 44 |
|
38 |
| -8. ✅ **Referencing a Specific Function with `@workspace #sym /explain` (Complex Functions):** |
| 45 | +- [ ] **Referencing a Specific Function with `@workspace #sym /explain` (Complex Functions):** |
39 | 46 | * Select a function with more complex logic or multiple nested calls and use `@workspace #sym /explain`.
|
40 | 47 |
|
41 |
| -9. ✅ **Generating Documentation with Selection (Different Levels of Detail):** |
| 48 | +- [ ] **Generating Documentation with Selection (Different Levels of Detail):** |
42 | 49 | * Select code and try prompts like `Write a concise documentation summary for #selection` and `Write detailed JSDoc-style documentation for #selection`.
|
43 | 50 | * **Goal:** Explore different levels of documentation generation.
|
44 | 51 |
|
45 |
| -10. ✅ **Generating Tests with Selection (Edge Cases):** |
| 52 | +- [ ] **Generating Tests with Selection (Edge Cases):** |
46 | 53 | * Select a function and try prompting `Generate unit tests for #selection including edge cases and error handling.`.
|
47 | 54 | * **Goal:** See if Copilot can anticipate and generate tests for less common scenarios.
|
48 | 55 |
|
49 |
| -11. ✅ **Reviewing Code with Selection (Specific Focus):** |
| 56 | +- [ ] **Reviewing Code with Selection (Specific Focus):** |
50 | 57 | * Select code and try prompts like `Review #selection for potential security vulnerabilities.` or `Review #selection for code style consistency.`.
|
51 | 58 | * **Goal:** Learn to guide the code review process with specific concerns.
|
52 | 59 |
|
53 |
| -12. ✅ **Using `#terminalLastCommand` for Contextual Help:** |
54 |
| - * Execute a command that resulted in an error in the terminal. |
55 |
| - * In the chat, type: `#terminalLastCommand What caused this error and how can I fix it?`. |
| 60 | +- [ ] **Using `#terminalLastCommand` for Contextual Help:** |
| 61 | + * Open your VS Code terminal and execute a command (e.g., `git status`, `ls -l`). |
| 62 | + * In the chat, type: `#terminalLastCommand What was the output of the last command and what does it indicate?`. |
56 | 63 | * **Goal:** See how terminal output can be used for debugging assistance.
|
57 | 64 |
|
58 |
| -13. ✅ **Discussing VS Code with `@vscode` (Settings and Features):** |
| 65 | +- [ ] **Discussing VS Code with `@vscode` (Settings and Features):** |
59 | 66 | * Ask `@vscode` about specific settings (e.g., "How do I enable word wrap?") or features (e.g., "Explain how the debugger works in VS Code.").
|
60 | 67 |
|
61 |
| -14. ✅ **Generating Code with In-line Chat (Specific Task):** |
| 68 | +- [ ] **Generating Code with In-line Chat (Specific Task):** |
62 | 69 | * In a code file, type a comment describing a small code snippet you want to generate (e.g., `// Function to calculate the factorial of a number`).
|
63 | 70 | * Observe the in-line suggestions and accept a suitable one.
|
64 | 71 | * **Goal:** Practice using comments to guide in-line code generation.
|
65 | 72 |
|
66 |
| -15. ✅ **Refactoring Code with In-line Chat:** |
| 73 | +- [ ] **Refactoring Code with In-line Chat using `/edit`:** |
67 | 74 | * Select a piece of code that could be improved (e.g., a long function).
|
68 |
| - * In the in-line chat (after selecting), type: `Refactor this code to be more readable.` or `Extract this logic into a separate function.`. |
69 |
| - * **Goal:** Explore Copilot's ability to suggest and perform basic refactoring. |
| 75 | + * In the in-line chat (after selecting), type `/edit Make this function more concise using list comprehensions.` or `/edit Extract this logic into a separate function named 'helperFunction'.`. |
| 76 | + * **Goal:** Learn to use the `/edit` command for specific refactoring instructions. |
70 | 77 |
|
71 |
| -16. ✅ **Explaining Code with In-line Chat:** |
| 78 | +- [ ] **Explaining Code with In-line Chat:** |
72 | 79 | * Select a line or block of code you want to understand.
|
73 | 80 | * In the in-line chat (after selecting), type: `Explain this code.` or `What does this line do?`.
|
74 | 81 | * **Goal:** Quickly get explanations for unfamiliar code snippets.
|
75 | 82 |
|
76 |
| -17. ✅ **Generating Code Snippets with Chat (More Complex):** |
| 83 | +- [ ] **Generating Code Snippets with Chat (More Complex):** |
77 | 84 | * In the Copilot Chat, describe a more complex code snippet you need (e.g., "Write a Python function that reads data from a CSV file and returns a list of dictionaries.").
|
78 | 85 | * **Goal:** Practice using the chat for generating larger and more specific code blocks.
|
79 | 86 |
|
80 |
| -18. ✅ **Asking Follow-up Questions in Chat:** |
| 87 | +- [ ] **Asking Follow-up Questions in Chat:** |
81 | 88 | * After Copilot provides a response in the chat, ask a follow-up question to refine the answer or explore related topics.
|
82 | 89 | * **Goal:** Understand the iterative nature of interacting with Copilot.
|
83 | 90 |
|
84 |
| -19. ✅ **Using `@workspace` to Find Code:** |
| 91 | +- [ ] **Using `@workspace` to Find Code:** |
85 | 92 | * In the Copilot Chat, type: `@workspace Find all occurrences of the function named 'processData'.`.
|
86 | 93 | * **Goal:** Learn how to use `@workspace` for code search within your project.
|
87 | 94 |
|
88 |
| -20. ✅ **Generating Code Based on Examples in Chat:** |
| 95 | +- [ ] **Generating Code Based on Examples in Chat:** |
89 | 96 | * Provide a small example of the code you want (e.g., "I want a function that takes a list of strings and returns a new list with the length of each string. For example, ['apple', 'banana'] should return [5, 6].").
|
90 | 97 | * Then ask Copilot to generate the function.
|
91 | 98 | * **Goal:** See how providing examples can guide code generation.
|
92 | 99 |
|
93 |
| -21. ✅ **Using `#selection` for Code Transformation:** |
| 100 | +- [ ] **Using `#selection` for Code Transformation:** |
94 | 101 | * Select a block of code and ask Copilot to transform it (e.g., `Convert #selection from JavaScript to Python.`, `Make #selection use arrow functions.`).
|
95 | 102 | * **Goal:** Explore basic code transformation capabilities.
|
96 | 103 |
|
97 |
| -22. ✅ **Generating Comments for Existing Code:** |
| 104 | +- [ ] **Generating Comments for Existing Code:** |
98 | 105 | * Select a block of uncommented code and ask Copilot to `Add comments to #selection explaining the logic.`.
|
99 | 106 | * **Goal:** See how Copilot can help improve code readability through comments.
|
100 | 107 |
|
101 |
| -23. ✅ **Asking About Best Practices with `@workspace`:** |
| 108 | +- [ ] **Asking About Best Practices with `@workspace`:** |
102 | 109 | * In the chat, ask: `@workspace What are some best practices for error handling in this project?` or `@workspace Suggest ways to improve the performance of this module.`.
|
103 | 110 | * **Goal:** Leverage `@workspace` for getting advice on code quality and best practices within your codebase.
|
104 | 111 |
|
105 |
| -24. ✅ **Using In-line Chat for Quick Modifications:** |
106 |
| - * Select a variable name and use the in-line chat to ask: `Rename this variable to 'itemCount'.`. |
107 |
| - * **Goal:** Practice using in-line chat for small, focused code modifications. |
| 112 | +- [ ] **Using In-line Chat for Quick Modifications with `/edit`:** |
| 113 | + * Select a variable name and use the in-line chat to ask: `/edit Rename this variable to 'itemCount'.`. |
| 114 | + * **Goal:** Practice using `/edit` for small, focused code modifications. |
108 | 115 |
|
109 |
| -25. ✅ **Exploring Different In-line Suggestion Styles:** |
| 116 | +- [ ] **Exploring Different In-line Suggestion Styles:** |
110 | 117 | * Type code in different styles (e.g., verbose vs. concise) and observe how Copilot's suggestions adapt.
|
111 | 118 | * **Goal:** Understand the influence of your coding style on Copilot's suggestions.
|
112 | 119 |
|
113 |
| -26. ✅ **Using `@workspace` to Understand Project Structure:** |
| 120 | +- [ ] **Using `@workspace` to Understand Project Structure:** |
114 | 121 | * In the chat, ask: `@workspace Describe the overall architecture of this project.` or `@workspace What are the main modules and their dependencies?`.
|
115 | 122 | * **Goal:** Use `@workspace` to get a high-level understanding of your project's organization.
|
116 | 123 |
|
117 |
| -27. ✅ **Generating Data Structures with Chat:** |
| 124 | +- [ ] **Generating Data Structures with Chat:** |
118 | 125 | * In the chat, describe the data structure you need (e.g., "Generate a JSON object representing a customer with properties for name, email, and address.").
|
119 | 126 | * **Goal:** Practice generating data structures using natural language in the chat.
|
120 | 127 |
|
121 |
| -28. ✅ **Asking for Explanations of Technical Concepts:** |
| 128 | +- [ ] **Asking for Explanations of Technical Concepts:** |
122 | 129 | * Use the Copilot Chat to ask general programming questions (e.g., "What is the difference between synchronous and asynchronous programming?", "Explain the concept of recursion.").
|
123 | 130 | * **Goal:** Utilize Copilot as a learning resource for technical concepts.
|
124 | 131 |
|
125 |
| -29. ✅ **Combining `#file` and `#sym` for Focused Questions:** |
| 132 | +- [ ] **Combining `#file` and `#sym` for Focused Questions:** |
126 | 133 | * In the chat, type: `@workspace #file:<path/to/your/file.js> #sym:<name_of_a_function_in_that_file> What are the potential side effects of this function?`.
|
127 | 134 | * **Goal:** See how combining `#file` and `#sym` allows for very precise questions.
|
128 | 135 |
|
129 |
| -30. ✅ **Experimenting with Creative Prompts:** |
| 136 | +- [ ] **Experimenting with Creative Prompts:** |
130 | 137 | * Try using more open-ended or creative prompts in the chat (e.g., "Write a short poem about this code.", "Suggest three alternative ways to implement this feature.").
|
131 | 138 | * **Goal:** Explore the more imaginative capabilities of Copilot.
|
132 | 139 |
|
133 |
| -**Wrap-up:** |
| 140 | +- [ ] **Fixing Errors with `/fix`:** |
| 141 | + * Introduce a deliberate error into a line of code. |
| 142 | + * Select the line with the error. |
| 143 | + * In the in-line chat, type `/fix`. Review the suggested fix. |
| 144 | + * **Goal:** Learn how to use the `/fix` command to get error correction suggestions. |
| 145 | + |
| 146 | +- [ ] **Generating Documentation In-line with `/doc`:** |
| 147 | + * Select a function in your code. |
| 148 | + * In the in-line chat, type `/doc`. Observe the generated documentation suggestion. |
| 149 | + * **Goal:** Understand how to quickly generate documentation using the `/doc` in-line command. |
| 150 | + |
| 151 | +- [ ] **Understanding the Current Editor with `#currentEditor`:** |
| 152 | + * Open a code file you want to analyze. |
| 153 | + * In the Copilot Chat, type: `@workspace /explain #currentEditor What are the main functionalities implemented here?`. |
| 154 | + * **Goal:** Learn how to explicitly use `#currentEditor` to focus analysis on the currently open file. |
| 155 | + |
| 156 | +- [ ] **Referring to the Previous Response with `#previousResponse`:** |
| 157 | + * Ask Copilot a question in the chat. |
| 158 | + * Then, ask a follow-up question that refers to the previous answer, for example: `#previousResponse Elaborate on the second point you made.` |
| 159 | + * **Goal:** Understand how to use `#previousResponse` for more natural and contextual conversations with Copilot. |
| 160 | + |
| 161 | +- [ ] **Asking Language/Technology Specific Questions:** |
| 162 | + * If your project uses Python, ask: `What are some common performance pitfalls in Python?`. If it uses JavaScript, ask: `Explain the concept of closures in JavaScript.`. |
| 163 | + * **Goal:** See how Copilot can provide language and technology-specific information. |
| 164 | + |
| 165 | +- [ ] **Using the "Ask a Question" Entrypoint:** |
| 166 | + * Simply type a question directly into the text box at the top of the Copilot Chat panel without using any specific commands initially (e.g., "How do I sort a list in Python?"). |
| 167 | + * **Goal:** Recognize the basic way to interact with Copilot through natural language. |
| 168 | + |
| 169 | +- [ ] **Using the In-line Chat Shortcut for Code Interaction:** |
| 170 | + * Select a small block of code in your editor. |
| 171 | + * Press `Command + i` (macOS) or `Ctrl + i` (Windows/Linux) to open the in-line chat. You should see `#selection` automatically included in the prompt. |
| 172 | + * In the chat, type: `Add a comment explaining what this code does.` or `Add a console log statement at the end of this block.` |
| 173 | + * Observe how Copilot provides suggestions within the editor based on your in-line chat instruction. Press `Tab` to accept or `Esc` to dismiss. |
| 174 | + * **Goal:** Learn how to quickly open the in-line chat with selected code using the keyboard shortcut to provide instructions for additions or modifications. |
134 | 175 |
|
135 |
| -* ✅ Discuss which new commands and techniques were most insightful. |
136 |
| -* ✅ Encourage participants to continue exploring the documentation and experimenting with different prompts. |
137 |
| -* ✅ Emphasize the importance of providing clear and specific prompts for the best results. |
| 176 | +**Wrap-up:** |
138 | 177 |
|
139 |
| -This expanded set of exercises should provide a more comprehensive exploration of GitHub Copilot's features within VS Code, drawing directly from the provided documentation. Remember to adjust the time allocated for each exercise based on the participants' pace and the complexity of the tasks. |
| 178 | +- [ ] Discuss which new commands and techniques were most insightful. |
| 179 | +- [ ] Encourage participants to continue exploring the documentation and experimenting with different prompts. |
| 180 | +- [ ] Emphasize the importance of providing clear and specific prompts for the best results. |
0 commit comments