Bitbucket With Visual Studio For Mac

Connect Sourcetree using your normal visual studio login and the password you just created; As stated above, you can get the clone URL from VS Online: Code; Explorer; Click your repo; Click the clone button the right hand side of the screen; Copy the url to clone. Visual Studio Code has become one of the most popular editors out there for Web Development. It has gained such popularity thanks to its.

Visual Studio Code is a new, lightweight, cross-platform and open source code editor that you can download for free at http://visualstudio.com.

In the second of this short series of articles, published in association with Microsoft, Tech Evangelist Sergii Baidachnyi, will dive into the editor's Git-related features. (In case you missed it, check out the first article: Visual Studio Code: The top five features.)

Sergii uses a Mac for this demo but VS Code works on Windows and Linux computers as well.

Working with local Git repository

Assuming that you have no trouble installing Git on your local workstation, once you’ve done so you can start working with it directly from Visual Studio Code.

First, you need to initialize a local repository for your current project and add your files there. It’s easy to do this by clicking Initialize Git repositoryin Git view.

This button will start the init command for Git and will add all of the files automatically. Now you’re ready to work with Git locally.

Working with files locally gives you access to all the standard commands. By clicking any file and activating the context menu you can put the file on Stage:

And using the menu at the top of the Git view you can commit changes or get access to Git output:

Finally, clicking the branch name in the status bar will open the Git Tool’s command line.

Using the command line, you can execute commands such as git checkout and git branch.

Both commands have only one parameter: the name of a branch. Git checkout allows you to checkout files to a new or existing branch and git branch allows you to switch VS Code to a new or existing branch.

Using Git view you can see which files have changed. After clicking on them you can review the current and previous versions of the file. VS Code highlights all of the changes as seen in this example:

Visual Studio Team Service as a provider

Git is just a platform and it requires a provider. If you are not going to set up your own infrastructure, you can use GitHub or Visual Studio Team Service as a provider. Let’s go with Visual Studio Team Service.

Visual Studio Team Service allows up to five developers per account for free, and lets you create any number of projects. It also gives you access to additional features like sprint planning tools, task and Kanban boards, a virtual team room, and more.

And, of course, Visual Studio Team Service supports Git. This means that Visual Studio Code and Visual Studio Team Service can be used together. Activate your free Visual Studio Team Service account at http://visualstudio.com.

Once you get access to Visual Studio Team Service, you can create a project. In this case, a 'project' means everything that is related to the lifecycle of the application: a repository, team room, and so on. Note that Visual Studio Team Service supports two types of version control systems, including Git.

In this case, select Git:

After the project is created you need to do one more thing inside Visual Studio Team Service – open your profile and use the Security tab to apply alternate authentication credentials. By default, Visual Studio Team Service uses a Live ID for authentication, but Git tools don’t support Live ID.

One more step on the server side is getting a URL that you will use as a remote repository in Git. When you navigate to the project and open the CODE tab, you will see the URL – copy it for the next step.

That’s it for the server side; now it’s time to configure your Mac. First you need to provide Git with your username, which you defined in Visual Studio Online as an alternate credential: :
git config --global user.name sbaidachni@gmail.com

You can create your alternate credentials in a terminal window within Visual Studio Code. It’s better to do it in a terminal window within VS Code because it will open with the context of your workspace. Make sure that you have associated Git with the current workspace prior to executing the next command. Finally, you need to add the reference to the remote repository:
git remote add origin
https://canadaapps.visualstudio.com/DefaultCollection/_git/ObjectiveCProj</h

And push existing local files to the remote repository:
git push -u origin –all

That’s it. Reopen Visual Studio Code, and you should see that most of the menu items in the Git tab are now enabled:

You can start coding and commit all changes to Visual Studio Team Service.

GitHub as a provider

If you don’t already have a GitHub account, you can create one at github.com. Once you have a GitHub account, you can create a new repository or use an existing one. In the screenshot below you can see how to create a new repository with the New Repository button on the main page.

Once your repository is created, copy the link for cloning (see below) which will be used to initialize your Git system:

The next step is to open a terminal window in order to setup GitHub as a remote repository. To open a terminal window, I often use the VS Code context menu by selecting any file in the Explore sidebar. If you don’t have any files in the Explore side bar, don’t worry, you still can open a terminal window in VS Code directly.

To do so, you need to activate the Command Palette using the View menu item or ⇧⌘P hot key combination. Using the Command Palette, you can call a terminal window in the context of the folder:

In this case, the terminal window doesn’t have the context of a working folder. So, you’ll need to navigate it manually. Using a terminal window, you can associate git with a user name that will be shown in commits history:

git config --global user.name sbaidachni

And clone the GitHub repository to the local folder using the link which we copied earlier:
git clone https://github.com/sbaidachni/testVSCode.git

If the operation is successful, you should see something like this:

That’s it – now you can use Visual Studio Code to open the cloned folder. VS Code will read all of the information about the repository automatically. You can now start coding.

Git and deployment

Finally, let’s discuss how to use the Git and Visual Studio Code integration features to implement deployment tasks to the cloud. Visual Studio Code doesn’t have any direct integration with Microsoft Azure (Microsoft’s cloud) yet, you can still deploy your project to the cloud with minimal effort.

To start working with Azure, you’ll need an Azure account. You can sign up for a trial account at http://azure.microsoft.com or use other options such as BizSpark, DreamSpark and MSDN subscriptions. Once you have an account, access the management portal at https://portal.azure.com.

To start experimenting with Azure, create a project that contains a single html file. Later on you can create node.js or ASP.NET project – the process will be the same.

Before starting to work with the Azure portal, you need to open a Git view and initialize a local git repository. Now, open the management portal using https://portal.azure.com/ and create a new Web Application:

With the Web App template, you can easily create hosting storage for your site and deploy almost anything to it, including PHP, Node.js, ASP.NET and other Web applications.

Once the empty web site is deployed, open the Settings and start configuring the deployment:

As you’ll see, Microsoft Azure supports several different sources. You can get your source code from OneDrive, Dropbox, and local Git repositories, GitHub and Visual Studio Online. As Visual Studio Code currently only supports the last three options, you can select any of the options in the menu.

For our purposes, select Local Git Repositories. You’ll see that Azure will add a Git clone URL to the configuration of the site.

Note that you need to setup FTP deployment credentials to start working with Git. You can visit Settings and provide credentials using Deployment credentials tab.

When the credentials are ready, you can continue with Git setup on your local machine. You need to copy the Git clone url from the Azure portal and open a terminal window in context of the working folder.

Because we have already initialized a local Git repository, we can associate it with our remote repository and push the initial commit by calling the following commands:

git remote add azure <url> git push –u azure master

If everything is OK, you can find your deployment on the Continuous Deployment tab:

And you can use the site URL to open the web site:

Right after the initial commit, you can close the Terminal window and continue to work with VS Code and perform all Git activities there. That’s all for this article; check back next week for the next technical article in this Visual Studio Code series!. ®

Sponsored: M3 - The ML, AL and Analytics Conference from The Register

Visual Studio Code has integrated source control and includes Git support in-the-box. Many other source control providers are available through extensions on the VS Code Marketplace.

Tip: Click on an extension tile to read the description and reviews in the Marketplace.

SCM Providers

VS Code has support for handling multiple Source Control providers simultaneously. For example, you can open multiple Git repositories alongside your TFS local workspace and seamlessly work across your projects. The SOURCE CONTROL PROVIDERS list of the Source Control view (⌃⇧G (Windows, Linux Ctrl+Shift+G)) 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 (⇧⌘X (Windows, Linux Ctrl+Shift+X)). 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.

Note: If you are new to Git, the git-scm website is a good place to start with a popular online book, Getting Started videos and cheat sheets. 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 first before you get these features. Make sure you install at least version 2.0.0.

Tip: VS Code will work with any Git repository. If you don't already have a private hosted Git provider, Azure DevOps Services is a great free option. You can sign up at Get started with Azure DevOps.

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.

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.

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.

Commit

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 Ctrl+Enter (macOS: ⌘+Enter) to commit them. If there are any staged changes, only those will be committed, otherwise all changes will be committed.

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.

Cloning a repository

You can clone a Git repository with the Git: Clone command in the Command Palette (⇧⌘P (Windows, Linux Ctrl+Shift+P)). You will be asked for the URL of the remote repository (for example on GitHub) and the parent directory under which to put the local repository.

For a GitHub repository, you would find the URL from the GitHub Clone or download dialog.

You would then paste that URL into the Git: Clone prompt.

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 (⇧⌘P (Windows, Linux Ctrl+Shift+P)).

If you run Git: Checkout to, you will see a drop-down list containing all of the branches or tags in the current repository.

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.

Remotes

Given that your repository is connected to some remote and that your checked out branch has an upstream link 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.

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.autofetchsetting to enable it.

Tip: You should set up a credential helper to avoid getting asked for credentials every time VS Code talks to your Git remotes. Hog bay notebook 3.5 164 for mac. If you don't do this, you may want to consider disabling automatic fetching via the git.autofetchsetting to reduce the number of prompts you get.

Git Status Bar actions

There is a Synchronize Changes action in the Status Bar, next to the branch indicator, when the current checked out branch has an upstream branch configured. Synchronize Changes will pull remote changes down to your local repository and then push local commits to the upstream branch.

If there is no upstream branch configured and the Git repository has remotes set up, the Publish action is enabled. This will let you publish the current branch to a remote.

Gutter indicators

If you open a folder that is a Git repository and begin making changes, VS Code will add useful annotations to the gutter and to the overview ruler.

• A red triangle indicates where lines have been deleted
• A green bar indicates new added lines
• A blue bar indicates modified lines

Merge conflicts

Merge conflicts are recognized by VS Code. Differences are highlighted and there are inline actions to accept either one or both changes. Once the conflicts are resolved, stage the conflicting file so you can commit those changes.

Viewing diffs

Our Git tooling supports viewing of diffs within VS Code.

Tip: You can diff any two files by first right clicking on a file in the Explorer or OPEN EDITORS list and selecting Select for Compare and then right-click on the second file to compare with and select Compare with 'file_name_you_chose'. Alternatively from the keyboard hit ⇧⌘P (Windows, Linux Ctrl+Shift+P) and select File: Compare Active File With and you will be presented with a list of recent files.

Diff editor review pane

There is a review pane in the Diff editor which presents changes in a unified patch format. You can navigate between changes with Go to Next Difference (F7) and Go to Previous Difference (⇧F7 (Windows, Linux Shift+F7)). Lines can be navigated with arrow keys and pressing Enter will jump back in the Diff editor and the selected line.

Note: This experience is especially helpful for screen reader users.

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. :)

To open the Git output window, run View > Output and select Git from the drop-down list.

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 (⇧⌘P (Windows, Linux Ctrl+Shift+P)).

Running Initialize Repository will create the necessary Git repository metadata files and show your workspace files as untracked changes ready to be staged.

VS Code as Git editor

When you launch VS Code from the command line, you can pass the --wait argument to make the launch command wait until you have closed the new VS Code instance. This can be useful when you configure VS Code as your Git external editor so Git will wait until you close the launched VS Code instance.

Here are the steps to do so:

1. Make sure you can run code --help from the command line and you get help.
   • if you do not see help, please follow these steps:
     • macOS: Select Shell Command: Install 'Code' command in path from the Command Palette.
     • Windows: Make sure you selected Add to PATH during the installation.
     • Linux: Make sure you installed Code via our new .deb or .rpm packages.
2. From the command line, run git config --global core.editor 'code --wait'

Now you can run git config --global -e and use VS Code as editor for configuring Git.

VS Code as Git diff tool

Add the following to your Git configurations to use VS Code as the diff tool:

This leverages the --diff option you can pass to VS Code to compare 2 files side by side.

To summarize, here are some examples of where you can use VS Code as the editor:

• git rebase HEAD~3 -i do interactive rebase using VS Code
• git commit use VS Code for the commit message
• git add -p followed by e for interactive add
• git difftool <commit>^ <commit> use VS Code as the diff editor for changes

Working with pull requests

Visual Studio Code also supports pull request workflows through extensions available on the VS Code Marketplace. Pull request extensions let you review, comment, and verify source code contributions directly within VS Code.

Tip: Click on an extension tile to read the description and reviews in the Marketplace.

Next steps

• Intro Video - Git Version Control - An introductory video providing an overview of VS Code Git support.
• Basic Editing - Learn about the powerful VS Code editor.
• Code Navigation - Move quickly through your source code.
• Debugging - This is where VS Code really shines
• Tasks - Running tasks with Gulp, Grunt and Jake. Showing Errors and Warnings
• Source Control API - If you want to integrate another Source Control provider into VS Code, see our Source Control API.

Common questions

I initialized my repo but the actions in the .. menu are all grayed out

To push, pull, and sync you need to have a Git origin set up. You can get the required URL from the repository host. Once you have that URL, you need to add it to the Git settings by running a couple of command-line actions. For example:

My team is using Team Foundation Version Control (TFVC) instead of Git. What should I do?

Use the Azure Repos extension and this will light up TFVC support.

Why do the Pull, Push and Sync actions never finish?

This usually means there is no credential management configured in Git and you're not getting credential prompts for some reason.

You can always set up a credential helper 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?

There are now Git credential helpers that assist with multi-factor authentication. You can download these from Git Credential Manager for Mac and Linux and Git Credential Manager for Windows.

I have GitHub Desktop installed on my computer but VS Code ignores it

VS Code only supports the official Git distribution for its Git integration.

I keep getting Git authentication dialogs whenever VS Code is running

VS Code automatically fetches changes from the server in order to present you with a summary of incoming changes. The Git authentication dialog is independent from VS Code itself and is a part of your current Git credential helper.

One way to avoid these prompts is to set up a credential helper which remembers your credentials.

Another option is to disable the auto fetch feature by changing the following setting: 'git.autofetch': false.

Can I use SSH Git authentication with VS Code?

Yes, though VS Code works most easily with SSH keys without a passphrase. If you have an SSH key with a passphrase, you'll need to launch VS Code from a Git Bash prompt to inherit its SSH environment.