vigneshiyergithub

Posted on Jan 6

The GitHub Copilot + VS Code Duo: A Developer's Guide

#programming #githubcopilot #learning #ai

Introduction

Developers often juggle dozens of tasks: managing new features, squashing bugs, reviewing pull requests, and occasionally remembering to commit their code. When your workload starts resembling a never-ending log of tasks, GitHub Copilot can help lighten the load.

This guide walks you through setting up and mastering GitHub Copilot in Visual Studio Code, highlighting ways to get the most out of it—from everyday code completions to advanced multi-file refactoring. If you’ve ever wished for a coding companion that understands your project’s quirks, read on.

Getting Started: Setting the Stage

Subscription Check

You’ll need an active GitHub Copilot subscription. Head to the official Copilot page to set that up.

Some organizations provide licenses for their dev teams—sometimes it’s worth double-checking before you pay out of pocket.
Visual Studio Code

Make sure you have the latest VS Code installed from the official download page. An up-to-date editor ensures full compatibility with Copilot’s feature set.
Installing the GitHub Copilot Extension
- Open VS Code and access Extensions using Ctrl+Shift+X (or Cmd+Shift+X on macOS).
- Search for “GitHub Copilot.”
- Install it, and trust that you’re on the path to fewer tedious coding tasks.
Authentication
- Once installed, VS Code usually prompts you to sign in to GitHub.
- If you’ve changed devices or revoked permissions, you might have to re-authorize.
Troubleshooting

If you run into sign-in hiccups, consult the official docs for troubleshooting GitHub Copilot Chat in IDEs. Sometimes you just need a second pass to get everything working.

Core Features: Your Daily Coding Ally

Code Completions

Inline Suggestions: As you type, Copilot suggests code in a faint overlay. If you see something that aligns with what you’re writing, press Tab to accept. If you see something that definitely doesn’t align, just keep typing.
Multiple Suggestions: For those moments when you’re not sure what style suits you best, press Option+] or Alt+] to scroll through alternate suggestions. It’s a quick way to decide which snippet feels right.
Context-Aware: The best results come when Copilot “knows” your project. Open related files, write meaningful comments, and keep your environment consistent. In return, you’ll likely see more polished suggestions.
Partial Accept: Sometimes you only need a line or a single word. Just accept that portion and ignore the rest. It’s a welcome way to nudge the AI without letting it take over the entire code block.

Inline Chat

Access Inline Chat with Ctrl+i or Cmd+i.
Highlight a bit of code, then type /explain if you need clarity on something you wrote a few sprints ago (or a few hours ago).

Quick Chat

For short questions that don’t merit a full screen takeover, press Shift + Cmd + i (Mac) or Shift + Ctrl + i (Windows/Linux).
Example: “How do I efficiently map an array in JavaScript?” This prompt-based approach can save you a trip to the browser.

Chat View

For deeper conversations, click the chat icon in the Activity Bar or use Ctrl + Cmd + i on macOS (Ctrl + Alt + i on Windows/Linux).
Apply context variables like #file or #selection to guide Copilot. Tag chat participants such as @workspace or @github to pull information about your codebase or repositories.

Copilot Edits (Preview)

Use Cmd+Shift+1 or Ctrl+Shift+1 to open Copilot Edits.
Ask Copilot to refactor all your class components to functional ones or perform a mass rename across multiple files. It’s helpful for large-scale code renovations.
You have full control to review, accept, or roll back changes.

Personalizing Copilot: Tuning the AI

Custom Instructions

Adjust Copilot’s behavior by specifying instructions in your settings.json or in a .github/copilot-instructions.md file.

Define how code generation, testing, reviews, or commit messages should adhere to your team standards.

"github.copilot.chat.codeGeneration.instructions": [
  { "text": "Always add a comment: 'Generated by Copilot'." },
  { "text": "For TypeScript, prefix private field names with an underscore." }
]

If you prefer a more elaborate approach, you can embed a separate code-style.md file to keep your instructions tidy.

Language-Specific Settings

Turn Copilot off for languages you’d rather handle manually. Some teams disable it for YAML or plaintext to keep certain files fully human-driven.

{
  "editor.inlineSuggest.enabled": true,
  "github.copilot.enable": {
    "*": true,
    "yaml": false,
    "plaintext": false,
    "markdown": true,
    "javascript": true,
    "python": true
  }
}

GitHub.com Settings

In your GitHub account settings, you’ll find more advanced Copilot preferences. Here you can decide if Copilot should propose code resembling public repositories or how your data is used.

Advanced Usage Techniques

Prompt Engineering

Start general, then refine. “Write a function to sort an array” can become “Sort an array of user objects by last name, ascending order.”
Provide examples: input and expected output can guide Copilot to produce more accurate code.
Indicate relevant context: use #file, #selection, or mention specific files so Copilot draws from the correct material.

Chat Participants

@workspace: For broader project insights across multiple files.
@vscode: Questions on shortcuts or editor configurations.
@terminal: For quick shell commands when your memory is on coffee break.
@github: Pull in repository details, open issues, or PR summaries directly in the editor.

Copilot Skills

Ask “@github What skills are available?” for a list of specialized capabilities—like retrieving commit details or summarizing open discussions.
This can be especially handy when you’re knee-deep in code and want to see how certain commits changed a file.

Multiple AI Models

In some organizations, you might have options: GPT-40, Claude 3.5 Sonnet, or an in-house model for specialized tasks.
Each has unique strengths, from handling large text inputs to particularly tricky logic. Select what suits the job best.

Troubleshooting and Suggested Workflow

No Suggestions
- Confirm you’re logged in, check your subscription, and verify your language settings.
Code Duplication
- Copilot can echo patterns. Tackle duplicates in code reviews as you normally would.
Authorization Problems
- If you can’t authenticate, try revoking and re-authorizing. Most persistent issues respond to a fresh start.
Accuracy
- As with any AI, results vary. Test everything Copilot generates. Automated tests or manual reviews help maintain code quality.

Keyboard Shortcuts

Action	macOS	Windows/Linux	Description
Accept Inline Suggestion	`Tab`	`Tab`	Takes the suggestion Copilot hints at.
Dismiss Inline Suggestion	`Esc`	`Esc`	Cancels an unwanted suggestion.
Show Next Inline Suggestion	`Option+]`	`Alt+]`	Scrolls through alternatives.
Show Previous Inline Suggestion	`Option+[`	`Alt+[`	Cycles backward.
Trigger Inline Suggestion	`Option+\`	`Alt+\`	Manually request suggestions.
Open Copilot in Separate Pane	`Ctrl+Return`	`Ctrl+Enter`	Displays suggestions in a new panel.
Toggle Copilot On/Off	None (by default)	None (by default)	Useful if you need a quick breather from AI.
Start Inline Chat	`Cmd + i`	`Ctrl + i`	Launches a chat thread in the code editor.
Open Quick Chat Dropdown	`Shift+Cmd+i`	`Shift+Ctrl+i`	For short Q&A.
Open Copilot Edits	`Cmd+Shift+1`	`Ctrl+Shift+1`	Initiates multi-file editing sessions.
Attach context to a prompt	`\`	`\`	Select context for your next Copilot inquiry.
Accept All Edits	`Enter`	`Enter`	Approves every proposed change in Copilot Edits.
Discard All Edits	`Backspace`	`Backspace`	Rejects all changes at once.
Navigate to the previous/next edit	`F5` / `F6`	`F5` / `F6`	Moves between pending changes in Copilot Edits.

Conclusion

GitHub Copilot can automate repeated tasks, offer suggestions when you’re stuck, and even help maintain consistent coding styles across your project. While it won’t replace the creativity and critical thinking of a skilled developer, it’s a valuable ally when you need extra bandwidth.

Want to share some Copilot-inspired best practices or marvel at a tricky bug it helped you fix? The developer community loves hearing those stories. If you’ve discovered inventive ways to fine-tune Copilot, pass them along. And for any deeper issues, the official GitHub Copilot docs are your steadfast companion.

Happy coding, and may your Pull Requests be ever in your favor!

References

DEV Community