Open Github repository in VS Code in Online

featured Image

This article is on how to open any Github repo in VSCode in our browser online without any need of cloning the repository.

This is something I found out recently while surfing the internet.

So now if you want to view your Github repository source code or if you found some interesting repository and want to see the code in it quickly in VSCode, with a proper view of the file structure on the side of it. Then you should check out these two amazing projects.

These two open-source projects are:

  1. github.dev
  2. github1s.com

Both these projects gives us a web-based editor to view code and do pull request to create and commit changes.

github.dev by GitHub to open Github Repos

Github has introduced codespace this year which allows us to code online in a dedicated environment.

And along with this, they have introduced the VSCode as a web-based editor to view, pull, and to commit changes on any repository without the need to clone our repo.

To open or view your repository in VSCode online, you can try any of these steps:

  • Press . while we browse any repo or do any pull request on Github, or
  • Change the repo URL from github.com to github.dev

Example: To open codespace repo change

https://github.com/2percentsilk/haikus-for-codespaces

to

https://github.dev/2percentsilk/haikus-for-codespaces

And you get the code as shown in the pic below.

open github repo on vscode online in your browser

Using github1s to open any Github Repo in VS Code

It does the same work as github.dev, but github1s is an open-source project and it is not officially provided by Github.com.

It is maintained by open-source contributors. You can learn more about it on their website(github1s.com).

Here, to open your repo in VSCode you just have to add 1s in github.com like this: github1s.com .

That’s it, now your repo will open in The VScode web-based editor.

Example : To open nanoid repo change,

https://github.com/ai/nanoid

to

https://github1s.com/ai/nanoid

Related Topics:

How To Create New Folder In Github?

How To Save Username, Email And Password Globally In Github?

How To Check GitHub Email Address And Username From Terminal?

How to add empty folder/directory in Git

How to remove node_modules from github or bitbucket

How to change image size in markdown in GitHub

Related Posts

git commands with example

Top 40 Git commands with Examples

GitHub has become an essential tool for developers to manage, store, and collaborate with other developers on software projects. With its simple powerful git-based version control system, GitHub allows users…

Read more
Check GitHub Account in the Terminal

Check GitHub Account in the Terminal

GitHub is an integral tool for developers to store, manage, and collaborate on software projects with other developers. And as we work more and more in the command line it…

Read more
featured Image

How to make list of objects in Netlify CMS using list and object Widget

Here in this Netlify CMS tutorial we will how easily we can make a list of objects using list and object widgets. This will allow us to add multiple objects…

Read more

Leave a Reply

Your email address will not be published. Required fields are marked *