Improving quality with Git CLI and PhpStorm

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
  • Use the command line
  • Or use PhpStorm
• Use UI tool for merging
• Don't be over confident

🔍 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:

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:

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.

🔍 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.

To see only added changed files in the project tree, select "Default Changelist" from the project menu:

After selecting "Default Changelist", IDE displays a list of changed and added files, staged for commit:

☝ 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:


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. 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:

You can also compare the full file with "Compare with Same Repository Version" action:

⚡ 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:

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.

☝ 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:

Postscript

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