* First toc
* Draft
* First round of edits
* First round of images
* Last images
* Adding git bash
* Compressing images
* re-export from figma, 1x resolution
This commit is contained in:
Harald Kirschner2023-02-21 19:23:12 -08:00коммит произвёлGitHub
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
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.
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.
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.
> **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.
> **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.
## 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.
> **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.
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.
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).
Harald Kirschner
GitHub
