Hacktoberfest 2026: the issues maintainers tagged for October, open and beginner-friendly. Browse Hacktoberfest issues

Feature: Match VSCode's diff output

Open
#734 1 comment 5 reactions 0 assignees View on GitHub

Maintainers usually reply within 1 day

Nobody has claimed this yet.

Assessment

Difficulty
5/5
Estimated time
Over a week
Newbie friendliness
42/100
Issue type
Feature
Clarity
Mostly clear
Activity status
Quiet
Tech stack
typescript
Domain
tooling

Research direction

Start by reading the @pierre/diffs diff-generation and rendering entry points, including parseDiffFromFile and its ignoreWhitespace option. Compare its output with VSCode for the mixed-change example in the issue, then determine whether an existing configuration or extension point can produce the match. Done means the same change reads like VSCode's diff, or the issue identifies the remaining behavior that requires a library change.

Written by the indexing model from the issue text.

Description

diffs enhancement
Prerequisites
Proposal

Proposal
Make @pierre/diffs produce diffs that visually match what VSCode's diff editor shows for the same change.

Two screenshots of the same diff, side by side:

Current @pierre/diffs output:
Image

VSCode's diff editor output:
Image
As you can see, the VSCode one is much cleaner.

How can we get pierre's output to match VSCode's? Is this something the lib could do by default, or is there a configuration / extension point we've missed? Saw #366 in passing ignoreWhitespace: true on parseDiffFromFile helps for whitespace-only changes, but the gap above remains on hunks with mixed changes.

Motivation and context

We're building a PR reviewer on top of @pierre/diffs. Reviewers spend most of their day in VSCode's diff editor, so they notice immediately when a diff in our app reads differently than VSCode for the same files.

Dominant language
TypeScript
Stars
6.2k
Forks
226
Avg merge
1d 13h
Merged PRs (30d)
33

Getting set up

This project ships no dev container, Dockerfile or contributing guide, so setting up is up to you: start from its README, and see our first-contribution guide for the general steps.

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from pierrecomputer/pierre

All issues in pierrecomputer/pierre

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.