News
One-Click VS Code in Browser from GitHub Repo ('How Did I Not Know This?')
Hundreds of developers expressed amazement at a new preview feature introduced this month by GitHub: the ability to instantly open up Visual Studio Code in a browser in order to edit the source code found in any repository.
Yes, from any repo or pull request, developers can simply press the period (.) key to bring up the browser-based VS Code environment with the source code file ready for editing. That dot press to bring up the web-based editor takes you to https://github.dev/, so the same one-press functionality can be duplicated just by changing a URL from "github.com" to "github.dev."
The feature was introduced a couple weeks ago with little fanfare but is attracting a lot of attention from the developer community, many of whom were totally unaware of it until just recently, enlightened by a Hacker News post, a new Reddit post and a YouTube video.
"It's a quick way to edit and navigate code," GitHub says. "It's especially useful if you want to edit multiple files at a time or take advantage of all the powerful code editing features of Visual Studio Code when making a quick change."
Surprised developers responded to the posts and video with comments like:
- How did I not know this?
- I think you've changed my life.
- Holy cow I thought I was being pranked but it really works.
- Holy crap. It works pretty good too.
- I had to check it wasn't April fools. This is epic.
- The mightiest dot you have ever seen
- extraordinary stuff right here 👏👏
- I'm surprised it works as well as it does. Really cool project by Github!
- Talk of being mind blown! It's actually real!
Others wished the functionality was apparent in the GitHub UI, with a button to "Edit in VS Code" or something.
Still others pointed out existing similar functionality that can be achieved by just adding "1s" to a GitHub repo to bring up VS Code in a browser, for example, changing github.com/someperson/someproject to github1s.com/someperson/someproject. That, however, opens up a code file for reading only, no editing allowed.
[Click on image for larger, animated GIF view.] Web-Based Editor in Animated Action (source: GitHub).
As explained in "The dot" video published by the Visual Studio Code YouTube account, github.dev provides much more.
The video's narration says: "You have to try this. Go to any GitHub repository and then press the dot key on your keyboard. Visual Studio Code will appear in your browser. It will load your entire repository and you can open any file from it. You have your entire source code with syntax highlighting and coloring. If you want to search for something, you can use the Visual Studio Code search capability to search in any file in the repository. If you make a code change, that code change gets saved and you can immediately make a commit inside your GitHub repository from your browser."
Note that a Hacker News reader claimed the S1 approach beats the github.dev approach in at least one way: "Another feature of Github1s is that it allows you to jump to definitions and references. Github.Dev doesn't do this yet."
While the web-based editor is a beta preview feature of GitHub Codespaces, the dot trick can be used by anyone, according to documentation:
The web-based editor introduces a new, lightweight editing experience that runs entirely in your browser. With the web editor, you can navigate files and source code repositories from GitHub, and make and commit code changes. You can open any repository, fork, or pull request in the editor.
The web-based editor is available to everyone for free on GitHub.com.
The web-based editor provides many of the benefits of Visual Studio Code, such as search, syntax highlighting, and a source control view. You can also use Settings Sync to share your own Visual Studio Code settings with the editor. For more information, see the Settings Sync guide in the Visual Studio Code documentation.
The web editor runs entirely in your browser's sandbox. It doesn't clone the repository, but instead loads your code by invoking the services' APIs directly from your browser. Your work is saved in the browser's local storage until you commit it. You can commit your changes to persist any new work.
Because there is no associated compute, you won't be able to build and run your code or use the integrated terminal. Only a subset of extensions that can run in the web will appear in the Extensions panel and can be installed. Likewise, support for certain programming languages may be more limited in the web.
The video published Aug. 11 has been viewed more than 126,000 times as of this writing, garnering 445 comments. The Reddit post published yesterday (Aug. 30) has 73 comments and 324 upvotes. The Hacker News post attracted 25 comments and earned 79 points.
About the Author
David Ramel is an editor and writer at Converge 360.