The Many Faces of VS Code in the Browser

VS Code, built using web technologies (HTML, CSS, and JavaScript), is predominantly used as a locally installed application. However, its web-based accessibility is rapidly expanding, making it a significant development in the world of web development, where VS Code reigns supreme. This web availability eliminates the need for software installation, a considerable advantage for institutions like schools managing numerous devices and for platforms like Chromebooks that limit local software installation.

The proliferation of VS Code's web versions can be confusing, so let's examine the current landscape:

vscode.dev

Recently launched, vscode.dev leverages the File System Access API (currently supported by Edge and Chrome) to access the local file system (with user permission). Even without this API, users can upload files or, more practically, open repositories. Essentially, it provides a browser-based VS Code experience, opening local folders and mirroring the functionality of the desktop application. While basic usage feels similar, permission management and keyboard shortcuts require adjustment, and a terminal is currently unavailable. Despite these limitations, features like "Find in Project" maintain comparable speed to the desktop version, even on large projects.

GitHub.dev: The "." Shortcut

GitHub.dev offers another browser-based VS Code instance, but with a different approach. Local folder access is absent; instead, it focuses on quick access and modification of GitHub repositories. Changes can be saved, committed, and pull requests initiated directly within the browser. While a potential merger with vscode.dev is speculated, currently they remain distinct. Conversely, GitHub repositories can also be opened directly in locally installed VS Code without cloning.

GitHub Codespaces: Terminal and Preview Included

GitHub Codespaces provides a more advanced browser-based VS Code experience. Microsoft authentication enables access to locally installed extensions. More importantly, it includes a functional terminal. Upon launch, it provides access to various runtimes and tools (Python, Node.js, Docker, etc.), allowing users to run npm scripts and generate project previews via URLs.

Gitpod: A Strong Competitor

Gitpod mirrors GitHub Codespaces, offering a browser-based VS Code with a terminal providing a full Docker/Linux environment. This powerful setup potentially allows for production environment mirroring, depending on Gitpod's supported technologies. Gitpod also integrates "workspaces" that manage services, elegantly handling project previews with features like running MongoDB instances. Its potential acquisition by Microsoft is a plausible scenario, given the converging directions of both companies.

CodeSandbox and Stackblitz: Similar Alternatives

CodeSandbox and Stackblitz also offer browser-based VS Code alternatives, or at least utilize VS Code components.

Self-Hosted VS Code: code-server

Coder's code-server allows self-hosting of VS Code, providing an alternative to third-party web versions. This is particularly useful for running VS Code on controlled cloud servers, enabling direct file editing on the server itself. This approach offers advantages for schools and environments with limited local software capabilities, potentially improving battery life by offloading intensive tasks to the server.

The rise of web-based IDEs is undeniable. The success of Figma demonstrates the advantages of web-first development, combining ease of use, collaborative features, and accessibility. The future of development environments increasingly points towards the web.

The above is the detailed content of The Many Faces of VS Code in the Browser. For more information, please follow other related articles on the PHP Chinese website!