Claude x Github Development: VS Code Setup Guide

vscode_claude_git.md

🚀 AI-Assisted Development: VS Code Setup Guide

Welcome to the definitive guide for setting up your Visual Studio Code (VS Code) environment for AI-assisted development. This documentation will walk you through transforming a standard VS Code installation into a powerhouse workflow using Claude, Git, and GitHub.

---

📑 Table of Contents

1. Phase 1: Installing Essential Extensions
2. Phase 2: Connecting to an Existing Repository
3. Phase 3: Empowering Claude with GitHub Skills
4. Phase 4: The Pull Request Workflow

---

Phase 1: Installing Essential Extensions

To get started, we need to equip VS Code with the right tools. We will install the Claude Code extension for AI assistance and the official GitHub/Git extensions for version control.

1. Install the Claude Code Extension

The Claude Code extension brings Anthropic's Claude directly into your IDE, allowing you to generate code, explain complex logic, and refactor seamlessly.

1. Open VS Code.
2. Navigate to the Extensions view by clicking the Extensions icon in the Activity Bar on the left side of the window (or press Ctrl+Shift+X / Cmd+Shift+X).
3. In the search bar, type Claude Code. or open on the web
4. Locate the official extension provided by Anthropic and click Install.
5. Once installed, you will see a new Claude icon in your Activity Bar. Click it and follow the prompt to Sign In and authenticate your account.

2. Install GitHub and Git Extensions

While VS Code has built-in Git support, installing dedicated extensions provides a much richer integration for Pull Requests and repository management.

1. Remain in the Extensions view (Ctrl+Shift+X / Cmd+Shift+X).
2. Search for GitHub Pull Requests and Issues (Official extension by GitHub). Web link
3. Click Install.
4. (Optional but Recommended) Search for GitLens — Git supercharged and install it for advanced line-blame annotations and repository history visualization.
5. Once installed, click the Accounts icon (bottom left gear/profile icon) to sign in to your GitHub account and authorize VS Code.

---

Phase 2: Connecting to an Existing Repository

With our tools installed, the next step is to bring your codebase into VS Code.

Using the VS Code UI (Recommended for Beginners)

1. Open the Command Palette (Ctrl+Shift+P / Cmd+Shift+P).
2. Type Git: Clone and select it from the dropdown.
3. You will be prompted to Clone from GitHub. Click it.
4. If authenticated, a list of your repositories will appear. Select the repository you wish to work on, or paste the repository URL directly.
5. Select a local folder on your machine where the repository will be downloaded.
6. Once cloned, a toast notification will appear in the bottom right. Click Open to load the repository into your workspace.

Using the Integrated Terminal

1. Open the terminal in VS Code (Ctrl+\`` / Cmd+``).
2. Navigate to your desired workspace directory using cd.
3. Run the clone command:

   git clone https://github.com/YOUR-USERNAME/YOUR-REPOSITORY.git

4. Open the folder in VS Code:

   code YOUR-REPOSITORY

---

Phase 3: Empowering Claude with GitHub Skills

To make Claude truly effective, we need to give it context about your version control system. Adding the "GitHub skill" allows Claude to read repository structures, reference existing PRs, and help draft commit messages.

1. Open the Claude Code panel from the Activity Bar.
2. Navigate to the Settings or Skills/Integrations tab within the extension UI.
3. Locate the GitHub Integration or GitHub Skill option.
4. Click Connect or Enable.
5. You will be redirected to your browser to authorize Claude to access your GitHub repositories.

   Note: Ensure you grant access to the specific repositories you intend to work on, or select "All Repositories" if preferred.

6. Once authorized, return to VS Code. You can now use prompts like:
   • "Summarize the recent commits on the main branch."
   • "Draft a pull request description for my current branch."

---

Phase 4: The Pull Request Workflow

Now that your environment is fully integrated, here is the standard workflow for using Claude to help you write code and submit a Pull Request.

Step 1: Create a New Branch

Always work on a separate branch, never directly on main.

1. Click on the branch indicator in the bottom-left corner of the Status Bar (it usually says main or master).
2. Select + Create new branch...
3. Name your branch descriptively (e.g., feature/add-login-button or fix/header-alignment).
4. Press Enter. You are now checked out to your new branch.

Step 2: Write Code with Claude's Assistance

1. Open the files you need to modify.
2. Highlight a section of code, right-click, and select Ask Claude (or use the chat panel).
3. Request changes: "Claude, can you optimize this function to run in O(n) time?" or "Help me write unit tests for this component."
4. Apply the generated code to your files and save (Ctrl+S / Cmd+S).

Step 3: Stage and Commit Changes

1. Open the Source Control view (Ctrl+Shift+G / Cmd+Shift+G).
2. Hover over the changed files and click the + (Plus) icon to stage them.
3. Pro Tip: Ask Claude to help write your commit message! In the Claude chat, ask: "Based on my staged changes, write a concise, conventional commit message."
4. Paste the message into the Source Control input box and click Commit.

Step 4: Publish Branch and Create PR

1. In the Source Control view, click Publish Branch (if this is the first push) or Sync Changes.
2. Once pushed, navigate to the GitHub icon in the Activity Bar (added by the GitHub extension).
3. Expand the Pull Requests section.
4. Hover over the section and click the + (Create Pull Request) icon.
5. Select your target branch (usually main).
6. Title and Description: Use Claude to generate a comprehensive PR description detailing the 'Why' and 'What' of your changes.
7. Click Create to submit the PR directly from VS Code!

---

End of Documentation. Happy Coding! 🚀