Shulou(Shulou.com)06/02 Report--

This article mainly explains "Github code space service how to use online VSCode", the article explains the content is simple and clear, easy to learn and understand, the following please follow the editor's ideas slowly in depth, together to study and learn "Github code space service how to use online VSCode" bar!

Github recently tested a new secret weapon code space service internally, an in-browser integrated development environment supported by Visual Studio Code. The service allows users to quickly load virtual machines and a complete integrated development environment (IDE). Users only need to edit and debug code through a browser, and support debugging for common languages.

The code space includes everything you need to develop for a specific repository, including text editors, terminals, debugging tools, and Git commands with syntax highlighting and autocompletion, all integrated in GitHub. You can also install the Visual Studio Code extension in the code space to add more functionality.

Students who use Gitlab may have used Gitlab's WebIDE,Github code space similar to this, but based on VSCode, the experience may be better. Currently, the service belongs to the internal testing phase of Beta. You need to issue a request to apply for internal testing, and you can only try it after verification.

Preliminary study

The GitHub code space is closely related to the repository. Once qualified for internal testing, there is a button "Open with Codespaces" in the project overview section on the right side of the warehouse, which allows you to edit the code. You can work online right away without any additional configuration.

You can also open the code space through the top-level menu Codespaces at the top of the Github page.

Then select the specific project you want to open:

It takes a while to load the code space. The GitHub code space interface is a typical VSCode interface, with active bar, sidebar, edit bar, panel bar and status bar on the left.

Obviously, it's based on Visual Studio Code or typical dark mode. All the standard features expected by the entire Bread browser, such as syntax highlighting, ViM and Emac bindings (which are easy to use in browsers), and auto-save enabled by default.

You can also drag and drop files from your local computer into the Codespaces file system, and preview and edit certain non-text files, such as images, in a browser, both of which are convenient for Web development.

Terminal simulator

The GitHub code space contains a powerful terminal editor that seems to be based on Debian mirroring. Use the drop-down list instead of using tabs to access individual terminals. And importantly, Docker can also be run under this terminal.

It's great to be able to simply run Docker in a browser. Docker-compose is not installed by default, and we don't know its working mode at present. We can learn about it later.

The only problem found in the terminal emulator is that it can only be pasted into a Chromium-based browser (such as Chrome or Edge) by right-clicking, and Firefox doesn't seem to work.

Code forwarding

Port forwarding gives us access to TCP ports running in code space. For example, if you run the Web application on port 3000, you can access the application from a browser to test and debug it.

The Github code space does a good job of handling port forwarding, and when an application running in code space outputs the ports to the console, the code space detects localhost URL mode and automatically forwards those ports. You can open it in a browser by clicking URL in the terminal. For example, if the application outputs http://127.0.0.1:3000 or http://localhost:3000 to the console, the log will be output automatically. If GitHub detects a localhost:PORT combination, you can access it by clicking URL, as follows:

The Jekyll in the example loads and reloads quickly and refreshes the site when you click the forwarded link or switch tab to preview changes to the site. This feature only supports the functionality of Chromium, and there seems to be a problem in Firefox.

You can forward the port on demand by triggering the command panel (shift+command+P or shift+control+P) and typing "Codespaces: Forward Port". You can then enter the port number to forward.

You can also configure the forwarded port through the forwardPorts property in the .devcontainer.json file.

Add or remove forwarded ports is supported in the Remote Explorer remote Explorer extension, and you can copy and paste the URL of the forwarded port, which can be accessed through the Url in the browser.

Thank you for reading, the above is the content of "Github Code Space Service how to use online VSCode". After the study of this article, I believe you have a deeper understanding of how to use online VSCode in Github Code Space Service, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.