Agent Skills in Claude Code and Visual Studio Code: Setup, Benefits, Risks, and a Step-by-Step Example

Image
 AI coding assistants are useful for one-off questions, but many development tasks are not one-off tasks. A team may follow the same testing procedure before every release, use a specific format for code reviews, or require certain checks whenever a database migration is created. Repeating those requirements in every prompt is inefficient. Putting all of them into a permanent instruction file is not always ideal either, because the assistant may receive irrelevant information for tasks that do not need it. This is the problem that Agent Skills are designed to solve. A skill packages reusable instructions, supporting files, examples, and optional scripts into a folder. Claude Code or GitHub Copilot in Visual Studio Code can discover that folder and load its contents when the current task matches the skill’s purpose. Both environments support the open Agent Skills format, which makes it possible to share some skills across tools. This guide explains what skills are, how they differ ...

How to Install and Use GitHub Copilot in Visual Studio Code


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.

What You Will Learn

By the end of this guide, you should be able to:

  • find and install the official GitHub Copilot extension;
  • sign in with the correct GitHub account;
  • check whether Copilot is active in the current VS Code environment;
  • use inline code suggestions;
  • ask contextual questions through Copilot’s chat interface;
  • request explanations and small code changes;
  • review suggestions before accepting them;
  • identify situations where Copilot should not be trusted automatically;
  • verify AI-assisted changes with Git.

This article assumes that you already have:

  • Visual Studio Code installed;
  • a GitHub account;
  • a local Git repository;
  • basic familiarity with git status, git diff, git add, and git commit;
  • a WSL-connected VS Code workspace if you are following the Windows setup from this series.

Understand What GitHub Copilot Does

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:

  • inline code completions;
  • chat-based questions;
  • explanations of selected code;
  • test suggestions;
  • help with errors;
  • proposed edits across one or more files;
  • project-aware assistance;
  • agent-style workflows in supported configurations.

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:

  • the current file;
  • nearby code;
  • selected text;
  • open editor tabs;
  • workspace files;
  • language and framework information;
  • instructions included in your prompt.

Copilot does not automatically understand every project decision.

It may not know:

  • why a previous design was chosen;
  • which security rules your team follows;
  • whether a function has undocumented behavior;
  • which production constraints matter;
  • whether a dependency is approved;
  • whether the generated code matches the real user requirement.

Use Copilot to accelerate reasoning and implementation, not to replace project knowledge.

Check Your GitHub Copilot Access

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:

  • you are signed in to the intended GitHub account;
  • Copilot is enabled for that account;
  • any required plan or entitlement is active;
  • organization policies do not block the feature;
  • the account has access to the features used in this guide.

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.

Prepare a Safe Practice Repository

Before installing Copilot, open the practice repository used in the earlier Git tutorial.

From your WSL terminal:

cd ~/projects/vibe-coding-practice

Check the current location:

pwd

Open the repository in VS Code:

code .

In the VS Code integrated terminal, run:

git status

The best starting point is a clean working tree.

If there are uncommitted changes, review them before continuing:

git diff

Commit completed work or set unfinished work aside deliberately.

AI-assisted edits are easier to evaluate when you begin from a known state.

Install the Official GitHub Copilot Extension

Open the Extensions view in Visual Studio Code.

Search for:

GitHub Copilot

Before selecting Install, verify that:

  • the publisher is GitHub;
  • the extension is referenced by current official GitHub documentation;
  • the extension name matches the official listing;
  • you are not installing an unrelated extension with a similar name.

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.

Check the Installation Environment

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:

  • Install;
  • Install in WSL;
  • Enable;
  • Enable in Workspace;
  • Disabled in this Environment.

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.

Sign In to GitHub

After installation, VS Code should prompt you to sign in to GitHub or authorize GitHub Copilot.

The exact flow may open:

  • a browser window;
  • a GitHub authorization page;
  • a device-code screen;
  • a VS Code account menu.

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:

  • which account is being used;
  • which application is requesting access;
  • what permissions are requested;
  • whether the request is expected.

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.

Verify That Copilot Is Available

Create a new file in the practice repository:

copilot-practice.js

Add a comment:

// Return the larger of two numbers.

Press Enter and begin typing:

function

Copilot 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:

  • Does the function match the comment?
  • What happens when the values are equal?
  • Are the parameter names clear?
  • Does the project use this coding style?
  • Is the suggestion more complicated than necessary?

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.

Use Inline Suggestions Carefully

Inline suggestions are most useful when the task is small and the surrounding code provides clear context.

Good uses include:

  • completing a repetitive mapping function;
  • suggesting a test case;
  • filling in a simple conditional;
  • generating a small documentation comment;
  • completing a predictable data transformation.

Inline suggestions are less reliable when the task requires:

  • architectural decisions;
  • security-sensitive code;
  • authentication logic;
  • complex database transactions;
  • hidden business rules;
  • broad changes across the application.

Give Copilot Better Context

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.

Ask Copilot to Explain Code

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;
  • each task ID becomes a key;
  • a Map keeps one value per key;
  • later values may replace earlier values with the same key;
  • values() retrieves the remaining task objects;
  • the spread syntax converts the values into an array.

Do not assume the explanation is correct simply because it is confident.

Compare it with:

  • the actual language behavior;
  • a small test;
  • official JavaScript documentation;
  • the observed output.

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.

Ask for a Small Code Change

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:

  • Does it modify only the intended function?
  • Does it preserve the original array when input is invalid?
  • Does it add any package or import?
  • Does it handle non-string values?
  • Does it match the project’s data structure?
  • Should tasks have IDs?
  • Are there existing tests that need updating?

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.”

Ask Copilot to Suggest Tests

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:

  • a normal title;
  • leading and trailing spaces;
  • an empty string;
  • a whitespace-only string;
  • null;
  • a number;
  • an unchanged original array;
  • a new array when a valid task is added.

Copilot may suggest a test framework that is not installed.

Before accepting test code, check:

  • which framework the project uses;
  • whether a new dependency is required;
  • whether the test syntax matches the current project;
  • whether the assertions test the real behavior.

Do not install a framework only because Copilot mentioned it.

Use Project Context Deliberately

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:

  • the language;
  • the framework or absence of one;
  • the file involved;
  • the expected behavior;
  • constraints;
  • files that must not change;
  • whether dependencies are allowed;
  • how the result should be verified.

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.

Review Copilot Changes with Git

After accepting or applying a suggestion, return to the terminal.

Run:

git status

Check which files changed.

For this exercise, you should expect a file such as:

copilot-practice.js

Review the content difference:

git diff

Or review the specific file:

git diff copilot-practice.js

Ask:

  • Did Copilot change only the requested file?
  • Did it add unrelated formatting?
  • Did it introduce generated files?
  • Did it change package configuration?
  • Did it expose private information?
  • Can I explain the new behavior?

Run the code or relevant tests.

For a simple JavaScript file, if Node.js is installed, you may run:

node copilot-practice.js

Do not run generated commands automatically without reading them.

When the result is correct, stage the specific file:

git add copilot-practice.js

Review the staged change:

git diff --staged

Then commit:

git commit -m "Add Copilot practice functions"

This preserves the reviewed result, not merely the AI suggestion.

Treat Copilot Suggestions as Proposals

A productive mindset is:

Copilot proposes
You inspect
Tests provide evidence
Git records the verified result

Avoid this workflow:

Copilot proposes
You accept everything
The application fails
You ask Copilot to fix all of it

Repeatedly asking the AI to repair its own unexplained changes can make the project harder to understand.

A better process is:

  1. Start from a clean Git state.
  2. Ask for one small change.
  3. Read the proposed code.
  4. Inspect the Git diff.
  5. Run the relevant behavior.
  6. Keep or reject the result.
  7. Commit only after verification.

Common GitHub Copilot Mistakes

Installing an Unofficial Extension

Always verify the publisher and current official documentation.

An extension may be able to read project files or interact with online services.

Using the Wrong GitHub Account

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.

Accepting Long Suggestions Without Reading Them

The longer the suggestion, the greater the review burden.

Break large tasks into smaller requests.

Letting Copilot Add Dependencies Automatically

A generated solution may import a package that the project does not currently use.

Before installing anything, ask:

  • Is the dependency necessary?
  • Is the package maintained?
  • Does the license fit the project?
  • Is there already a built-in solution?
  • Does the team allow this package?

Assuming Generated Tests Prove Correctness

AI-generated tests may test the implementation instead of the requirement.

They may also miss failure cases.

Review what each test actually proves.

Sharing Sensitive Information

Do not provide:

  • API keys;
  • passwords;
  • access tokens;
  • production database records;
  • customer information;
  • confidential source code;
  • private incident details.

Follow the relevant organization’s data-handling rules.

Using Chat Instead of Reading the Error

When code fails, read the exact error first.

Provide Copilot with:

  • the error message;
  • the relevant code;
  • the expected behavior;
  • the steps that reproduce the issue.

Avoid vague prompts such as:

It does not work. Fix everything.

Confusing a Valid Suggestion with a Complete Solution

Code can be syntactically valid but still fail to meet the real requirement.

Check behavior, integration, security, and maintainability.

Disable or Pause Copilot When Needed

There may be times when you want to work without inline suggestions.

Examples include:

  • practicing a language concept yourself;
  • reviewing code without AI influence;
  • working in a sensitive repository;
  • diagnosing whether suggestions are distracting;
  • following an organization’s restrictions.

VS Code and Copilot may provide controls to disable suggestions:

  • temporarily;
  • for a specific language;
  • for the current workspace;
  • for all projects.

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.

A Practical First Copilot Workflow

Use the following workflow for beginner tasks.

1. Confirm the Repository State

git status

2. Define One Small Task

Example:

Add input validation to normalizeTaskTitle. Do not change other functions or add dependencies.

3. Request or Review a Suggestion

Read the code before accepting it.

4. Inspect the Changed Files

git status
git diff

5. Run the Code or Tests

Use the project’s documented verification command.

6. Stage Only the Verified Files

git add copilot-practice.js

7. Review the Staged Diff

git diff --staged

8. Commit the Result

git commit -m "Validate task titles"

This workflow makes Copilot part of a controlled development process rather than an automatic code generator.

Verify Your GitHub Copilot Setup

Before continuing, confirm that you can:

  • identify the official GitHub Copilot extension;
  • sign in with the correct GitHub account;
  • confirm that Copilot is active;
  • receive or dismiss an inline suggestion;
  • ask Copilot to explain selected code;
  • request one small code change;
  • review modified files with git status;
  • inspect the change with git diff;
  • run the code or tests;
  • commit only the result you verified;
  • disable Copilot when appropriate.

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.

Conclusion

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.

Frequently Asked Questions

Do I need a paid GitHub Copilot plan?

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.

Is GitHub Copilot the same as Claude Code?

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.

Can I trust code generated by Copilot?

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

Popular posts from this blog

Claude Code Multi-Agent Setup for Beginners: Models, Roles, and Your First Project

The Limits and Future of Vibe Coding

How to Test and Deploy Your First Vibe-Coded App