Utilia

Code vergelijken (diff)

Vergelijk twee versies van code naast elkaar of inline, met syntaxiskleuring, regelnummers, witruimte-opties en een unified diff om te kopiëren of downloaden.

Zo vergelijk je twee stukken code

  1. Plak de oude versie in Originele code en de nieuwe versie in Gewijzigde code.
  2. Kies de Taal, of laat Automatisch herkennen staan: de tool raadt de taal aan de hand van de code en toont de herkende taal naast de statistieken.
  3. Kies een Weergave: Naast elkaar of Inline (unified).
  4. Zet de opties die je nodig hebt: Witruimte en inspringing negeren, Hoofdletters negeren, Gewijzigde woorden markeren en Alleen wijzigingen tonen (3 regels context).
  5. Klik op Vergelijken. Na de eerste vergelijking volgt het resultaat je aanpassingen terwijl je typt.
  6. Klik op Kopiëren als unified diff of .diff downloaden om de wijziging als patch te hergebruiken.

Kanten omwisselen verwisselt de twee versies, zodat toevoegingen verwijderingen worden en andersom.

De diff lezen

Verwijderde regels zijn rood gekleurd en horen bij het origineel; toegevoegde regels zijn groen gekleurd en horen bij de nieuwe versie. Elke regel behoudt het regelnummer uit zijn eigen bestand, zodat je er in je editor meteen naartoe kunt springen.

  • Naast elkaar zet de twee bestanden in twee genummerde kolommen. Een gewijzigde regel staat naast zijn nieuwe versie. Met Gewijzigde woorden markeren worden de woorden die binnen die regel zijn veranderd gemarkeerd; zonder die optie houden beide regels hun volledige syntaxiskleuren.
  • Inline (unified) toont één kolom, zoals bij een code review: voor elk gewijzigd blok komen eerst de verwijderde regels (−) en dan de toegevoegde regels (+), met zowel het oude als het nieuwe regelnummer.
  • Alleen wijzigingen tonen (3 regels context) vouwt lange ongewijzigde stukken samen tot een markering “⋯ N ongewijzigde regels”, waardoor grote bestanden veel makkelijker te beoordelen zijn.

De statistiekregel telt de toegevoegde, verwijderde en ongewijzigde regels.

Syntaxiskleuring

De kleuring gebeurt in je browser met highlight.js. Alleen de grammatica van de gekozen taal wordt geladen, bij de eerste vergelijking, zodat de pagina licht blijft. Ondersteunde talen zijn onder meer JavaScript, TypeScript, Python, Java, C#, C / C++, Go, Rust, PHP, Ruby, CSS, HTML / XML, JSON, YAML, SQL, Bash / Shell en Markdown. Automatische herkenning gebruikt eenvoudige aanwijzingen (sleutelwoorden, haakjes, JSON-parsing); raadt hij verkeerd, kies dan zelf de taal of kies Platte tekst.

Witruimte, inspringing en regeleinden

Witruimte en inspringing negeren vergelijkt regels nadat ze zijn bijgesneden en reeksen spaties en tabs zijn samengevoegd. Een bestand dat van 2 naar 4 spaties of van tabs naar spaties is omgezet, toont dan geen verschil. Windows-regeleinden (CRLF) en Unix-regeleinden (LF) worden vóór het vergelijken gelijkgetrokken, dus een bestand waarvan alleen de regeleinden zijn veranderd, wordt als identiek gemeld. Let op: witruimte kan ertoe doen in Python, YAML en Makefiles. Zet de optie uit als inspringing betekenis heeft.

Het unified-diffformaat

De geëxporteerde patch gebruikt het standaard unified-formaat dat git apply, patch en code-reviewtools lezen: een kop met de twee bestandsnamen, daarna hunks die beginnen met @@ -a,b +c,d @@ en drie regels context rond elke wijziging. De bestanden heten original en changed, met een extensie die bij de taal past.

Veelgestelde vragen

Wordt mijn code naar een server geüpload?

Nee. Zowel de vergelijking als de kleuring draait lokaal in je browser; de code verlaat je apparaat nooit.

Wat is het verschil met de gewone tekstvergelijker?

Deze tool gebruikt dezelfde regel-voor-regel-vergelijking, maar voegt syntaxiskleuring, een unified-weergave, het samenvouwen van context en een op code gerichte omgang met witruimte toe.

Waarom worden twee regels als gewijzigd getoond terwijl ze er hetzelfde uitzien?

Ze verschillen waarschijnlijk in onzichtbare tekens: spaties aan het eind, tabs in plaats van spaties, of een harde spatie. Vink Witruimte en inspringing negeren aan om dat te controleren.

Kan ik de gedownloade patch met Git toepassen?

Ja. Sla hem op en voer patch original.js < changes.diff uit, of pas de bestandsnamen in de kop aan en gebruik git apply.

Hoe groot mogen de fragmenten zijn?

Enkele duizenden regels worden snel vergeleken. Zijn twee heel grote bestanden volledig verschillend, dan stopt de tool na een paar seconden en vraagt hij je om kleinere delen te vergelijken.