preface

Webstorm integrates a very useful Git management tool, which can greatly improve our work efficiency, this article will share with you a few common operations in the work, welcome you interested developers to read this article.

Git Admin Panel

We open the integration tool via Git in the lower left corner of WebStorm.

The interface after opening is as follows:

  • Local Changes shows the files that you have currently modified but not committed
  • Log: master Branch you are currently in
    • The left pane shows a list of all branches
      • Local Indicates the Local branch list
      • Remote Branch list of the Remote repository
    • The right pane displays the commit record for the currently selected branch
      • Select a commit record, and the files modified by the current commit record are displayed on the far right

If you can’t see Git in the lower left corner, it’s probably because you’re hiding Tool Window Bars. Check it in view-appearance – Tool Window Bars.

If you are not familiar with WebStorm, please go to another of my articles: Using WebStorm properly – Environment Configuration.

Common Operations

Next, let’s share with you some common Git operations in work, how to implement the built-in tools.

Create a branch

The first thing we need to do is to create a Branch to do it. In the built-in Git tool, we simply right-click on the Branch we want to be based on and select New Branch from Selected… Can.

For example, we want to create a new branch based on the master branch

Enter the new branch name in the popup box and click CREATE. As shown in the figure below, we will name the new branch AddMenu

Follow these steps to complete the creation of a new branch.

Note: In the popup, the default is to create and select the branch you are creating. If you want to create the branch, uncheck the Checkout branch.

After creating the car, we may need to Push the branch to the remote repository. We can right-click on the branch and select Push… Can.

Pull the branch

When we want to select a branch of a colleague to help fix a bug, we need to pull the branch to the local. In this built-in Git tool, we just need to find the branch in Remote, right-click and select Checkout.

For example, we want to select the github_page branch:

After selecting, you will see a prompt as shown in the following picture.

Merging branches

When the requirements have been developed and the tests have passed, we need to Merge the branch into Current. In the built-in tool, we simply switch to dev and right-click on the branch to Merge into Current.

If there are conflicting files, you need to resolve the conflicts as follows:

  • Select a conflicting file
    • Serial number 1 indicates the file that uses the current branch (dev)
    • Number 2 marks the file that uses merge branches
    • No. 3 Compares the differences between the two versions to resolve the conflict

If you select the button labeled number 3, you will see something like this:

  • On the left is the code for the dev branch, in the middle is the final result area, and on the right is the code for the merge branch
  • The areas marked by numbers 1, 2, and 3 apply the changes here to the final result area
  • XDiscard the change here

Delete the branch

When a branch is merged into dev, it is no longer needed and needs to be removed.

In WebStorm, we simply find the branch in the list of remote branches, right-click on it and select Delete

Submit code

When we fix a bug or complete the development of a module and need to commit the code locally and push it to the remote repository, we just need to click the Commit icon and push icon in the Toolbar in WebStorm.

As follows:

In the window that pops up, fill in the submission information.

After the submission is completed, click the push button to push the submission to the remote warehouse.

Click push in the popup window.

Note: If you can’t see the Toolbar, you need to open it in the menu bar: view-appearance-Toolbar.

You can also submit/push from the Git submenu of the menu bar, or press the shortcut key Command K/Command Shift K.

Pull the code

When we need to get the latest code modified by colleagues on a branch, we need to carry out the pull operation at this time. We just need to select pull under git submenu of WebStorm menu bar.

Temporary storage and withdrawal

When we are developing requirements on one branch and suddenly an urgent requirement comes along that requires you to change on another branch and your changes are not suitable to commit, we need to temporarily save the current changes.

Just right-click on the project tree and select Git-Stash Changes… Changes can be temporarily saved, as shown in the figure below:

Enter the saving information in the dialog box that is displayed.

After urgent task development, we cut back to the branch, right click on the project root directory and select Git-Unstash Change… Can.

Version back

When we commit the code and the test side detects a lot of problems, we decide that the commit is meaningless and need to undo it.

In the Git panel, select the version of Git you want to roll back, right-click and select Reset Current Branch to Here… Can be

Select the Mixed option in the menu that pops up.

Note: If your commit has been pushed to the remote repository and you want to delete the record from the remote repository, you need to execute git push –force command on the terminal to push back from the local repository.

Force is a dangerous command. If the version you rolled back has code submitted by other colleagues, this command will delete the code submitted by other colleagues.

Merge partial commit records

When we need to merge partial commits from a branch into the dev branch, we need to use the Git cherry pick command.

In WebStorm, we simply switch to Dev, select the branch that needs to be merged, select the record that needs to be merged, and click the cherry icon to complete the merge.

We need to merge the two commits from the AddMenu branch into the Dev branch as shown below:

Finally, we switch to the dev branch and see the two merged commits, as follows:

Write in the last

At this point, the article is shared.

I’m an amazing programmer, a front-end developer.

If you are interested in me, please go to my personal website to learn more.