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.
Using Remote - Github cannot be easier, all you need is to sign in, and browse.
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:
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.comper hour. According to github official doc, authenticated user can make up to 5000 core requests toapi.github.comevery hour. Anonymous user could only make 60 requests per hour.
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:
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.
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):
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.
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.
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!
Although the repo resides in memory, but you could download it to your local file system:
Just right click any folder or files, and click download.
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:
golang/go -b dev.link
If you want to open v5.6 tag of torvalds/linux:
torvalds/linux -t v5.6
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:
git init
git remote add origin https://github.com/<username>/<reponame>
git push -u origin master
Notice that git init would have no effect if your local repo has already set up git. Just don't worry it.
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.
- load only source code, not whole git history.
- load to memory first, not to local environment.
- open only what you need, not everything.
- download as you need.
- convention over configuration.
| Config | Effect |
|---|---|
| Remote - Github: Max Request Times Per Open | The max number of request time every repo opening. If set too large, nework & performance issues may occur. |
| Github: Use Sync Load | Asynchronous https requesting would make repo loading faster, but prone to be detected as robot. Set this true makes loading synchronous, which would slower loading process, but makes it more robust to robot detection. |
| Remote - Github: Keystore Path | Instead of type in username and authentication string manually, you can provide the absolute path of your own file which contains <username>:<password> or <username>:<private access token>. |
| Remote - Github: Mount Point | If provided, dynamically loaded repo would be written to here. (Please provide absolute path) |