User:M Janczyk/Git GUI

From bwHPC Wiki
Jump to: navigation, search

1 GUI for Git/SVN repositories on bwunicluster

This tutorial explains how to get a GUI experience for a Git or SVN repository on a remote machine with Microsoft Visual Studio Code (VS Code) and the 'Remote Development' extension.

Note: The 'Remote Development' extension for VS code is in a preview state. If there occur any bugs it is recommended to use VS Code Insiders instead of VS Code.

Visual Studio Code
Visual Studio Code Insiders

If you need Subversion support, follow the steps below and additionally install the ‘SVN’ extension by Chris Johnston.

1.1 Install extension and connect to a repository on bwunicluster

  1. Click on ‘Extensions’ on the left and search for ‘remote development’. Intall the ‘Remote Development’ extension from Microsoft by clicking on ‘Install’. Git Remote 1.png
  2. Click on ‘View → Command Palette...’ and then type ‘remote ssh’. Choose ‘Remote-SSH: Connect to Host...’ and press enter. Now click on ‘Add New SSH Host...’ and enter ‘ssh’.
  3. VS Code asks where to to store the ssh configuration. Choose the first entry to store it in your home directory. Git Remote 2.png
  4. Click on ‘View → Command Palette...’ and then type ‘remote ssh’. Choose ‘Remote-SSH: Connect to Host...’. Now use ‘’ and in the new window accept the fingerprint by clicking on ‘continue’.
  5. Enter your password for bwunicluster and press enter.
  6. The green ‘SSH:’ at the bottom indicates that this VS Code window is connected to the remote machine.
  7. Open a terminal by clicking on ‘Terminal → New Terminal’. Navigate to your Git repository and type ‘code .’ and hit enter. After entering your password again a new instance of VS Code opens with the folder of your Git repository as working directory. Git Remote 4.png
  8. Reopen the terminal by clicking on ‘Terminal → New Terminal’. The new terminal should open in the folder of your Git repository.
  9. In the newly started terminal, by typing ‘code FILENAME.EXT’ Visual Studio Code will open this file in the editor.
  10. When edit files belong to a GIT/SVN repository, you can see this at the left by clicking on ‘Source Control’. You can click on the files which have changed and VS Code displays the changes. If you do not see any files changed it may help to click on the refresh button. Git Remote 5.png