Improving quality with Git CLI and PhpStorm
Tags: git, phpstorm, codequality, howto
Published: 2021-01-08 17:14:49

---
title: Improving quality with Git CLI and PhpStorm
published: true
description: Improving quality by using Git in a command-line interface and or PhpStorm UI
tags: git, phpstorm, quality, howto
cover_image: https://upload.wikimedia.org/wikipedia/commons/thumb/4/46/Tangle_of_climbers.jpg/800px-Tangle_of_climbers.jpg
---
Bugs are an inevitable part of software and mistakes are an inevitable part of being a human. That can't be denied but should be dealt with. In this post I want to show how I have learned to make lesser mistakes when making code changes and committing them to Git.

## Table of Contents
* [Always check your commit](#always-check-your-commit)
 * [Use the command line](#use-the-command-line)
 * [Or use PhpStorm](#or-use-phpstorm)
* [Use UI tool for merging](#use-ui-tool-for-merging)
* [Don't be over confident](#dont-be-overconfident)

## 🔍 Always check your commit
You have made some changes and you are ready to commit them. But maybe you were distracted by some event during development or you don't feel your best today. Check and double check what you are committing!
### 🔍 Use the command line
`git status` and `git diff --staged` are the best commands for that. 
`git status` shows you what files changes are ready to commit. In the example there are
* two changes staged - ready to commit and 
* two changes not staged:
``` bash
you@computer:path/to/your/project$ git status
On branch master
Your branch is up to date with 'origin/master'.

Changes to be committed:
  (use "git reset HEAD <file>..." to unstage)

        deleted:    assets/js/configurator/MessageFactory.js
        modified:   assets/js/tests/configurator/base_logic.test.js

Changes not staged for commit:
  (use "git add <file>..." to update what will be committed)
  (use "git checkout -- <file>..." to discard changes in working directory)

        modified:   assets/js/tests/configurator/base_logic.test.js

Untracked files:
  (use "git add <file>..." to include in what will be committed)

        assets/js/tests/file_is_added.js
```

☝ Note that *base_logic.test.js* is in both states!

`git diff --staged` shows changes to be committed:
``` bash
you@computer:path/to/your/project$ git diff --staged
diff --git a/assets/js/configurator/MessageFactory.js b/assets/js/configurator/MessageFactory.js
deleted file mode 100644
index e63cfde..0000000
--- a/assets/js/configurator/MessageFactory.js
+++ /dev/null
@@ -1,17 +0,0 @@
-"use strict";
-
-class MessageFactory extends Module {
- truncated for example
-}
-module.exports = MessageFactory;
\ No newline at end of file
diff --git a/assets/js/tests/configurator/base_logic.test.js b/assets/js/tests/configurator/base_logic.test.js
index 940372a..cb9256d 100644
--- a/assets/js/tests/configurator/base_logic.test.js
+++ b/assets/js/tests/configurator/base_logic.test.js
@@ -6,7 +6,7 @@ chai.should();
 chai.use(sinonChai);

 describe('Configurator', function() {
-    describe('Base Logic', function() {
+    describe('Row is changed', function() {
         let MainLoader = require('./main_loader.js');
         let errorMessage = 'Not enough parents or too many child products selected!';
         describe('simple', function() {
```

☝ [Note that there is a easy way to skip some of the changes when staging](https://johnkary.net/blog/git-add-p-the-most-powerful-git-feature-youre-not-using-yet/).

## 🔍 Or use PhpStorm
Sometimes there are too many or complex changes that `git diff` is not enough. Most IDE's have views for helping to understand what you have changed. 
☝ [You should always make commits as small as possible](https://medium.com/better-programming/why-you-should-write-small-git-commits-c9a042737aa6).

To see only added changed files in the project tree, select "Default Changelist" from the project menu:
![Selecting Default Changelist](https://dev-to-uploads.s3.amazonaws.com/i/uiywvafl74palc859tol.jpg)
After selecting "Default Changelist", IDE displays a list of changed and added files, staged for commit:
![Default Changelist view](https://dev-to-uploads.s3.amazonaws.com/i/p63opt4crznle2pujrkz.jpg)
☝ PhpStorm shows here only changed and new files that are added to git for committing (staged) and not deleted files.

For seeing all files (changed, added, deleted), use Version Control Window:
![Opening Version Control Window](https://dev-to-uploads.s3.amazonaws.com/i/eoo25qb1d27f7xsmvpml.jpg)
![Version Control Window](https://dev-to-uploads.s3.amazonaws.com/i/8h23liwkk35oexgmqwd6.jpg)
Right click on a file to see more actions including "Show Diff".

In opened file window, IDE shows you changes made to file:
* line added on row 2 ,
* line removed between 4-5, 
* and changed on row 9.
![IDE file changes](https://dev-to-uploads.s3.amazonaws.com/i/jzt9nx5qyy8pxm9l49n9.png)
When hovering the mouse on a change hinting mark (green rectangle, red triangle, blue rectangle), IDE shows the previous version.

☝ Be aware that IDE does not differ changes that are and are not staged for commit!

You can jump to the next change in a longer file using the keyboard:
![IDE jump to next change](https://dev-to-uploads.s3.amazonaws.com/i/rdmrxu8pgtkhdvd5mce0.png)

You can also compare the full file with "Compare with Same Repository Version" action:
![Compare with Same Repository Version](https://dev-to-uploads.s3.amazonaws.com/i/hulrn1alz7grmv202r72.png)

## ⚡ Use UI tool for merging
Sometimes merge conflicts happen, either when you are squash merging to master, rebasing master to your feature branch or popping changes from stash:
``` bash
you@computer:path/to/your/project$ git merge --squash origin/KEY-123
Auto-merging templates/configurator/product_configurator.twig
Auto-merging public/build/configurator.product_configurator.js
CONFLICT (content): Merge conflict in public/build/configurator.product_configurator.js
Auto-merging assets/js/tests/configurator/main_loader.js
Auto-merging assets/js/configurator/Data.js
CONFLICT (content): Merge conflict in assets/js/configurator/Data.js
Squash commit -- not updating HEAD
Automatic merge failed; fix conflicts and then commit the result.
```

If you are not familiarized yourself with vimdiff, then your tool for solving merge conflicts should be IDE.
Use the resolve conflicts action and continue from there and don't be afraid - remember you can always start over if something goes wrong - that's the beauty of Git.
![Opening Resolve Conflicts](https://dev-to-uploads.s3.amazonaws.com/i/0qpvu7bwmfsh4nsa7sc5.png)
☝ When there is a possibility that `stash pop` produces merge conflicts, use `stash apply` instead!
☝ Resolve Conflicts action is only available if any merge conflicts are waiting to be resolved.

## 💣 Don't be overconfident
During the time between starting and finishing this article I did not bother to check the diff from `git --squash merge` from really small change and the result after commit and push build error occurred:
![Don't be overconfident](https://dev-to-uploads.s3.amazonaws.com/i/gjpchu0rdhw6kgro3kcu.jpg)

## Postscript
When you have come so far, you will reach even further. Keep going!