Visual Studio For Mac Git Setup

Visual Studio for Mac continues to follow the Microsoft Modern Lifecycle Policy, and Visual Studio 2017 for Mac version 7.8 will be superseded by Visual Studio 2019 for Mac version 8.0 once released. For instructions on updating, see Updating Visual Studio for Mac.

titledescriptionauthorms.authorms.datems.assetid
Using Git and Subversion in Visual Studio for Mac.
jomatthi
E992FA1D-B2AD-4A28-ADC6-47E4FC471060

Git is a distributed version control system that allows teams to work on the same documents simultaneously. This means there is a single server that contains all the files, but whenever a repository is checked out from this central source, the entire repository is cloned locally to your machine.

There are many remote hosts that allow you to work with Git for version control, however the most common host is GitHub. The following example uses a GitHub host, but you can use any Git host for version control in Visual Studio for Mac.

If you wish to use GitHub, make sure that you have an account created and configured before following the steps in this article.

Creating a remote repo on GitHub

The following example uses a GitHub host, but you can use any Git host for version control in Visual Studio for Mac.

To set up a Git repository, execute the following steps:

  1. Create a new Git repo at github.com:

  2. Set Repo Name, description, and privacy. Do not initialize Repo. Set .gitignore and license to None:

  3. The next page gives you an option to display and copy either the HTTPS or SSH address to the repo you have created:

    You'll need the HTTPS address to point Visual Studio for Mac to this repo.

Publishing an existing project

If you have an existing project that is not already in version control, use the following steps to set it up in Git:

  1. Select the Solution name from the Solution Pad in Visual Studio for Mac.

  2. In the Menu bar, select Version Control > Publish in Version Control to display the Select Repository dialog:

    If this menu item appears greyed out in the menu, make sure you have selected the Solution name.

  3. Choose the Registered Repositories tab and press the Add button:

  4. Enter the name of the repository as you would like it to display locally, and paste in the URL from step #3. Your Repository Configuration dialog should look similar to the following. Press OK:

    It is also possible to use SSH to connect to Git.

  5. To attempt to publish the app to Git, select the repository, and ensure that both Module Name and Message text fields are completed:

  6. Click Okay, and then Publish from the alert dialog.

  7. In the Git Credentials window, enter your GitHub username and password.

[!NOTE]If your account has two-factor authentication (2FA) enabled, you will need to create an Access Token, which is used in place of a password. If you have not created an access token, follow the steps in the Git Access Token documentation.

  1. Enter the username and Personal Access Token, and press Okay:

  2. After a few seconds, the Solution should be published with its initial commit. Confirm it has been published by browsing the Version Control menu item, which should now be populated with many options:

  3. Once you start to make additional changes, select Push Changes to push the changes to the remote repository. This will allow all appropriate users to view it on github.com:

Publishing a new project

The new project dialog can be used to create a new project with a local git repository. To enable it, select the Use git for version control checkbox, as illustrated in the following screenshot. This will initialize your repo and add an optional .gitignore file:

Follow the steps below to push your new local repository to a new GitHub repository:

[!NOTE]If you have not already created a GitHub repository, refer to the Creating a remote repo on GitHub section.

  1. Create your first commit by going to Version Control > Review Solution and Commit in the Menu Bar.

  2. In the Status tab, choose Commit in the top left.

  3. Write a commit message, for example 'First Commit', then click on Commit:

  4. Next, in the Menu Bar go to Version Control > Manage Branches and Remotes.

  5. Go to the Remote Sources tab, then click Add.

  6. In the Remote Source window, add the details of your previously created GitHub repository and click OK:

  7. Close the Git Repository Configuration window, then in the Menu Bar go to Version Control > Push Changes.

  8. In the Push to Repository window click on the Push Changes button:

  9. When prompted, enter your GitHub username and password.

[!NOTE]If your account has two-factor authentication (2FA) enabled, you will need to create an Access Token, which is used in place of a password. If you have not created an access token, follow the steps in the Git Access Token documentation.

Visual Studio for Mac will now push the changes to your remote GitHub repository:

Check out an existing repository

It's likely that you'll have to work with a GitHub repo that exists only on the remote, not on your local machine. Visual Studio for Mac allows you to check this repo out quickly. Follow the steps below to clone it to your machine:

  1. In the Menu bar, select Version Control > Checkout:

  2. This displays the Connect to Repository tab:

  3. On the GitHub page of the remote repository, press the Clone or Download button and copy the URL provided:

  4. Replace all the text in the URL entry field in the Connect to Repository tab. This will populate most other fields in this tab for you, as illustrated in the image in step #2.

  5. Enter the directory that you want to clone the repo into and press Checkout.

[!NOTE]You may experience issues if the repo is over 4 GB in size.

Troubleshooting

If you have issues with initializing your project with an empty remote repository, you can try the following steps:

  1. Go to your solution folder.
  2. Press Command + Shift + . to show the hidden files and folders.
  3. If there's a .git folder, delete it.
  4. If there's a gitignore file, delete it.
  5. Press Command + Shift + . to hide the files and folders.
  6. Open your solution in VS for Mac.
  7. On the solution Pad, select your solution node.
  8. Browse to the Version Control menu and choose Publish in Version Control.
  9. Follow the steps of the above tutorial starting from the step 6.

See also

This document describes how I set up front end web development environment on my MacBook Air with macOS Mojave 10.14.3.

Table of Contents

Installation

You can follow the instructions below or use shell script to configure settings automatically. If you decided on the second option there are two ways:

  • clone/download the repository into your computer and execute install.sh from the repository root directory:
  • one line installation - open your terminal and enter the following code:

System Preferences

After a clean install of the operating system, there are a couple of tweaks I like to make to the System Preferences. Some of them are not strictly related to web development environment - I use them because of my personal habits.

  • General > Appearance > Dark
  • General > Ask to keep changes when closing documents
  • General > Close windows when quitting an app
  • Dock > Automatically hide and show the Dock
  • Keyboard > Key Repeat > Fast (all the way to the right)
  • Keyboard > Delay Until Repeat > Short (all the way to the right)

Much more settings can be configured via macOS defaults - command line utility that manipulates system configuration files. The system stores user preferences in a .plist files located in ~/Library/Preferences directory.

Set Dock Size

In my opinion, the best size of the dock is 35. Remember that this is due to the size and resolution of my MacBook screen.

Disable Press and Hold

Press and Hold function is used to create accents or diacritical marks. I don't need it, so I turn it off. You can always turn it back on by changing false to true.

Reset Icons in Launchpad

I usually use this command after installing every application that I need - it keeps Apple applications on the first page and moves the rest to the next pages.

Show Hidden Files

This can also be done by pressing Command ⌘ + Shift ⇧ + ..

Show Path Bar in Finder

Show Status Bar in Finder

Set Firmware Password

Setting a firmware password prevents your Mac from starting up from any device other than your startup disk. It may also be set to be required on each boot.

You can find a lot more settings in defaults.sh.

Terminal

I use my custom Terminal profile which I called Flat. You can download it by typing:

To use it as the default profile, open downloaded Flat.terminal file and click Shell > Use settings as default option.

Bash

Studio

When bash is invoked it looks for ~/.bash_profile, reads it and executes commands from it.In my .bash_profile file I create, among others, a brewup alias (keyboard shortcut to avoiding typing a long command sequence) to keep Homebrew (which we are going to install in a second) up to date. I also set the color scheme for ls command output and configure custom prompt, which contains username, computer name, working directory and current Git branch.

To download my .bash_profile and execute its content:

Homebrew

Homebrew package manager allows to install almost any application right from the command line:

Now, to install Homebrew package you can use use brew install <package>, for example:

To install GUI macOS applications use Homebrew Cask:

Brewfile

Installing each application and package separately may take some time. Homebrew Bundle allows to automatically install everything listed in the Brewfile file.

Here are all applications I usually install with a brief description.

  • Git - version control system
  • Ruby - programming language
  • mas-cli - Mac App Store command line interface
  • AppCleaner - apps uninstaller
  • Background Music - audio utility
  • Cyberduck - FTP client
  • draw.io - diagramming tool
  • Firefox - web browser
  • Flux - screen color temperature adjusting app
  • Google Chrome - web browser
  • GPG Suite - communication and files encryption tools
  • KeepingYouAwake - app which prevents Mac from entering sleep mode
  • Keka - file archiver
  • MAMP - Apache, MySQL and PHP package
  • Opera - web browser
  • Postman - API testing tool
  • Sequel Pro - MySQL GUI tool
  • Skype - voice and video chat
  • Slack - team collaboration tools
  • Sourcetree - Git GUI client
  • Spectacle - window manager
  • Spotify - digital music service
  • Transmission - BitTorrent client
  • Tunnelblick - GUI for OpenVPN
  • Visual Studio Code - code editor
  • VLC - media player
  • iMovie - video editor
  • Numbers - spreadsheet editor
  • Pages - text editor
  • Xcode - IDE for developing software for Apple products

Below are the entire contents of my Brewfile.

To check App Store application ID you must install mas-cli first. Then, use mac search <app name>, for example:

My Brewfile file can be downloaded using:

Microsoft Visual Studio For Mac

To install listed applications type:

in a directory that contains Brewfile.

Git

You can set Git global configuration two ways. The first is to run a bunch of commands which will update the Git configuration file, e.g.

The other and faster way is creating the Git configuration file (~/.gitconfig) and input it all ourselves:

Here I set my name, email, core editor and connect Git to the macOS Keychain so I don’t have to type my username and password every time I want to push to GitHub.

SSH

You can also authenticate with GiHub using SSH key:

Above command will create a private key (id_rsa) and public key (id_rsa.pub) in ~/.ssh directory.Next, add your newly created SSH key to the ssh-agent to be able to manage your keys:

Now just login into your Github account and paste content of id_rsa.pub file in Settings > SSH and GPG keys > New SSH key.

After you've set up your SSH key and added it to your GitHub account, you can test your connection. Open terminal and enter the following code:

After verifying fingerprint by typing yes you should see the following message:

Node.js

For installation of the Node.js I like to use Node Version Manager:

Now, you can list all available Node.js versions:

To install specific Node.js version:

Node Package Manager

Packages which I use globally at the moment are:

To install npm packages globally use npm install with -g flag:

Web Browsers

I have installed all major web browsers:

For development I use Chrome. To see how your site renders on Microsoft browsers like Edge or Internet Explorer you can use Microsoft Developer Tools to generate screenshots for each of them.

Chrome Extensions

  • uBlock Origin - block ads
  • Privacy Badger - block spying ads and invisible trackers
  • Nano Defender - anti-adblock defuser
  • HTTPS Everywhere - automatically switch from http to https
  • JSON Viewer - validate and view JSON documents
  • React Developer Tools - inspect component hierarchies and states
  • Redux DevTools - inspect and debug state changes
  • Pesticide - toggle different colored outlines on every element for quick CSS layout debug

Git For Visual Studio Code

Visual Studio Code

All default settings changes are stored in settings.json file located in /Users/<your username>/Library/Application Support/Code/User. You can open it by pressing Command ⌘ + Shift ⇧ + p and choosing Preferences: Open Settings (JSON).Here are my settings.json contents:

You can copy and paste them or just download my settings.json file:

Visual Studio Git Integration

Extensions

  • Bracket Pair Colorizer - match brackets to be identified with colours
  • Debugger for Chrome - debug JavaScript code running in Google Chrome from VS Code
  • ESLint - integrate ESLint into VS Code
  • GitLens - supercharge the Git capabilities built into VS Code
  • Material Icon Theme - icons based on Material Design
  • open in browser - open any file in browser right from VS Code explorer
  • Prettier - Code formatter - VS Code package to format files using Prettier.
  • vscode-styled-components - syntax highlighting and IntelliSense for styled-components

To install all extensions by one command:

Snippets

Download Git For Visual Studio

I created my own global snippets instead of installing an extensions. User custom global snippets are located in /Users/<your username>/Library/Application Support/Code/User/snippets as files with code-snippets extension. You can easily create or edit them by going to Code > Preferences > User Snippets.

You can find all my snippets in snippets.code-snippets.

Keybindings

Visual Studio For Mac Os X

Custom Visual Studio Code keybindings are located in /Users/<your username>/Library/Application Support/Code/User as keybindings.json file. To manage them go to Code > Preferences > Keyboard Shortcuts.

Visual Studio For Mac Git Setup Windows

My keybindingsa are listed in keybindings.json.