home / skills / badlogic / pi-skills / vscode

vscode skill

safe

/vscode

This skill enables viewing file differences in VS Code by launching diffs for two files or git revisions.

npx playbooks add skill badlogic/pi-skills --skill vscode

Review the files below or copy the command above to add this skill to your agents.

Files (1)

SKILL.md

1.1 KB

---
name: vscode
description: VS Code integration for viewing diffs and comparing files. Use when showing file differences to the user.
---

# VS Code CLI Tools

Tools for integrating with VS Code, primarily for viewing diffs.

## Requirements

VS Code must be installed with the `code` CLI available in PATH.

## Opening a Diff

Compare two files side by side in VS Code:

```bash
code -d <file1> <file2>
```

## Git Diffs in VS Code

### Simple Approach (no config needed)

Extract the old version to a temp file, then diff:

```bash
# Compare with previous commit
git show HEAD~1:path/to/file > /tmp/old && code -d /tmp/old path/to/file

# Compare with specific commit
git show abc123:path/to/file > /tmp/old && code -d /tmp/old path/to/file

# Compare staged version with working tree
git show :path/to/file > /tmp/staged && code -d /tmp/staged path/to/file
```

### Gotchas

- File must exist and have changes between the compared revisions
- Use `git log --oneline -5 -- path/to/file` to verify file has history before diffing

## When to Use

- Showing the user what changed in a file
- Comparing two versions of code
- Reviewing git changes visually

Overview

This skill integrates with Visual Studio Code to open side-by-side diffs and compare files. It leverages the VS Code command-line tool to present visual comparisons and can extract historic file versions from Git when needed. Use it when you need a quick, visual way to inspect changes between file revisions or separate files.

How this skill works

The skill calls the VS Code CLI (code -d fileA fileB) to open a two-pane diff of the provided paths. For Git-based comparisons, it extracts an older or staged version to a temporary file (using git show) and then launches a diff between the temp file and the working copy. It requires the 'code' command to be available in PATH and the target files to exist and differ.

When to use it

Show a visual side-by-side diff of two files quickly.
Review what changed between a commit and the working tree.
Compare a staged version against the working copy before commit.
Inspect differences during code review or debugging.
Demonstrate edits to non-Git-controlled files.

Best practices

Ensure VS Code is installed and the 'code' CLI is in PATH before calling the skill.
Verify the file has history with git log --oneline -5 -- path/to/file before extracting old revisions.
Use temporary files for Git extractions (e.g., /tmp/old) and clean them up when done.
Confirm both paths exist and are different to avoid opening empty or identical diffs.
Prefer specific commit hashes for reproducible comparisons rather than relative refs when possible.

Example use cases

Compare the current file with the previous commit: git show HEAD~1:path/to/file > /tmp/old && code -d /tmp/old path/to/file
Review staged changes vs working tree before committing.
Compare two unrelated files on disk to inspect functional differences.
Show a code reviewer the exact changes introduced by a patch.
Diagnose regressions by comparing a known-good commit to the current source.

FAQ

What if 'code' is not found in PATH?

Install VS Code and enable the 'code' CLI from the command palette (Shell Command: Install 'code' command in PATH).

Why does the diff open empty or complain?

Ensure both files exist and contain different content. For Git diffs, verify the file has history and the requested revision contains the file.