Visual Studio Code And Github

In this module, you will: Sign in to GitHub by using Visual Studio Code. Use Visual Studio Code to search GitHub for repos. Clone a repo from Visual Studio Code. Publish a local project to GitHub by using Visual Studio Code. View a timeline of activity on a GitHub repo. Open any folder of any remote Github Repository and take advantage of Visual Studio Code's full feature set. Installation Launch VS Code Quick Open ( Ctrl+P ), paste the following command, and press enter.

Visual Studio Code Remote Development allows you to use a container, remote machine, or the Windows Subsystem for Linux (WSL) as a full-featured development environment. You can:

• Develop on the same operating system you deploy to or use larger or more specialized hardware.
• Sandbox your development environment to avoid impacting your local machine configuration.
• Make it easy for new contributors to get started and keep everyone on a consistent environment.
• Use tools or runtimes not available on your local OS or manage multiple versions of them.
• Develop your Linux-deployed applications using the Windows Subsystem for Linux.
• Access an existing development environment from multiple machines or locations.
• Debug an application running somewhere else such as a customer site or in the cloud.

No source code needs to be on your local machine to get these benefits. Each extension in the Remote Development extension pack can run commands and other extensions directly inside a container, in WSL, or on a remote machine so that everything feels like it does when you run locally.

Getting started

Remote Development extension pack

The Remote Development extension pack includes three extensions. See the following articles to get started with each of them:

• Remote - SSH - Connect to any location by opening folders on a remote machine/VM using SSH.
• Remote - Containers - Work with a sandboxed toolchain or container-based application inside (or mounted into) a container.
• Remote - WSL - Get a Linux-powered development experience in the Windows Subsystem for Linux.

While most VS Code extensions should work unmodified in a remote environment, extension authors can learn more at Supporting Remote Development.

Remote tutorials

The tutorials below will walk you through running Visual Studio Code with the Remote Development extensions.

GitHub Codespaces

GitHub Codespaces provides remote development environments that are managed for you. You can configure and create a development environment hosted in the cloud, which is spun up and available when you need it.

Questions or feedback

• See Tips and Tricks or the FAQ.
• Search on Stack Overflow.
• Add a feature request or report a problem.

Browse Github Repositories Instantly Without Cloning

• How to use Remote - Github
  • Authentication

Why Remote - Github

How to browse github repository in VSCode?

Usually we need to git clone the whole git repo to our local file systems, even if we only want source code, or even a single subfolder.

That's really a waste of time and resource, especially when network is slow and the repo contains so many git big binary objects.

Remote - Github made opening a remote github repo as easy as open a local folder, you don't have to download anything to your local file system.

How to use Remote - Github

Using Remote - Github cannot be easier, all you need is to sign in, and browse.

Authentication

Invoke command Remote - Github: Sign In through command palette, type in your github username first:

To authenticate yourself, you have two choice: Password Authetication and Personal Access Token.

How to get github Personal Acces Token

In the second popup window, type in your password or personal access token:

After login success, you would see a cute github icon with your username on the right bottom bar:

Provide your own keystore path

If you want higher security level, you could provide your own path of file which contains your authentication string in <username>:<password> or <username>:<personal access token>. For example:

And paste absolute path to Remote - Github: Keystore Path in VSCode Settings UI:

You must sign in to get more request times to api.github.com per hour. According to github official doc, authenticated user can make up to 5000 core requests to api.github.com every hour. Anonymous user could only make 60 requests per hour.

Setup Github To Workspace

Invoke Remote - Github: Setup Workspace to mount github folder to your workspace, after which you would see a folder named Github appeared in your workspace:

Open Repository

Invoke Remote - Github: Open Github Repository, you would see this popup:

Just type in the url of your github repository, for example, https://github.com/golang/go, or just repo path: golang/go, and hit enter:

you can navigate through this repository just like navigate your local folder, . gets you to the parent folder, select . would open current folder. If you select a file, you would just open this file.

Let's try to navigate through golang/go repository:

Of course you can open the whole repository, all you need is select '.' in the first entry, and the repository would appear magically in your Github Folder:

Note that the folder resides in memory, not stored persistently, if you close the window, all loaded files are gone.

Many times, a git repository contains many independent tutorial samples, typically microsoft/vscode-extension-samples, so you could open only the sample you want:

Instead of cloning the whole big git repository, you could just open one subfolder:

Open one file is also ok. You can try it out.

Enable VS Code Full Feature Set By Providing Mount Point

VS Code supports Intellisense, Code Navigation, File Searching, etc. Browing code would be much easier with these amazing features, but people find they cannot do this with files loaded by Remote - Github.

It is because Remote - Github stores them to memory, namely, virtual file system first, so the vscode could not analyze it, neither do other tools like npm, maven, etc.

Remote - Github now gives you a choice to enable all these features by writing loaded files to your local fs. It's really simple, all you need is provide a 'mount point' (just an absolute path to store the whole github folder):

Visual Studio Code Github Token

Once the mount point is provided, all loaded file would be written to a newly created github folder under your mount point, and everything works just like before except that vscode features are enabled.

After that, you could find anything in your local github folder, and you can compile it, modify and save it, and run it.

Repository Searching

In 0.1, if you want to open vscode repo, you need to input https://github.com/microsoft/vscode. To do this, you have to open github and find this repo, paste link to Remote-Github.

With Repository Searching, all you have to do it provide a single keyword like 'vscode', and Remote-Github would provide you several searching results for you to pick:

This would not break the old behavior, if you provide full link, everything works like in 0.1.

Namespaces

The namespaces of file are dealt with gracefully, open mutiple repos would not conflict with each other:

It seems we mount the whole Github as our local disk partition!

Save As Local Files

Although the repo resides in memory, but you could download it to your local file system:

Visual Studio Code Github Username Password

Just right click any folder or files, and click download.

Open Different Snapshot

Remote - Github seems ignore the 'git things': branches, commits, tags..

But it's not.

You can specify which branch, or which tag you want to browse, and the syntax is pretty straghtforward:

If you want to open dev.link branch of golang/go, just type in:

If you want to open v5.6 tag of torvalds/linux:

Create Remote Github Repository In VS Code

In order to set up a remote repo, usually we need to open browser and create a repo in github manually, and then push the local repo to it.

With Remote - Github, you can create remote github repo right in VS Code and sync with your local repo automatically.

Just invoke Remote - Github: Create Remote Github Repository command, and input the repo name and description:

select repo type, public or private:

Wait a sec, the repo would be created:

click see it to see the repo in browser:

Once repo is created, Remote - Github would open a new terminal, and run several commands to set up your local repo to sync with your remote repo:

Visual Studio Code Vs Visual Studio

Notice that git init would have no effect if your local repo has already set up git. Just don't worry it.

Visual Studio Code And Git

Limits

Open big repository like torvalds/linux, microsoft/vscode from root folder would cause some network & performance issue. The best practice is only open what you need, not whole repo. Download eclipse ide for java mac.

Design Philosophy

1. load only source code, not whole git history.
2. load to memory first, not to local environment.
3. open only what you need, not everything.
4. download as you need.
5. convention over configuration.

How To Configure Visual Studio Code And Github

Configurations

Using Github And Visual Studio Code