Most production projects have a team collaborating on them, so even in a single file there can be multiple contributors. When things go wrong, it’s useful to understand how and why certain changes were made to the code and by whom.
This can be easily done with the powerful git blame command in VS Code. You can use it to identify who authored each line of code in any given file.
In this post, we are going to look into different ways to use the git blame command in VS Code. A lot of commands can be required to check each file. But instead of doing this we can use some of the awesome extensions in VS Code to implement the same processes and get faster results.
Git blaming for broken code can be super frustrating. Diff your environment history to quickly find the change you need with the Kosli CLI
Try for free
What Is Git Blame?
Git blame is a command from the git version control. It lists the author of each line of code in a file. This is the syntax: git blame <file-path/file-name>
In the below example, we are using git blame to find the changes done in a file. Notice that we have to give the complete path and also the filename. Here, the author of each line is mentioned. We can also see that almost all changes were done by a user called ankit, but the change on line 16 was made by user nabendu82.
The above project is a large React.js project with many files. So, it will be very difficult to check the different authors in each file through the command line. In the next section, we are going to look into better ways to do this through VS Code extensions.
As we just saw, it is a lot of work to manually check the author in each file through the command line. Instead, we can use four extensions in VS Code, which will help us find the author of each line of code easily. Now, most extensions in VS Code are free to use like VS Code itself. These extensions are generally small programs that add functionalities in VS Code.
We will look at the below extensions to add git blame to our project:
- Git Blame
- GitLens
- Git History
- Git Graph
Git Blame
We have opened our earlier project in VS Code. You can open any project, but it will be useful if the code has multiple authors. After that, we need to click on the Extension tab in the left strip. Here, search for “blame” in the input box and press Enter.
We will get a lot of extensions, but click on the first one, which is Git Blame by Wade Anderson and has 1.3 million downloads. After that, click on the Install button to install this extension in your VS Code.
Once installed successfully, we will see the Disable and Uninstall buttons.
We don’t need to do any other configurations to use this extension. Now we can open any file and click on any line.
To illustrate what this looks like, we have opened the same Community.js file, which we have checked from the terminal. We clicked on line 11 and in the bottom strip we will see the author of that line. And we will also see at what time the commit was done.
Here we have clicked on another line and found it was done by another author. Next, we will click on the author name in the blue strip at the bottom.
Clicking the name will open a pop-up showing the git commit message. It will also have a View button, so let’s click on it.
This will open the GitHub changes in the browser, with commit details.
GitLens
GitLens is the most popular extension for git blame. In fact, it is the most popular extension in VS Code with 17 million downloads. Again we will search for “git blame” in the Extension tab, and GitLens is the second one. This extension is created by GitKraken, and the full name is “GitLens — Git supercharged.”
This extension provides many ways to see the git blame. It has some basic features for all users and also advanced features for power users.
Basic Features
The basic way to use GitLens is to click on the line of code for which you need to know the author. It will show the author name with commit message and time in light gray text.
When we hover our mouse over the gray text, we will get more information. Notice that the first time we use it, it will also ask us to Connect to GitHub.
After clicking on Connect to GitHub, we will get a pop-up. Click on the Allow button.
Next, GitHub will ask us to give permission in our browser.
Again GitHub will ask for permission to open VS Code. Click on the Allow button.
Once more we have to allow access from VS Code.
Finally, we get access. Now, once we hover over the git blame message, we will get more details of the commit.
Advanced Features
We can click on the git blame message on the bottom blue strip. It will open a pop-up in which we can do a lot of things like opening a commit on git or resetting the commit.
Here we are clicking on the commit message to get more details.
In the sidebar, we will see more details about the commit.
Another advanced feature in GitLens is being able to see the file-wide commits. For this, click on the GitLens icon on the top right. It will open a pop-up where we will click on Toggle File Blame.
Now we will see the file-wide commits by different authors.
Rapidly pinpoint and understand changes and events in your infrastructure and applications
Learn how
Git History
Git History is a simple VS Code extension that allows us to watch different git blames. Again, we have searched for “git blame” in the Extension tab. It is the third extension and has six million downloads. This extension is by Don Jayamanne.
Once the extension is installed successfully, right-click from inside any file. The menu will show two new options to see git changes. Here we are clicking on Git: View File History.
This will open all the commits in the file in a new tab. We can click on any one of them. Here we are clicking on the first commit.
This will show us all the files which were changed in this commit at the bottom part of the page.
Now we have clicked on the other commit and then the Previous button in the only commit.
This will open the changes in a different tab.
We can also see the change in each line by right-clicking and then clicking on Git: View Line History. It will open the line changes in a new tab.
Git Graph
Git Graph is another simple git blame extension which shows all git changes in graphical format. Once again, we have searched for “git blame” in the Extension tab. It is the fourth extension and has three million downloads. This extension is by mhutchie.
Once the extension is installed properly, we will see it in the blue strip. We just need to click on it, and then it will show all our branches with all commit messages. Here we have clicked on the second commit message.
It will show all the files updated by this commit.
Next, we click on the commit with the name of the YouTube link changed. And then on the only changed file, which is a Community.js file.
Now we will see the changes in this file in a split screen.
Conclusion
In this post, we talked about what the git blame command is and the difficulties of using it from the terminal. We have also reviewed four git blame extensions in VS Code that make it easier to review who wrote each line of code.
Out of the four git blame VS Code extensions, GitLens is the clear winner. It has the most features and is also the most popular.
What is the best git extension for VS Code?
GitLens | 5 ⭐ GitLens is the undisputed champion in the area. As a matter of fact, GitLens does not feel like an extension; it almost seems like it's an integral part of the VS Code core. So, one of the first actions to take when installing a fresh VS Code copy is to install GitLens.nullTop Visual Studio Code Git Extensions in 2021towardsdatascience.com › the-git-cli-is-dead-are-you-still-using-git-from-th...null
How to add git extension in VS Code?
Open a GitHub repository in a codespace.
Install the GitHub Codespaces extension in VS Code and sign in with your GitHub account..
Run the Codespaces: Create New Codespace command..
Select the repository and branch you want to open. VS Code opens a new window, which is connected to the codespace..
How do I add a branch in Git VS Code?
Branches and Tags You can create and checkout branches directly within VS Code through the Git: Create Branch and Git: Checkout to commands in the Command Palette (Ctrl+Shift+P). If you run Git: Checkout to, you will see a dropdown list containing all of the branches or tags in the current repository.nullSource Control with Git in Visual Studio Codecode.visualstudio.com › docs › sourcecontrol › overviewnull
How to use Git branches in Visual Studio?
In Visual Studio, you can use the Git Graph pane in the Git Repository window to create branches from previous commits. To do so, right-click the commit you would like to create a new branch from, and then select New Branch. The equivalent command for this action is git branch [] .nullBrowse repos, compare branches & commits - Visual Studio (Windows)learn.microsoft.com › visualstudio › version-control › git-browse-repositorynull