|
|
|
|
@ -17,33 +17,33 @@ Visual Studio Code has integrated source control management (SCM) and includes [
|
|
|
|
|
|
|
|
|
|
## SCM Providers
|
|
|
|
|
|
|
|
|
|
VS Code has support for handling multiple Source Control providers simultaneously. For example, you can open multiple Git repositories alongside your Azure DevOps Server local workspace and seamlessly work across your projects. The **SOURCE CONTROL PROVIDERS** list of the **Source Control** view (`kb(workbench.view.scm)`) shows the detected providers and repositories and you can scope the display of your changes by selecting a specific provider.
|
|
|
|
|
VS Code has support for handling multiple Source Control providers simultaneously. For example, you can open multiple Git repositories alongside your Azure DevOps Server local workspace and seamlessly work across your projects. To turn on the **Source Control Providers** view, select the overflow menu in the **Source Control** view (`kb(workbench.view.scm)`), hover over **Views**, and make sure that **Source Control Repositories** is marked with a check. The **Source Control Providers** view shows the detected providers and repositories, and you can scope the display of your changes by selecting a specific provider.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
### SCM Provider extensions
|
|
|
|
|
|
|
|
|
|
If you would like to install an additional SCM provider, you can search on the **scm providers** extension category in the Extensions view (`kb(workbench.view.extensions)`). Start typing '@ca' and you will see suggestions for extension categories like debuggers and linters. Select `@category:"scm providers"` to see available SCM providers.
|
|
|
|
|
If you would like to install another SCM provider, you can search on the **scm providers** extension category in the **Extensions** view (`kb(workbench.view.extensions)`). Start typing '@ca' and you will see suggestions for extension categories like debuggers and linters. Select `@category:"scm providers"` to see available SCM providers.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
## Git support
|
|
|
|
|
|
|
|
|
|
VS Code ships with a Git source control manager (SCM) extension. Most of the source control UI and work flows are common across other SCM extensions, so reading about the Git support will help you understand how to use another provider.
|
|
|
|
|
VS Code ships with a Git source control manager (SCM) extension. Most of the source control UI and work flows are common across other SCM extensions, so reading about the general Git support in VS Code will help you understand how to use another provider.
|
|
|
|
|
|
|
|
|
|
>**Note:** If you are new to Git, the [git-scm](https://git-scm.com/documentation) website is a good place to start with a popular online [book](https://git-scm.com/book), Getting Started [videos](https://git-scm.com/video/what-is-git) and [cheat sheets](https://github.github.com/training-kit/downloads/github-git-cheat-sheet.pdf). The VS Code documentation assumes you are already familiar with Git.
|
|
|
|
|
>**Note:** If you are new to Git, the [git-scm](https://git-scm.com/documentation) website is a good place to start, with a popular online [book](https://git-scm.com/book), Getting Started [videos](https://git-scm.com/video/what-is-git) and [cheat sheets](https://github.github.com/training-kit/downloads/github-git-cheat-sheet.pdf). The VS Code documentation assumes you are already familiar with Git.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
>**Note:** VS Code will leverage your machine's Git installation, so you need to [install Git](https://git-scm.com/download) first before you get these features. Make sure you install at least version `2.0.0`.
|
|
|
|
|
|
|
|
|
|
>**👉** When you commit, be aware that if your username and/or email is not set in your Git configuration, Git will fall back to using information from your local machine. You can find the details in [Git commit information](https://git-scm.com/docs/git-commit#_commit_information).
|
|
|
|
|
|
|
|
|
|
The Source Control icon on the left will always indicate an **overview of how many changes** you currently have in your repository. Clicking it will show you the details of your current repository changes: **CHANGES**, **STAGED CHANGES** and **MERGE CHANGES**.
|
|
|
|
|
The Source Control icon in the Activity Bar on the left will always indicate an **overview of how many changes** you currently have in your repository. Selecting the icon will show you the details of your current repository changes: **CHANGES**, **STAGED CHANGES** and **MERGE CHANGES**.
|
|
|
|
|
|
|
|
|
|
Clicking each item will show you in detail **the textual changes within each file**. Note that for unstaged changes, the editor on the right still lets you edit the file: feel free to use it!
|
|
|
|
|
|
|
|
|
|
You can also find indicators of the **status of your repository** in the bottom left corner of VS Code: the **current branch**, **dirty indicators**, and the number of **incoming and outgoing commits** of the current branch. You can **checkout** any branch in your repository by clicking that status indicator and selecting the Git reference from the list.
|
|
|
|
|
You can also find indicators of the **status of your repository** in the bottom-left corner of VS Code: the **current branch**, **dirty indicators**, and the number of **incoming and outgoing commits** of the current branch. You can **checkout** any branch in your repository by clicking that status indicator and selecting the Git reference from the list.
|
|
|
|
|
|
|
|
|
|
> **Tip:** You can open VS Code in a sub-directory of a Git repository. VS Code's Git services will still work as usual, showing all changes within the repository, but file changes outside of the scoped directory are shaded with a tool tip indicating they are located outside the current workspace.
|
|
|
|
|
|
|
|
|
|
@ -51,21 +51,27 @@ You can also find indicators of the **status of your repository** in the bottom
|
|
|
|
|
|
|
|
|
|
**Staging** (git add) and **unstaging** (git reset) can be done via contextual actions in the files or by drag-and-drop.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
You can type a commit message above the changes and press `kbstyle(Ctrl+Enter)` (macOS: `kbstyle(⌘+Enter)`) to commit them. If there are any staged changes, only those will be committed, otherwise all changes will be committed.
|
|
|
|
|
You can type a commit message above the changes and press `kbstyle(Ctrl+Enter)` (macOS: `kbstyle(⌘+Enter)`) to commit them. If there are any staged changes, only changes will be committed. Otherwise, you'll get a prompt asking you to select what changes you'd like to commit and get the option to change your commit settings.
|
|
|
|
|
|
|
|
|
|
We've found this to be a great workflow. For example, in the earlier screenshot, only the staged changes to `gulpfile.js` will be included in the commit. A consecutive commit action could commit later changes to `gulpfile.js`, the deletion of `yarn.lock`, and changes to `tests.js` in a separate commit.
|
|
|
|
|
|
|
|
|
|
More specific **Commit** actions can be found in the **More Actions** `...` menu on the top of the Git view.
|
|
|
|
|
More specific **Commit** actions can be found in the **Views and More Actions** `...` menu on the top of the Source Control view.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
> **Tip:** If you commit your change to the wrong branch, undo your commit using the **Git: Undo Last Commit** command in the **Command Palette** (`kb(workbench.action.showCommands)`).
|
|
|
|
|
|
|
|
|
|
## Cloning a repository
|
|
|
|
|
|
|
|
|
|
You can clone a Git repository with the **Git: Clone** command in the **Command Palette** (`kb(workbench.action.showCommands)`). You will be asked for the URL of the remote repository (for example on [GitHub](https://github.com/)) and the parent directory under which to put the local repository.
|
|
|
|
|
If you haven't opened a folder yet, the Source Control view will give you the options to **Open Folder** from your local machine or **Clone Repository**.
|
|
|
|
|
|
|
|
|
|
For a GitHub repository, you would find the URL from the GitHub **Clone or download** dialog.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
If you select **Clone Repository**, you will be asked for the URL of the remote repository (for example on [GitHub](https://github.com/)) and the parent directory under which to put the local repository.
|
|
|
|
|
|
|
|
|
|
For a GitHub repository, you would find the URL from the GitHub **Code** dialog.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
@ -73,19 +79,21 @@ You would then paste that URL into the **Git: Clone** prompt.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
You'll also see the option to **Clone from GitHub**. Once you authenticate with your GitHub account in VS Code, you'll be able to search through repositories by name, and select any repo to clone it. You can also start the flow to clone a Git repository with the **Git: Clone** command in the **Command Palette** (`kb(workbench.action.showCommands)`). To see a step-by-step walkthrough, check out our [Clone repos from VS Code](https://www.youtube.com/watch?v=bz1KauFlbQI) video.
|
|
|
|
|
|
|
|
|
|
## Branches and Tags
|
|
|
|
|
|
|
|
|
|
You can create and checkout branches directly within VS code through the **Git: Create Branch** and **Git: Checkout to** commands in the **Command Palette** (`kb(workbench.action.showCommands)`).
|
|
|
|
|
|
|
|
|
|
If you run **Git: Checkout to**, you will see a drop-down list containing all of the branches or tags in the current repository.
|
|
|
|
|
If you run **Git: Checkout to**, you will see a drop-down list containing all of the branches or tags in the current repository. It will also give you the option to create a new branch if you decide that's a better option, or checkout a branch in detached mode.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
The **Git: Create Branch** command lets you quickly create a new branch. Just provide the name of your new branch and VS Code will create the branch and switch to it.
|
|
|
|
|
The **Git: Create Branch** command lets you quickly create a new branch. Just provide the name of your new branch and VS Code will create the branch and switch to it. If you choose to **Create new branch from...**, you'll get an extra prompt that allows you to specify which commit the new branch should be pointing to.
|
|
|
|
|
|
|
|
|
|
## Remotes
|
|
|
|
|
|
|
|
|
|
Given that your repository is connected to some remote and that your checked out branch has an [upstream link](https://git-scm.com/book/ch3-5.html) to a branch in that remote, VS Code offers you useful actions to **push**, **pull**, and **sync** that branch (the latter will run a **pull** command followed by a **push** command). You can find these actions in the **More Actions** `...` menu.
|
|
|
|
|
Given that your repository is connected to some remote and that your checked out branch has an [upstream link](https://git-scm.com/book/ch3-5.html) to a branch in that remote, VS Code offers you useful actions to **push**, **pull**, and **sync** that branch (the latter will run a **pull** command followed by a **push** command). You can find these actions in the **Views and More Actions** `...` menu, along with the option to **add or remove a remote**.
|
|
|
|
|
|
|
|
|
|
VS Code is able to periodically fetch changes from your remotes. This enables VS Code to show how many changes your local repository is ahead or behind the remote. Starting with VS Code 1.19, this feature is disabled by default and you can use the `git.autofetch` [setting](/docs/getstarted/settings.md) to enable it.
|
|
|
|
|
|
|
|
|
|
@ -133,6 +141,20 @@ There is a review pane in the Diff editor that presents changes in a unified pat
|
|
|
|
|
|
|
|
|
|
**Note:** This experience is especially helpful for screen reader users.
|
|
|
|
|
|
|
|
|
|
## Timeline view
|
|
|
|
|
|
|
|
|
|
The Timeline view, accessible at the bottom of the File Explorer by default, is a unified view for visualizing time-series events (for example, Git commits) for a file.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
VS Code's built-in Git support provides the Git commit history of the specified file. Selecting a commit will open a diff view of the changes introduced by that commit. When you right-click on a commit, you'll get options to **Copy Commit ID** and **Copy Commit Message**.
|
|
|
|
|
|
|
|
|
|
Visual Studio Code supports more Git history workflows through [extensions](/docs/editor/extension-gallery.md) available on the VS Code Marketplace.
|
|
|
|
|
|
|
|
|
|
<div class="marketplace-extensions-scm-history-curated"></div>
|
|
|
|
|
|
|
|
|
|
> **Tip:** Click on an extension tile to read the description and reviews in the Marketplace.
|
|
|
|
|
|
|
|
|
|
## Git output window
|
|
|
|
|
|
|
|
|
|
You can always peek under the hood to see the Git commands we are using. This is helpful if something strange is happening or if you are just curious. :)
|
|
|
|
|
@ -141,11 +163,11 @@ To open the Git output window, run **View** > **Output** and select **Git** from
|
|
|
|
|
|
|
|
|
|
## Initialize a repository
|
|
|
|
|
|
|
|
|
|
If your workspace isn't under Git source control, you can easily create a Git repository with the **Initialize Repository** command. When VS Code doesn't detect an existing Git repository, you will see a **No source control providers registered** message in the Source Control view and the **Initialize Repository** command will be available on the title bar. You can also run the **Git: Initialize Repository** command from the **Command Palette** (`kb(workbench.action.showCommands)`).
|
|
|
|
|
If your workspace is on your local machine, you can enable Git source control by creating a Git repository with the **Initialize Repository** command. When VS Code doesn't detect an existing Git repository, the Source Control view will give you the options to **Initialize Repository** or **Publish to GitHub**.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Running **Initialize Repository** will create the necessary Git repository metadata files and show your workspace files as untracked changes ready to be staged.
|
|
|
|
|
You can also run the **Git: Initialize Repository** and **Publish to GitHub** commands from the **Command Palette** (`kb(workbench.action.showCommands)`). Running **Initialize Repository** will create the necessary Git repository metadata files and show your workspace files as untracked changes ready to be staged. **Publish to GitHub** will directly publish your workspace folder to a GitHub repository, allowing you to choose between a private and public repositories. Check out our [publishing repos](https://www.youtube.com/watch?v=3BBvBwDW4CY) video for more information about publishing to GitHub.
|
|
|
|
|
|
|
|
|
|
## VS Code as Git editor
|
|
|
|
|
|
|
|
|
|
@ -173,7 +195,7 @@ Add the following to your Git configurations to use VS Code as the diff tool:
|
|
|
|
|
cmd = code --wait --diff $LOCAL $REMOTE
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
This leverages the `--diff` option you can pass to VS Code to compare 2 files side by side.
|
|
|
|
|
This leverages the `--diff` option you can pass to VS Code to compare two files side by side.
|
|
|
|
|
|
|
|
|
|
To summarize, here are some examples of where you can use VS Code as the editor:
|
|
|
|
|
|
|
|
|
|
@ -184,11 +206,7 @@ To summarize, here are some examples of where you can use VS Code as the editor:
|
|
|
|
|
|
|
|
|
|
## Working with pull requests
|
|
|
|
|
|
|
|
|
|
Visual Studio Code also supports pull request workflows through [extensions](/docs/editor/extension-gallery.md) available on the VS Code Marketplace. Pull request extensions let you review, comment, and verify source code contributions directly within VS Code.
|
|
|
|
|
|
|
|
|
|
<div class="marketplace-extensions-scm-pull-request"></div>
|
|
|
|
|
|
|
|
|
|
> **Tip:** Click on an extension tile to read the description and reviews in the Marketplace.
|
|
|
|
|
Visual Studio Code also supports pull request workflows through the [GitHub Pull Requests and Issues extension](https://marketplace.visualstudio.com/items?itemName=GitHub.vscode-pull-request-github) available on the VS Code Marketplace. Pull request extensions let you review, comment, and verify source code contributions directly within VS Code.
|
|
|
|
|
|
|
|
|
|
## Next steps
|
|
|
|
|
|
|
|
|
|
@ -220,7 +238,7 @@ This usually means there is no credential management configured in Git and you'r
|
|
|
|
|
|
|
|
|
|
You can always set up a [credential helper](https://help.github.com/articles/caching-your-github-password-in-git/) in order to pull and push from a remote server without having VS Code prompt for your credentials each time.
|
|
|
|
|
|
|
|
|
|
### How can I sign in to Git with my Azure DevOps organization which requires multi-factor authentication?
|
|
|
|
|
### How can I sign in to Git with my Azure DevOps organization that requires multi-factor authentication?
|
|
|
|
|
|
|
|
|
|
There are now [Git credential helpers](https://devblogs.microsoft.com/devops/git-credential-manager-for-mac-and-linux) that assist with multi-factor authentication. You can download these from [Git Credential Manager for Mac and Linux](https://github.com/microsoft/Git-Credential-Manager-for-Mac-and-Linux) and [Git Credential Manager for Windows](https://github.com/microsoft/Git-Credential-Manager-for-Windows).
|
|
|
|
|
|
|
|
|
|
|
Greg Van Liew
GitHub
