The foreword 0.

Familiar with Git common commands, the following uses Visual Studio Code as the editor, Gitee as the remote repository to introduce related use.

Git is all about controlling multiple versions of code and better teamwork.

Reading && More References:

  1. Git official tutorial: git-scm.com/book/zh/v2

  2. How to use in the Visual Studio Code Git:code.visualstudio.com/Docs/editor…

  3. How to use in WebStorm Git:www.jetbrains.com/help/idea/u…

1. Code clone (to local repository)git clone <git address>

Copy the repository address (gitee.com/hp-chenpc/f…) Go to the folder where you have your local repository and right click Git Bash Here.

Go to the Bash terminal interface and run the following command to clone the online code to the local repository:

git clone https://gitee.com/hp-chenpc/frontend_practice.git
Copy the code

Note: If cloning is not possible, be sure to set up the configuration before using Git for the first time. See:

  • Git-scm.com/book/zh/v2/…
  • Git-scm.com/book/zh/v2/…

2. View existing branchesgit branch

Drag the source folder into VS Code and open terminal (Ctrl + ~) to see that the local repository is in the Master branch by default:

You can also run the git branch command to view the local branch. Currently, only the master branch exists.

The color tells us that we’re in the master branch.

git branch
Copy the code

3. Create a branchgit branch <branch name>

In general, you should never change code directly on the Master in normal development. Instead, you need to create branches locally for specific tasks. For example, if I were to add a Vue scaffold initialization project, the name of the new branch could be in the form task type – Task content – Task executor: update-init_project-CPC.

Note: A new branch needs to be created based on an existing branch. You can either build a house with a foundation or create a new object instance in JavaScript with a constructor. Yes, it needs a foundation.

Initialize the new branch of the project to be temporarily created based on the master branch by typing the following command:

git branch update-init_project-cpc
Copy the code

Later, with the Git branch command, you can see that this branch does exist in the local code repository.

4. Switch branchesgit checkout <branch name>

Although we created a new local branch, the current branch is not this one.

To switch branches, run the following command:

git checkout update-init_project-cpc
Copy the code

Using the git branch command, you can see that the branch has been successfully switched.

Git checkout -b

git checkout -b update-init_project-cpc
This is equivalent to the following two commands:
# git branch update-init_project-cpc
# git checkout update-init_project-cpc
Copy the code

5. View the status reportgit status

When the files on the branch are changed (here I initialized the Vue scaffolding, details are omitted). Vs Code’s built-in Git feature monitors these file changes.

Enter the following command to view the status report:

git status
Copy the code

Note:

  • Before committing your code, you need to store staged changes into a location — a staging area.
  • Significance of temporary storage areaWell, it tracks the change.
    • When you submit code, files in the staging area (i.e. files that are tracked) will be submitted;
    • Files that are not in the staging area (which must have changed) are not tracked and therefore not submitted.
    • So, when you merge the current branch code with the upstream branch and find that the upstream branch code is missing some functionality, you need to think about whether there are files that have not been committed to the staging area.

6. Track new files (put in temporary storage)git add <file name>

Typically, a large feature point will be broken down into smaller feature points. After each small feature point is developed, the code will be committed once. Before committing, the changed files need to be added to the staging area and then committed.

git add .
Copy the code

After git add, I just put a dot to indicate that all the changed files in the current folder (both untracked and tracked) will be added. Add all to the staging area.

Check git status again.All changed files have been placed in the staging area.

Note: If YOU want to specify a file, for example, I just want to add the readme.md file to the staging area, then type the following command:

git add README.md
Copy the code

7. Submit the update recordgit commit -m 'some commit logs'

Update the local repository by committing all files in the staging area to ensure that the code pushed from the local repository to the remote repository is up to date.

git commit -m 'init project'
Copy the code

Each commit generates an ID value for the commit record, which is meaningful and can be looked up if you are interested.

8. Push branch (to remote repository)git push origin <branch name> / git push

Now you can push this batch of code to the remote repository.

git push origin update-init_project-cpc
Copy the code

Git push: Git push: git push

The reason is that the update-init_project-cpc branch is not in the remote repository, so the push command needs to be written out completely.

Later, when the remote repository also has this branch, you can directly git push.

9. Pull branch (remote warehouse)git pull

Now that we’ve cloned code, created branches, switched branches, tracked files (staging), committed updates, and pushed branches, we’re 60% done, leaving 40% to update the remote repository’s master branch.

There are four steps:

First, switch from update-init_project-CPC branch to master branch (note that both are local repositories).

git checkout master
Copy the code

Second, the master branch pulls from the remote repository to ensure that the state of the local master branch is consistent with that of the master file in the remote repository.

git pull
Copy the code

Note: This may seem like an extra step, but in real development, the master branch of the remote repository may not be the same as the one we started with, so this step is necessary!

10. Merge branchesgit merge <branch name>

Third, merge the code on update-init_project-CPC into the master branch.

Note that at this point we are in the master branch, branch name will be written to whoever we want to merge, update-init_project-cpc.

git merge update-init_project-cpc
Copy the code

11. Check the unsaved git diff changes

In normal cases, the merger can be normal.

But there is an error indicating that a file (.gitignore) has not been committed.

The reason is that VS Code found some better changes to the.gitignore file on the Master branch, so I followed its advice and made the changes, but did not commit them at this time.

Remember? Git status can be used to check the status of files in your local repository:

git status
Copy the code

If the git status command output is too brief for you and you want to know exactly what you’ve changed, you can use git diff. — git-scm.com/book/zh/v2/…

git diff
Copy the code

git diffCommand to see the details of the file modification, not just the file name.

Next, the file is traced, put into staging, and committed for update.

git add .gitignore && git commit -m 'update .gitignore'
Copy the code

Note: The above commands are written in conjunction, and can also be written separately as follows:

git add .gitignore
git commit -m 'update .gitignore'
# add ();
# git add .gitignore && git commit -m 'update .gitignore'
Copy the code

Of course, it also needs to be pushed to the remote repository.

git push
Copy the code

Finally, re-merge the code.

git merge update-init_project-cpc
Copy the code

Mistake again! There is a conflict in the.gitignore file.

Resolve branch conflicts

As shown in the figure above, in VS Code, if a branch conflict occurs, the contents of the current branch (master branch at this point) in green and the contents of the foreign branch (update-init_project-CPC branch at this point) in blue represent the contents of the conflicting file.

Depending on the situation, select the content of the foreign branch here and click the second option above the green range: Accept Incoming Change.

In this way, branch conflicts are resolved.

Note: In practice, conflicts may be much more complex than this. If necessary, please confirm the merge result with your team members to avoid mistakes in merging and resulting in code loss.

Next, re-add the file to the staging area, commit, and push.

git add .gitignore && git commit -m 'fix conflicts in .gitignore && git push'
Copy the code

It seems that push succeeded, but did not succeed.

Because I put the && git push command in the string of the commit record, it should have said:

git add .gitignore && git commit -m 'fix conflicts in .gitignore' && git push
Copy the code

Now that the record has been submitted, what do I do?

You can modify the submission information.

13. View branch commit historygit log

Before correcting the commit information, we need to take a look at the commit history to verify that the last commit information was incorrectly written.

So how do you view your commit history?

git log
Copy the code

We can see that the commit message for the most recent commit record was mistakenly written: fix Conflicts in.gitignore && git push.

14. Git commit — amend

Sometimes we submit only to find that several files have not been added or the submission information has been incorrectly written. At this point, you can run the commit command with the –amend option to recommit. — git-scm.com/book/zh/v2/…

git commit --amend
Copy the code

After entering, the following screen appears, the first line of which is the submission information:

At this point,Press I to enter insert mode:

Move the cursor and modify the submission information in the first line:

When finished, pressEscExit insert mode, and the word “insert” at the bottom disappears.

At this point, type the Linux command — directly:wqTo save the edit and exit. If the following information is displayed, the modification is successful:

Then use it againgit logView the commit history.No problem.

Finally, it’s time for the final chapter — push the merged master branch to the remote repository (Git push), and check the file status again using Git status: the branch from the local repository has been updated to the remote repository, and nothing has actually been committed. The contents of the local and remote repositories are the same.

This completes the task of initializing the Vue scaffolding (related branch: update-init_project-CPC).

15. Summary

If you read and work at the same time, I believe you should acquire the following skills:

  1. Clone a remote repository locally
  2. Create a new branch locally
  3. Switch (check out) branches
  4. Trace the files and put them in the staging area
  5. Submit the updates
  6. Push the branch

In addition, it also includes branch merging, resolution of branch conflicts, modification of submission information and so on.

Is it over? Not yet… to be continued…

Above, thank you for reading.