Slide 1

Slide 1 text

GitHub Copilot Tips and Tricks

Slide 2

Slide 2 text

Yuichi Tanaka Strategic Solutions Engineer GitHub @yuichielectric

Slide 3

Slide 3 text

Today’s Topics Code Completion Chat Editor Integration Note: this session is based on Visual Studio Code 1.95 (Oct 2024 release).

Slide 4

Slide 4 text

Code Completion How To Provide Effective Context

Slide 5

Slide 5 text

GitHub Copilot LLM Context Suggestion

Slide 6

Slide 6 text

GitHub Copilot What is Context? Context is the information that GitHub Copilot extracts to provide code suggestion: - Code snippets (including comments) before and after the cursor in the current file - Relevant code snippets from other open files in your editor This information is prioritized, filtered, and then added to the prompt sent to the LLM. https://github.blog/2023-05-17-how-github-copilot-is-getting-better-at-understanding-your-code/

Slide 7

Slide 7 text

GitHub Copilot Keep Relevant Files Open Pinning files prevents accidental closures and ensures Copilot has access to the most relevant context. Examples: ● Type definition files (.d.ts files) used in TypeScript projects ● The code being tested when writing test code, or vice-versa

Slide 8

Slide 8 text

GitHub Copilot Names Matter When it comes to code completion, the names of your symbols like variables, functions, and classes are crucial hints for GitHub Copilot. Use consistent naming conventions and avoid using different names for the same concept. Also, be sure to take advantage of Copilot’s name suggestion feature, which we’ll discuss later.

Slide 9

Slide 9 text

GitHub Copilot To Get Better Suggestions ● Review Multiple Suggestions ○ Copilot may offer several options, so take a look at them all. ○ Open the command palette and type “GitHub Copilot: Open Completions Panel” ● Write Comments in Natural Language ○ Describe the code you want. ○ Include examples if necessary. ○ For instance, “A function that returns ‘xx’ when given input ‘yy’” ● Start Writing Code Yourself ○ The code you start writing also provides context for Copilot.

Slide 10

Slide 10 text

GitHub Copilot Excluding specific files In settings UI (repo, org, or enterprise), you can specify files to be excluded from GitHub Copilot. Files that are excluded will: - Lose access to code completion - No longer be used as context for code completion You can exclude files regardless of whether they exist in a GitHub repo. https://docs.github.com/en/copilot/managing-copilot/managing-github-copilot-in-your-organization/setting-policies-for-copilot-in-your-organization/excluding-content-from-github-copilot

Slide 11

Slide 11 text

Chat Mastering Slack Commands, Agents, and Context Variables

Slide 12

Slide 12 text

Chat Chat with Copilot while referencing the context of your editor. Answers coding questions Explains code Generates unit tests Suggests code fixes Improves readability Translates languages

Slide 13

Slide 13 text

GitHub Copilot

Slide 14

Slide 14 text

Chat Chat with Copilot while referencing the context of your editor. Answers coding questions Explains code Generates unit tests Suggests code fixes Improves readability Translates languages

Slide 15

Slide 15 text

GitHub Copilot What is Used as Context? [Premise] Generally, open files are candidates for context. However, there are exceptions (explained later). 1. When text is selected in the editor:    → The selected text is used. 2. When nothing is selected:    → The text displayed in the active editor is used. 3. Specified by context variables (explained later)

Slide 16

Slide 16 text

GitHub Copilot Context automatically added in Jupyter Notebook In inline chat within Jupyter Notebook, the kernel state (variables and available packages, etc.) is automatically added as context.

Slide 17

Slide 17 text

Context Variables Context variables are used to specify the context by including them in your prompts, starting with the “#” symbol. Example) #file:BookDatabaseImpl.java The entire specified file is used as the context.

Slide 18

Slide 18 text

GitHub Copilot Key Context Variables #selection The currently selected text in the active editor. #file A specific file (a VS Code file selection UI will be displayed) #editor The currently displayed text in the active editor. #terminalLastCommand The result of the last command executed in the active terminal. #terminalSelection The currently selected text in the active terminal.

Slide 19

Slide 19 text

GitHub Copilot Example of Using Context Variables In the VS Code terminal, after displaying the diff with “git diff”, execute the following prompt: Please review the code from the following perspectives and point out any areas that need to be fixed: ● Can the code be written more concisely? ● Could this code cause compile or runtime errors? ● Have any security bugs been introduced? #terminalLastCommand

Slide 20

Slide 20 text

GitHub Copilot

Slide 21

Slide 21 text

Specifying Context through GUI Clicking 📎 icon in the chat input allows you to specify the context from the following options: - Editor Selection - Terminal Selection - Entire Codebase - Specific Symbol - Specific File

Slide 22

Slide 22 text

Prompt examples https://docs.github.com/en/copil ot/example-prompts-for-github- copilot-chat

Slide 23

Slide 23 text

Custom Instructions (preview) You can predefine instructions in a file for code that will be generated in chat. While chat generates code by referencing files used as context, this feature can be used when you want to provide explicit instructions.

Slide 24

Slide 24 text

GitHub Copilot

Slide 25

Slide 25 text

Custom Instructions (experimental) Custom instructions for test generation can be specified as a separate configuration.

Slide 26

Slide 26 text

Slash Commands Commands that start with “/” in the chat. Shortcuts for common asks to Copilot. In the example, /explain is used to request an explanation of the code.

Slide 27

Slide 27 text

GitHub Copilot Key Slash Commands /explain Explains the selected code. /tests Generates unit tests for the selected code. /doc Generates documentation comments for the selected code (inline chat only). /fix Fixes problems in the selected code. /new Generates a template for the specified workspace.

Slide 28

Slide 28 text

Agents By including agents that start with “@” you can specify where to gather context from. Example) @workspace This part specifies the agent. In this example, even unopened files can be included in the context.

Slide 29

Slide 29 text

GitHub Copilot Key Agents @workspace Chat about the entire workspace. @terminal Chat about the terminal. @vscode Chat about VS Code.

Slide 30

Slide 30 text

Adopting code suggested in Chat   Apply using LLM to match code in the editor   Insert at the editor’s cursor position   Copy to clipboard

Slide 31

Slide 31 text

Model selection Currently you can choose from the following 5 models Note: This refers to the model used for chat functionality.

Slide 32

Slide 32 text

Copilot Edits (preview) A feature that allows you to specify a group of files you want to modify, then describe the desired changes in natural language, and Copilot will make changes across those files accordingly.

Slide 33

Slide 33 text

Editor Integration

Slide 34

Slide 34 text

Inline Chat Chat not only in the chat pane, but also directly within the editor. Code suggestions are inserted directly into the editor.

Slide 35

Slide 35 text

Inline Chat Example) Suggesting code fixes within the editor.

Slide 36

Slide 36 text

Inline Chat Example) Use /doc in inline chat to suggest a docstring.

Slide 37

Slide 37 text

Terminal Inline Chat Example) Listing the top 5 largest files in the src directory.

Slide 38

Slide 38 text

Code Fix Suggestions Copilot suggestions appear in the Quick Fix menu for errors highlighted in the editor (red underlines). Selecting “Fix using Copilot” applies the suggested fix.

Slide 39

Slide 39 text

Code Fix Suggestions Copilot suggestions appear in the Quick Fix menu for errors highlighted in the editor (red underlines). Selecting “Fix using Copilot” applies the suggested fix.

Slide 40

Slide 40 text

Renaming Symbols Executing “Rename Symbol” from the command palette suggests appropriate names based on the surrounding context.

Slide 41

Slide 41 text

Commit Message Suggestions Suggest a commit message that describes the current changes. References: - The last 10 commits in the repository. - The last 10 commits by the committer.

Slide 42

Slide 42 text

Code Review You can select areas you want reviewed, or receive a code review from Copilot on your current changes. Review comments will be displayed in the editor, and where possible, change suggestions will also be provided. You can choose to adopt these suggested changes.

Slide 43

Slide 43 text

GitHub Copilot

Slide 44

Slide 44 text

Code Review Review perspectives can also be specified as custom instructions.

Slide 45

Slide 45 text

Thank you