-
Notifications
You must be signed in to change notification settings - Fork 4.8k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Intro to git #5677
Merged
Merged
Intro to git #5677
Changes from all commits
Commits
Show all changes
12 commits
Select commit
Hold shift + click to select a range
b936b72
First toc
digitarald 7e88d33
Merge branch 'main' into digitarald/git-intro
digitarald cde349a
Merge branch 'main' into digitarald/git-intro
digitarald 59b1bb7
Draft
digitarald 1e6d8f9
First round of edits
digitarald fc0afe7
Merge branch 'main' into digitarald/git-intro
digitarald 29cff8c
First round of images
digitarald 9904073
Last images
digitarald 6d6c9b0
Merge branch 'main' into digitarald/git-intro
digitarald 2d25bdc
Adding git bash
digitarald dab0fb1
Compressing images
digitarald c0cc11d
re-export from figma, 1x resolution
digitarald File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,121 @@ | ||
--- | ||
Order: 2 | ||
Area: sourcecontrol | ||
TOCTitle: Intro to Git | ||
PageTitle: Intro to Git | ||
DateApproved: 2/21/2023 | ||
MetaDescription: Get started with Git and take control of your code! Our beginner's guide covers everything you need to know, from setting up a repository to committing changes and collaborating with others. Learn Git today and streamline your development workflow. | ||
--- | ||
# Intro to Git in Visual Studio Code | ||
|
||
Want to easily manage your code and collaborate with others? Git and GitHub are the tools you need! And with VS Code, you can set up and use them in a snap. Even if you're a beginner, VS Code's user-friendly interface will guide you through common Git actions like pushing and pulling code, creating and merging branches, and committing code changes. And if you're a pro, you'll love the ability to perform Git actions directly within the editor, saving you time and effort compared to using the Terminal. Plus, the seamless workflow between VS Code and Git means you can stay in your editor and get more done. | ||
|
||
## Setup Git in VS Code | ||
|
||
To use Git and GitHub in VS Code, first make sure you [have Git installed on your computer](https://git-scm.com/downloads). If Git is missing the *Source Control* tab will show instructions on how to install it. Make sure to restart VS Code afterwards. | ||
|
||
Optionally you can sign into VS Code with your GitHub account in the **Accounts** menu to enables additional features like settings sync, but also cloning and publishing repositories from GitHub. | ||
|
||
## Open a Git repository | ||
|
||
VS Code provides several ways to get started in a Git repository, from local to remote cloud-powered environments like GitHub Codespaces. | ||
|
||
### Clone a repository locally | ||
|
||
![Screenshot of the Clone Repository quick prompt, searching fot repositories with the name vscode](images/intro/github-clone.png) | ||
|
||
To clone a repository from GitHub, execute the **Git: Clone** command or select the **Clone Repository** button in the **Source Control** view. If you clone from GitHub, VS Code will prompt you to authenticate with GitHub. This will allow you to search all available repositories and clone private repositories. For other Git providers enter the repository URL and select **Clone** and pick a folder. VS Code will open it once the repository has been cloned. | ||
|
||
### Initialize a repository in a local folder | ||
|
||
To initialize a new local repository, pick an existing or new folder on your computer and open it in VS Code. In the **Source Control** tab, select the **Initialize Repository** button. This will create a new Git repository in the current folder, allowing you to start tracking code changes. | ||
|
||
#### Publish local repository to GitHub | ||
|
||
Once you have a local Git repository set up, you can publish it to GitHub. This will create a new repository on your GitHub account, and push your local code to the remote repository. It is great for backing up your code, collaborating with others, and automating your workflow with GitHub Actions. | ||
|
||
![Source Control view for a workspace without git will offer to Initialize a Git repo or Publish to GitHub](images/intro/scm-init-publish.png) | ||
|
||
Use the **Publish to GitHub** command button in the **Source Control** tab. You can then choose a name and description for the repository, and whether to make it public or private. Once the repository has been created, VS Code will push your local code to the remote repository. Your code is now backed up on GitHub, and you can start collaborating with others with commits and pull requests. | ||
|
||
### Open a GitHub repository in a Codespace | ||
|
||
GitHubCodespaces let you open a GitHub repository in a full configured cloud-based development environment, allowing you to develop in a browser without having to install any software on your local computer. They include free usage for individuals which makes it easy to getting started in open source. | ||
|
||
Install the [GitHub Codespaces](https://marketplace.visualstudio.com/items?itemName=GitHub.codespaces) extension into VS Code and sign in with GitHub. Run the **Codespaces: Create New Codespace** command and pick the repository and branch you want to open. The Codespace will open in a new window. | ||
|
||
![Creating a Codespace from a repo within desktop VS Code](images/intro/codespace-create.png) | ||
|
||
Alternatively, you can also start from a template from the [GitHub's Codespaces site](https://github.com/codespaces/templates). If you already have a Codespace open in your browser, you can open it in your Desktop VS Code by running the **Codespaces: Open in VS Code Desktop** command. Learn more about Codespaces to forwarding ports. | ||
|
||
### Open a GitHub Repository remotely | ||
|
||
VS Code remote repositories allows you to browse and edit a GitHub repository without cloning it to your local computer. This is useful for quickly making changes to a remote repository without having to clone the entire codebase to your local machine. | ||
|
||
First install the the [GitHub Repositories](https://marketplace.visualstudio.com/items?itemName=GitHub.remotehub) extension. Run the command **Remote Repositories: Open Remote Repository...** or use the **Open Remote Repository** button the Explorer view. Search and select the GitHub repository that you want to open. | ||
|
||
![Remote Repositories opening a remote GitHub repo, pull request or Azure repo](images/intro/remote-repo.png) | ||
|
||
> **Tip:** If you need to execute code or run terminal commands, you can seamlessly switch from a remote repository to a Codespace with the command **Continue Working on**. | ||
|
||
## Staging and committing code changes | ||
|
||
Once you have a Git repository set up, you can start tracking code changes by staging and committing your newly created and edited code. | ||
|
||
![Source Control view with one file staged and other changes, a diff showing in the editor that highlights the changes](images/intro/scm-staging.png) | ||
|
||
> **Tip:** Commit early and often. This will make it easier to revert to previous versions of your code if needed. | ||
|
||
To stage a file, select the **+** (plus) icon next to the file in the **Source Control** tab. This will add the file to the **Staged Changes** section, indicating that it will be included in the next commit. Staged changes can also be discarded by selecting the **−** (minus) icon next to the file. | ||
|
||
To commit your staged changes, type a commit message and select the **Commit** button. This will save your changes to the local Git repository, allowing you to revert to previous versions of your code if needed. All local file changes and commits can be navigated in the **Timeline** section. | ||
|
||
![Timeline view with one item selected and its change being shown in the editor](images/intro/timeline.png) | ||
|
||
## Pushing and pulling remote changes | ||
|
||
Once you have made commits to your local Git repository, you can push them to the remote repository. The **Sync** button will indicate how many commits are going to be pushed and pulled. selecting **Sync** button will download (pull) any new remote commits and upload (push) new local commits to the remote repository. | ||
|
||
![Sync button with one change to push](images/intro/sync.png) | ||
|
||
> **Tip:** Make sure to enable **Git: Autofetch** to always get an up-to-date remote commit indicators. | ||
|
||
Push and pull can also be performed individually by using their respective commands. | ||
|
||
## Using branches | ||
|
||
In Git, [branches](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/about-branches) allow you to work on multiple versions of your codebase simultaneously. This is useful for experimenting with new features or making large code changes without affecting the main codebase. | ||
|
||
![Branch indicator in the status bar](images/intro/branch-indicator.png) | ||
|
||
The branch dropdown in the status bar shows the current branch and lets you switch to new and existing branches. To create a new branch, select the branch indicator and choose to create it from the current branch or another local one. Type a name for the new branch, and confirm. This will create a new branch and switch you to it, allowing you to make changes to your code without affecting the main branch. | ||
|
||
> **Tip:** If you use the GitHub Pull Request extension you can create a branch directly from an issue, which get you started coding in a new new local branch and automatically prefill the pull request for you. | ||
|
||
To push the branch to the remote repository, select **Publish** in the **Source Control** tab. This will create a new branch on the remote repository, allowing you to collaborate with others on the branch. | ||
|
||
### Creating and reviewing GitHub Pull Requests | ||
|
||
In Git and GitHub, [Pull Requests (PRs)](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/about-pull-requests) are a way for collaborators to review and merge code changes from separate branches into the main branch. This allows teams to review and approve code changes before they are incorporated into the main codebase, ensuring that only high-quality code is merged. | ||
|
||
To use Pull Requests in VS Code, you will need to install the [GitHub Pull Request & Issues](https://marketplace.visualstudio.com/items?itemName=GitHub.vscode-pull-request-github) extension. This extension adds PR and issue tracking functionality to VS Code, allowing you to create, review, and merge PRs from within the editor. | ||
|
||
To create a PR, make sure you are on a separate branch from the main branch, and push your code changes to the remote repository. In the **Source Control** tab, select the **Create Pull Request** button. This will open the PR creation form, where you can enter a title and description for the PR, and choose which branch to merge the changes into. select **Create** to create the PR. | ||
|
||
To review a PR, select the **Review Pull Request** button in the **Source Control** tab, and select the PR you want to review. This will open the PR in a new editor window, where you can review the code changes and leave comments. Once you are satisfied with the code changes, you can select the **Merge** button to merge the PR into the main branch. | ||
|
||
Learn more about Pull Requests in the [VS Code's GitHub documentation](https://code.visualstudio.com/docs/sourcecontrol/github). | ||
|
||
## Using Git in the built-in terminal | ||
|
||
As Git state is kept in the local repository you can easily switch between VS Code's UI, the [built-in terminal](/docs/editor/integrated-terminal), or external tools like [GitHub Desktop](https://desktop.github.com/). Related, you can also set up [VS Code as your default Git editor](/docs/sourcecontrol/overview#_vs-code-as-git-editor), allowing you to use VS Code to edit commit messages and other Git-related files. | ||
|
||
### Git Bash on Windows | ||
|
||
Git Bash is a popular shell environment for Windows that provides a Unix-like command-line interface for working with Git and other command-line tools. Visual Studio Code's integrated terminal supports Git Bash as a shell, allowing you to seamlessly integrate Git Bash into your development workflow. Installing Git on your Windows machine will also install Git Bash if it wasn't deselected during the installation steps. | ||
|
||
![Selecting Git Bash as shell in Visual Studio Code's built-in terminal](images/intro/git-bash.png) | ||
|
||
Start by opening **View** > **Terminal** (`kb(workbench.action.terminal.toggleTerminal)`). Click on the dropdown arrow next to the `+` icon in the terminal panel to pick a new shell to open. If Git Bash is installed, it will be shown in the list. You can toggle between different terminals and shells in the Terminal sidebar. With Git Bash configured in Visual Studio Code, you can now use all of your favorite Git commands directly from the terminal in your code editor. | ||
|
||
If you want to set Git Bash as your default shell, open the Terminal dropdown (next to the `+` icon) and select **Select Default Shell**. This will open a list of available shells, including Git Bash. Selecting Git Bash will set it as your default shell, and all future terminals will be opened with Git Bash. More advanced tips can be found in the [terminal documentation](/docs/editor/integrated-terminal). |
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Is there text missing on the paragraph's last sentence? Was this to be a link to the Codespaces documentation?
Something like "You can learn more in the Codespaces documentation, including features like {blah} and forwarding ports."