A thorough understanding of VS Code+Git operation (related configuration and use of git in vs code)

content

1. Build a GIt environment (Windows)

2. GIt related operations in VS Code

(1) Local class operations

1. Prepare the project file and initialize the repository

2. Add files to the staging area

3. Submit the staging area file to the git repository

4. Modify the submitted file

5. View/New/Switch Branch

6. Merge branches

7. Temporarily save the current branch state

8. View what changes have been made to the current file

(2) Remote operation

1. Create a new GIt repository

2. Clone the project (git clone)

3. Push the project (git push)


(The operations in this article are all performed on Gitee, and the operation methods of Gitee and Github are basically the same.)

1. Build a GIt environment (Windows)

1. Download and install Git first, then register the Git username and email address. This step has been described in previous articles and will not be repeated here;

This article takes you proficient in Git (Git installation and use, Git commands, project push and clone ) There are also projects uploaded to the cloud and cloned locally. https://blog.csdn.net/weixin_53072519/article/details/122824860 2. Generate SSH public key and key;

        Right-click to open Git Bash Here;

Use the command ls .ssh to check whether there are public keys and private keys in our directory (the ones below are not);

Create public and private keys, use the command  ssh-keygen -t rsa -C "mailbox" ; 

At this point, the public key and private key have been generated, pay attention to the prompt path;

3. Add the public key to GitHub/Gitee;

        copy the public key;

Go to Gitee --> "Settings" --> "SSH Public Key", add a new public key;

After the addition is successful, it is as follows;

4. Test the SSH connection;

        Use the command ssh -T [email protected] to test, the word hi... appears, that is, the connection is successful;

        When using GIthub, use the command  ssh -T [email protected] ;

2. GIt related operations in VS Code

(Here I will use an empty folder git as the project file for related demonstration operations .)


(1) Local class operations


1. Prepare the project file and initialize the repository

        Create a new project folder git as a project; enter Git Bash Here on the desktop, enter the command code git and use vs code to open our project folder;

Go to Source Control and click Initialize the repository. This step also completes the initialization of the git warehouse. At this time, you can see that the folder has a .git folder ( hidden by default, you need to set the display hidden files to see );

Then create a new file demo.html in the project file git;

At this point, we can see that the newly created file is green, and there is a U word behind it; U means Untracked  , which means that this file is currently only in our local area and has not been tracked by git.

2.  Add files to the staging area

        Enter the source code management, click after the file you want to operate , you can add the file to the temporary storage area, which is equivalent to executing the command git add;

At this time, the file name is still green, but the U after it becomes A, which means that the file is already in the temporary storage area.

3. Submit the staging area file to the git repository

        Submit the files in the staging area to git, enter the source code management, enter relevant remarks in the message box, and then click to make a submission, or use the Ctrl+Enter shortcut to submit directly;

At this time, the color of the file becomes normal, and there is no letter prompt, indicating that the file has been submitted to git.

        Submission can also be done using the fast submission method. The so-called fast submission is to submit the new file or the modified file directly without saving it to the staging area first. The operation of adding to the staging area is omitted;

As follows, if we submit the modified file without saving it to the staging area, vs code will give a warning, then we select "always" to automatically omit the addition to the staging area in future operations operate.

4. Modify the submitted file

        After the content of the submitted file is modified, the file name will be prompted as follows;

At this time, the file name turns yellow, and there is a prompt letter M; M means  modify , that is, it has been modified.

If you want to undo the changes, enter the source code management and click Discard the changes;

5. View/New/Switch Branch

        Click on the status bar at the bottom of vs code to display the branches in the project, where master means the current branch is master; as shown in the figure below, there is only one master branch in the project;

Click to create a branch ;

At this point, there are two branches in the project;

To switch branches, you only need to click the corresponding branch name;

6. Merge branches

        We first modify the content of the file in the newly created xiaoma branch and submit it;

Then switch to the master branch, at this time the master branch has no modified content;

Next, to merge, first click to open the command panel;

Search for git merge in the command panel, find the merge branch operation, and click Merge Branch;

At this time, the master branch has xiaoma related operations;

7. Temporarily save the current branch state

        When we write the code in the middle of the work process and have not completed the development of a certain module, and then have to leave the current branch and switch to another branch, we need to temporarily save the state of the current branch (storage, hiding ), equivalent to the git command git stash;

After making certain changes in the current branch, click More and find Storage --> Storage;

8. View what changes have been made to the current file

        When we are modifying the contents of the files that have been submitted to git, vs code will even prompt us what operations we have done, which is equivalent to the git command git diff, as follows:

Blue means that the code here has been modified or deleted.
Green means that the code here is new

(2) Remote operation


1. Create a new GIt repository

        Remote operations need to be combined with Gitee, so we first create a new warehouse in gitee, enter the gitee homepage and click + New warehouse;

The created repository is as follows, we already have an SSH address;

2. Clone the project (git clone)

        First copy the SSH link obtained from the new repository, open the command panel in vs code, enter git clone to find the clone option;

After clicking, paste our SSH address and press Enter. At this time, vs code will prompt us to select an address to store the cloned project, and then start cloning, as follows;

After the clone is successful, you can open the project locally.

3. Push the project (git push)

        Let's create some random files in the project we just cloned and commit them;

Enter the source code management , click to find push to push;

After the push is successful as follows, we can see our submission records in Gitee;


Webstorm + git detailed operation tutorial:

Pony takes you to know the front-end development artifact WebStorm (WebStorm and Git related configuration and use ) https://blog.csdn.net/weixin_53072519/article/details/122044299 Git detailed operation tutorial:

This article takes you proficient in Git (Git installation and use, Git commands, project push and clone ) There are also projects uploaded to the cloud and cloned locally. https://blog.csdn.net/weixin_53072519/article/details/122824860

Guess you like

Origin blog.csdn.net/weixin_53072519/article/details/123914289