Agent Skills in Claude Code and Visual Studio Code: Setup, Benefits, Risks, and a Step-by-Step Example
GitHub Copilot brings AI-assisted coding directly into Visual Studio Code. It can suggest code while you type, explain unfamiliar functions, answer questions about the open project, and help draft small changes.
That convenience can make Copilot feel like an advanced autocomplete system. In practice, it is more useful when treated as a coding assistant whose suggestions still require human review.
A suggestion may look professional and compile successfully while still being incorrect for the project. It may misunderstand a requirement, duplicate existing logic, introduce an unnecessary dependency, or create behavior that works only for one example.
This guide explains how to set up GitHub Copilot in VS Code, try a few beginner-friendly tasks, and review the results before keeping them.
Version note: GitHub may change Copilot plans, extension packaging, feature names, supported models, sign-in steps, and availability. Before publishing this guide, compare all version-sensitive details with the current official GitHub Copilot and Visual Studio Code documentation.
By the end of this guide, you should be able to:
This article assumes that you already have:
git status, git diff, git add, and git commit;GitHub Copilot is an AI coding assistant that works inside supported development environments.
In Visual Studio Code, it may provide several types of assistance, depending on the current product version and your account access.
These may include:
The exact interface may evolve, but the underlying idea remains the same: Copilot uses the context available in the editor to propose code or explanations.
That context may include:
Copilot does not automatically understand every project decision.
It may not know:
Use Copilot to accelerate reasoning and implementation, not to replace project knowledge.
GitHub Copilot may require an eligible account, subscription, organization assignment, educational benefit, free allowance, or another currently supported access method.
Because GitHub can change its plans and limits, check your account’s current Copilot status in GitHub settings before installing the extension.
Confirm:
If you use a company-managed GitHub account, Copilot access may be controlled by an organization administrator.
Do not bypass organization restrictions by connecting a personal account to confidential company repositories.
Before installing Copilot, open the practice repository used in the earlier Git tutorial.
From your WSL terminal:
cd ~/projects/vibe-coding-practiceCheck the current location:
pwdOpen the repository in VS Code:
code .In the VS Code integrated terminal, run:
git statusThe best starting point is a clean working tree.
If there are uncommitted changes, review them before continuing:
git diffCommit completed work or set unfinished work aside deliberately.
AI-assisted edits are easier to evaluate when you begin from a known state.
Open the Extensions view in Visual Studio Code.
Search for:
GitHub CopilotBefore selecting Install, verify that:
Depending on the current VS Code and Copilot release, chat functionality may be included in the main Copilot extension or provided through another official GitHub extension.
Do not assume an old tutorial reflects the current extension structure.
Follow the current official setup instructions and install only the components required for the supported Copilot experience.
If VS Code is connected to WSL, the Extensions view may show where an extension is installed.
Some extensions run primarily in the local VS Code interface. Others require installation or activation in the WSL environment.
Read the environment labels shown by VS Code.
You may see options such as:
Follow the current official recommendation for GitHub Copilot in a WSL-connected workspace.
The important result is that Copilot can see and assist with the project opened inside WSL.
After installation, VS Code should prompt you to sign in to GitHub or authorize GitHub Copilot.
The exact flow may open:
Confirm that the browser is using the official GitHub domain.
Sign in with the GitHub account that has Copilot access.
Review the authorization request before approving it.
Check:
Do not enter credentials into an unfamiliar window or copy authorization codes into an unrelated website.
After approval, return to VS Code.
The editor may display a Copilot status indicator, account status, chat icon, or another confirmation that the service is active.
Create a new file in the practice repository:
copilot-practice.jsAdd a comment:
// Return the larger of two numbers.Press Enter and begin typing:
functionCopilot may display a suggestion in faded or ghosted text.
The exact suggestion and interface will vary.
If a suggestion appears, do not accept it immediately. Read it first.
A reasonable implementation might resemble:
function largerNumber(a, b) {
return a > b ? a : b;
}The generated function may use a different name or structure.
Ask:
Use the current VS Code shortcut or interface control to accept, dismiss, or cycle through suggestions.
Shortcuts can vary by operating system, keymap, and release, so rely on the labels shown in your installed version rather than memorizing an old tutorial.
Inline suggestions are most useful when the task is small and the surrounding code provides clear context.
Good uses include:
Inline suggestions are less reliable when the task requires:
Compare these comments.
Weak context:
// Fix this.Better context:
// Return a trimmed task title.
// If the input is not a string, return an empty string.
function normalizeTaskTitle(input) {The second comment gives Copilot a goal and an edge-case requirement.
A possible completion might be:
function normalizeTaskTitle(input) {
if (typeof input !== "string") {
return "";
}
return input.trim();
}Even when the code looks correct, test it.
For example:
console.log(normalizeTaskTitle(" Buy milk "));
console.log(normalizeTaskTitle(null));
console.log(normalizeTaskTitle(42));Expected output:
Buy milk
The empty results may appear as blank lines.
Copilot can propose the implementation, but you remain responsible for deciding whether the behavior is correct.
Copilot’s chat interface can be useful when you encounter unfamiliar code.
Select the following function:
function uniqueTasks(tasks) {
return [...new Map(tasks.map((task) => [task.id, task])).values()];
}Ask Copilot a question such as:
Explain this function in beginner-friendly language. Describe what happens when two tasks have the same id.A helpful explanation should identify that:
map creates key-value pairs;Map keeps one value per key;values() retrieves the remaining task objects;Do not assume the explanation is correct simply because it is confident.
Compare it with:
Test the function:
const tasks = [
{ id: 1, title: "First version" },
{ id: 2, title: "Another task" },
{ id: 1, title: "Updated version" },
];
console.log(uniqueTasks(tasks));This gives you evidence about which duplicate value remains.
AI explanations are useful starting points, not authoritative specifications.
Copilot chat may support questions about the current file or selected code.
For this exercise, create:
function addTask(tasks, title) {
return [...tasks, { title }];
}Ask Copilot:
Update this function so that it trims the title and rejects empty titles. Return the original array when the title is invalid. Do not add dependencies.A suitable result may resemble:
function addTask(tasks, title) {
if (typeof title !== "string") {
return tasks;
}
const trimmedTitle = title.trim();
if (!trimmedTitle) {
return tasks;
}
return [...tasks, { title: trimmedTitle }];
}Review the change before accepting it.
Questions to ask:
The code may satisfy the prompt while still being incomplete for the real application.
That is why a small, precise request is easier to review than “improve this function.”
AI coding assistants are often useful for generating test ideas.
Ask:
Suggest test cases for addTask. Include normal input, whitespace-only input, non-string input, and verification that the original array is not mutated.Review the proposed tests.
A strong set should consider:
null;Copilot may suggest a test framework that is not installed.
Before accepting test code, check:
Do not install a framework only because Copilot mentioned it.
Copilot’s answer quality depends on the context it can access.
Before asking a question, provide the relevant information.
For example:
This is a small JavaScript task-list project with no framework. The project does not use external dependencies. Review addTask in copilot-practice.js and suggest the smallest change that rejects blank titles. Do not edit other files.This is better than:
Fix the task function.Useful context may include:
Context should be relevant, not excessively long.
Do not paste confidential company code, credentials, customer data, or private production logs into an AI tool without authorization and an appropriate data-handling policy.
After accepting or applying a suggestion, return to the terminal.
Run:
git statusCheck which files changed.
For this exercise, you should expect a file such as:
copilot-practice.jsReview the content difference:
git diffOr review the specific file:
git diff copilot-practice.jsAsk:
Run the code or relevant tests.
For a simple JavaScript file, if Node.js is installed, you may run:
node copilot-practice.jsDo not run generated commands automatically without reading them.
When the result is correct, stage the specific file:
git add copilot-practice.jsReview the staged change:
git diff --stagedThen commit:
git commit -m "Add Copilot practice functions"This preserves the reviewed result, not merely the AI suggestion.
A productive mindset is:
Copilot proposes
You inspect
Tests provide evidence
Git records the verified resultAvoid this workflow:
Copilot proposes
You accept everything
The application fails
You ask Copilot to fix all of itRepeatedly asking the AI to repair its own unexplained changes can make the project harder to understand.
A better process is:
Always verify the publisher and current official documentation.
An extension may be able to read project files or interact with online services.
VS Code may already be signed in with another account.
Check the active account before authorizing Copilot, especially when personal and work accounts are both used.
The longer the suggestion, the greater the review burden.
Break large tasks into smaller requests.
A generated solution may import a package that the project does not currently use.
Before installing anything, ask:
AI-generated tests may test the implementation instead of the requirement.
They may also miss failure cases.
Review what each test actually proves.
Do not provide:
Follow the relevant organization’s data-handling rules.
When code fails, read the exact error first.
Provide Copilot with:
Avoid vague prompts such as:
It does not work. Fix everything.Code can be syntactically valid but still fail to meet the real requirement.
Check behavior, integration, security, and maintainability.
There may be times when you want to work without inline suggestions.
Examples include:
VS Code and Copilot may provide controls to disable suggestions:
The exact controls may change.
Use the current status menu or official settings documentation.
Disabling Copilot does not damage the repository. It only changes how the extension assists you.
Use the following workflow for beginner tasks.
git statusExample:
Add input validation to normalizeTaskTitle. Do not change other functions or add dependencies.Read the code before accepting it.
git status
git diffUse the project’s documented verification command.
git add copilot-practice.jsgit diff --stagedgit commit -m "Validate task titles"This workflow makes Copilot part of a controlled development process rather than an automatic code generator.
Before continuing, confirm that you can:
git status;git diff;You should also be able to explain this principle:
Copilot can generate a plausible suggestion, but the developer remains responsible for correctness, security, and project fit.
GitHub Copilot can make Visual Studio Code more productive by suggesting code, explaining unfamiliar logic, and helping with focused development tasks.
Its value does not come from accepting every suggestion. It comes from combining fast proposals with careful review.
The safest beginner workflow is to provide clear context, request one small change, inspect the result, test the behavior, and use Git to record only verified work.
Copilot works closely inside the editor. The next article will introduce Claude Code, which is designed for a broader project-level and terminal-based workflow. We will examine installation, authentication, project access, permission prompts, and a safe first task.
GitHub’s plans and access rules can change.
Check the current official Copilot plan page and your account settings to confirm available features, usage limits, and eligibility before publishing or following the tutorial.
No.
GitHub Copilot is closely integrated with editors such as VS Code and may provide inline suggestions, chat, and other coding assistance. Claude Code is commonly used as a terminal-based coding agent for broader project tasks.
Their capabilities may overlap, but their workflows and interfaces differ.
Treat generated code as a proposal.
Read it, inspect the Git diff, test the behavior, check for security or privacy problems, and confirm that it fits the project before committing it.
Comments
Post a Comment