Git experience (2): visual aids

Time:2021-10-24

This article is the second in the GIT series. I want to introduce my experience in using git with visualization tools. There are many kinds of visualization tools. I often use GitHub desktop, and sourcetree will also be introduced in this article.

Command line or visual aids?

The command line is the native use of GIT, so when we learn git, we should understand the way git works through the command line. When using a visualization tool, it is important to know what commands are actually running in the operation done in the tool. Students using sourcetree are advised to pay attention to the option “always display full console output” (in tools – > Options – > General – > repo settings). Turn it on to display the corresponding command every time git operation is executed. When in use, see the following figure:

Git experience (2): visual aids

When you are familiar with git commands, you will naturally understand the shortcomings of the command line. Here are some function points that I think we need to use visual tools to improve the use experience in our work:

  1. Diff comparison of different versions of code
  2. View the commit history
  3. Functional integration with development environment

Next, let’s talk about how I solve the above needs.

Diff comparison

If you use GitHub desktop or sourcetree, you can compare the differences between commit by clicking the mouse. If used in conjunction with the command line, you can usegit diffandgit difftool。 According to git’s description, the latter calls the former internally, so it is usedgit difftoolCan. You can set up a comparison tool you often use as a difftool. Taking vscode as an example, you need to modify the. Gitconfig file (located in Windows system)C:\Users\YourUserName\.gitconfig), add the following:

[diff]
    tool = default-difftool
[difftool "default-difftool"]
    cmd = code --wait --diff $LOCAL $REMOTE

View the commit history

Both GitHub desktop and sourcetree provide intuitive view of submission history. There is nothing to introduce.

Combined with development environment

Usually, IDE provides the function of viewing the status of GIT library files, so that users can easily know which files have changed in their development process. In addition, vscode, which I am familiar with, also has such a function, which provides a good use experience: when the developer places the mouse on a line of code for a period of time, a detailed description of the latest modification of the current line of code will pop up. This allows developers to quickly know the status of code changes when browsing the code. This is achieved through the gitlens plug-in.

Git experience (2): visual aids

Comparison between GitHub desktop and sourcetree

Both tools realize the main functions of the visualization tool (function points 1 and 2 above), but they also have some respective advantages, which are listed below:

  • GitHub desktop can bind GitHub account, which can bring great convenience to GitHub users
  • Sourcetree has more interface operations. Building branches and pulling code can be completed through interface buttons (there are advantages and disadvantages. Beginners should not rely too much on the interface)
  • The graph column on the left of the history interface of sourcetree well reflects the relationship between branches. GitHub desktop does not have this function

This article will be written here first. Thank you for reading! I hope you can share your better experience!

Link to the original text of this article: git experience (2): visual aids