Introduction
Sublime Text is one of those modern text editors that has enough potential to keep you wondering, while at the same time maintaining superior levels of simplicity in the overall user interface. After all, it’s the best part of the Sublime Text that has won a large number of dedicated users. If we were to talk about modern text editors like VS Code and Atom, Sublime Text is visibly unbeaten in terms of anything ‘speed’. If auto-completion is your thing (which most probably is), Sublime Text does it well enough to not let you worry about considering something else.
In today’s adventure quest, we’re about to visit the deep lands of Text Diffing, with our weapon being the Sublime Text Code Editor.
What is Incremental Diff in Sublime Text?
According to Sublime Text’s Official Documentation, Incremental Diff is the ability of the editor to track changes in the file that’s currently being worked on, and be able to show you quick insight of the diff without the need of saving the file. Each time a modification takes place, the diff is calculated right away, right from the comfort of your editor without having to use any version control systems (such as git) either.
In the following sections, we’ll discuss the different ways you can observe and perform actions on the diff in Sublime Text.
Comparing current changes from the last save state
Observing Diff Markers
The most visibly appealing thing about Sublime Text’s diffing is the Diff Marker. It gives you quick insight on the changes you’ve made to a file that was previously saved, or had existed. Take a look at the image below:
The three markers (coloured red, green and yellow) tell you the type of modification that has been performed on the file. Let’s get into some more detail about each of the 3 markers:
The Green Bar┃
The green bars (or markers) are responsible for showing you that a new line has been added to the current file, as compared to the last save state. Don’t think newlines to be new texts – that is, if you simply press Enter a couple of times without inserting any text on them, the lines will be marked with those green bars nevertheless.
The Yellow Bar┃
The yellow lines you see depict that a line has been modified. That is, some text on the yellow marked lines previously had a different set of characters on it (I’m being way too specific I guess, but anyways). Once you make any changes to any line that are not new to the current buffer, they’ll be marked yellow.
But remember not to confuse a previous save state to the current buffer being edited. If you’ve just created a new line, saved the file (but didn’t exit the editor) and tried making changes, it’ll still be showing green markers on them.
The Red Pointer ►
The red pointer (or marker) is placed in-between two lines instead of one. This is to depict that the line just before the pointer has been removed, entirely. As simple as that.
Navigating through modifications of the diff
We now know what each of the markers means, but what if we wanted to navigate between these markers? Keyboard shortcuts rule the field once again:
- Ctrl + . → Go to next marker
- Ctrl + , → Go to previous marker
Viewing inline diff in the editor
If you want to examine the exact change in text that has been made to a given line (or even a group of lines), you can do so with the help of inline diff in Sublime Text. If you want to see the exact change on a single line, simply place your cursor on that line and right click to bring up the context menu, and select “Show Diff Hunk” from there:
If everything goes fine and you’ve done this on a line that has actually been modified, you should see a new portion below the line with information about the previous state of the line as well as it’s current one:
As simple as that! If you want to show the changes in multiple lines instead of just one, simply drag and select all those lines and right click to open the context menu, followed by pressing the SHow Diff Hunk option once again.
Remember that it’ll not just preview and fade away, but instead will stay there as is unless you hide it. You could actually show the diff hunk of lines in different parts of the file together if you wish to. If you want to hide any visible diff hunk, right click and select “Hide Diff Hunk” from the context menu.
Reverting modifications from the diff
At any point or so, you might wish to go back to a previous state of a given line, without knowing the last situation of the line or the change being too long. There are two different ways of achieving that. The simplest of them being the Ctrl + K followed by Ctrl + Z in order (one after the other) in Windows and Linux, or ⌘+K, ⌘+Z in MacOS.
The other option is to right click on a given line (or a selection of multiple lines), and selecting “Revert Diff Hunk” from the context menu. It’s more convenient in case you’re trying to revert a line on which you’re already viewing a diff hunk.
Comparing two files in Sublime Text
The last (but not the least) thing I’d like to cover in this article is comparing the contents of two separate files in Sublime Text. On paper, it’s quite simple as long as you don’t forget the procedure. First, you need to open up the folder where the two files are located (yes, both of the files should be under the same folder). Do this by clicking on File in the Menu Bar, and then click Open. Afterwards, select the folder and click Open once again from the File viewer.
Now, from the FOLDER sidebar, select one of the two files you want to diff. Hold Ctrl (or ⌘) on your keyboard and click on the second file, and then right click on it. From the context menu, select “Diff Files…”
A new tab should be opened showing all the differences between the two files by now.
