Mobile Study: Get Started with GitHub Copilot in Visual Studio Code

2025年8月31日日曜日

Get Started with GitHub Copilot in Visual Studio Code

GitHub Copilot revolutionizes how you write code in VS Code. This tutorial walks you through building a task management web app while using Copilot's most powerful features:

💡 Intelligent code completions
🤖 Autonomous agent mode
✏️ Inline chat for precise edits
⚙️ Smart actions integrated into your workflow
🎛️ Personalized AI experience via custom instructions
✅ Prerequisites
Visual Studio Code installed (Download here)
GitHub Copilot enabled
👉 Set up GitHub Copilot in VS Code
💡 Don't have a subscription? You can use Copilot for free with monthly limits from within VS Code.
🧩 Step 1: Code Faster with AI Completions
Create a project folder and open it in VS Code.
Create a new file called index.html.
Start typing:
<!DOCTYPE html>
Copilot will suggest the rest of the HTML structure as "ghost text."
Press Tab to accept it.
✅ Keep going: Inside the tag, type:
My Task Manager
Copilot continues suggesting useful completions as you go. Use Alt+] and Alt+[ to navigate through multiple suggestions.

🤖 Step 2: Use Agent Mode to Autogenerate Full Features

Agent mode is like your personal developer assistant.

Press Ctrl+Alt+I or click the Copilot icon to open the Chat View.
In the mode dropdown, select Agent.

Enter this prompt:


Create a complete task manager web application with the ability to add, delete, and mark tasks as completed. Include modern CSS styling and make it responsive. Use semantic HTML and ensure it's accessible. Separate markup, styles, and scripts into their own files.

Copilot will:
- Update index.html
- Create style.css
- Create script.js

✅ Preview your app in browser or use the Live Preview extension.

➕ Add a Feature

In Chat view:


Add a filter system with buttons to show all tasks, only completed tasks, or only pending tasks. Update the styling to match the existing design.

Agent mode handles multi-file changes based on your prompt.

✍️ Step 3: Precise Edits with Inline Chat

Inline chat is perfect for targeted code edits.

Open script.js
Select the function where tasks are added.
Press Ctrl+I to open Inline Chat.

Enter:


Add input validation to prevent adding empty tasks and trim whitespace from task text.

✅ Accept the changes if they look good.

Great for:

Bug fixes
Refactoring
Adding validation or comments

🎨 Step 4: Personalize Copilot for Your Project

📄 Custom Instructions

Create a .github folder in the root of your project.
Add a file named copilot-instructions.md.
Paste the following:


# Project general coding guidelines

## Code Style
- Use semantic HTML5 elements (header, main, section, article, etc.)
- Prefer modern JavaScript (ES6+) features like const/let, arrow functions, and template literals

## Naming Conventions
- Use PascalCase for components, interfaces
- Use camelCase for variables and functions
- Prefix private members with underscore (_)
- Use ALL_CAPS for constants

## Code Quality
- Use meaningful names
- Add comments for complex logic
- Handle errors for user inputs and APIs

🎛️ Test Custom Instructions

In Agent mode:


Add a dark mode toggle button to the task manager.

Copilot will follow your new coding standards automatically.

🧠 Create a Custom Chat Mode: Code Reviewer

Open Command Palette → Chat: New Mode File
Save it in .github/chatmodes/Code Reviewer.md
Replace content with:


---
description: 'Review code for quality and adherence to best practices.'
tools: ['codebase', 'usages', 'vscodeAPI', 'problems', 'fetch', 'githubRepo', 'search']
---
# Code Reviewer Mode

You are a senior developer conducting a code review. Your role is to assess code quality and adherence to [project standards](../copilot-instructions.md) without making code changes.

## Analysis Focus
- Quality, bugs, accessibility, UX, maintainability

## Style
- Provide constructive feedback
- Ask clarifying questions
- No code changes—only analysis and reasoning

✅ In Chat View, select Code Reviewer and prompt:


Review my full project

⚡ Step 5: Use Smart Actions (e.g., AI-Powered Commit Messages)

Open the Source Control panel (Ctrl+Shift+G)
Stage your changes
Click the ✨ icon to generate a commit message
AI will generate a conventional commit message based on your changes

✅ Use this for consistent commit history and less manual writing.

🏁 What You’ve Built

You now have a fully functional AI-powered web development workflow:

✅ AI code completions
✅ Feature generation with Agent mode
✅ Precise editing via Inline Chat
✅ Smart commit message generation
✅ Personalized chat modes and coding standards

Mobile Study