Microsoft releases vscode.dev, bringing VS Code to the browser

Original Author: Chris Dias
Translation: Teacher Han + Google Translate

As early as 2019, when the .dev top-level domain name was opened, we quickly registered vscode.dev. Like many people who buy a .dev domain name, we don't know what we will do with it. Anyway, take a pit!

Bring VS Code to the browser

Until today, when you go to https://vscode.dev , you will see a lightweight VS Code that runs completely in the browser. Open a folder on the local machine and start coding.

No installation is required. Smooth as silk.

With the emergence of vscode.dev, we finally realized our original vision, which is to build a development tool that can run completely serverless in the browser.

So, on VS Code for the Web?

Use cloud tools for local development

Modern browsers that support file system access APIs (currently Edge and Chrome) allow web pages to access the local file system (with your permission). This simple local machine gateway quickly opens up some interesting scenarios of using VS Code for the Web as a zero-installation local development tool, such as:

• View and edit local files. Take notes quickly (and preview!) in Markdown. Even if you are on a restricted machine where you cannot install the full VS Code, you can still use vscode.dev to view and edit local files.
• Combine browser tools to build client-side HTML, JavaScript, and CSS applications for debugging.
• Edit the code on a low-power machine such as a Chromebook, because you can't (or "easily") install VS Code on a Chromebook.
• Developed on the iPad. You can upload/download files (even store them in the cloud using the Files app), and open the repository remotely using the built-in GitHub repository extension.

Moreover, if your browser does not support the local file system API, you can still upload and download individual files through the browser to open them.

Lightweight experience

Because VS Code for the Web runs entirely in the browser, certain experiences will naturally be more restricted than what you can do in a desktop application. For example, the terminal and debugger are not available. This makes sense, because you cannot compile, run, and debug Rust or Go applications in the browser sandbox (although emerging technologies such as Pyodide and web containers may change this one day).

More subtle is the code editing, navigation, and browsing experience. On the desktop, these experiences are usually supported by language services and compilers that require a file system, runtime, and computing environment. In the browser, these experiences are supported by language services (no file system, no runtime) that run entirely in the browser. These services provide source code tokenization and syntax coloring, completion, and many single-file operations.

Therefore, when in a browser, the experience is usually divided into the following categories:

good : For most programming languages, vscode.dev provides you with code syntax coloring, text-based completion, and bracket pair coloring. Using the Tree-sitter syntax tree, we are able to provide additional experiences for popular languages such as C/C++, C#, Java, PHP, Rust and Go, such as outline/go to symbol and symbol search.

better : TypeScript, JavaScript and Python experiences are all supported by language services running locally in the browser. Using these programming languages, you will get the " good " experience as well as rich single file completion, semantic highlighting, syntax errors, etc.

best : For many "webby" languages, such as JSON, HTML, CSS, and LESS, the coding experience in vscode.dev is almost the same as the desktop (including the Markdown preview!).

expand

Most UI custom extensions (such as themes, key mappings, and code snippets) can be used in vscode.dev, and you can even enable roaming between the browser, desktop, and GitHub code space through Settings Sync.

Extensions that use the Node.js code of operating system modules, or extensions that run executable files, will still be displayed in the extension search results, but they will be clearly marked as unavailable.

In other words, more and more extensions have been updated to be available in the browser, and there are more extensions every day.

Note: If you are an extension author and want to use your extension in your browser, please check our web extension authoring guide. https://code.visualstudio.com/api/extension-guides/web-extensions

For example, the Luna Paint-Image Editor extension allows you to edit raster images directly in VS Code. This extension brings a wealth of design tools (such as layer and blending tools) to VS Code. Of course, you can also save the image to a local disk.

Brings the Notebook experience of GitHub Issues in GitHub Issue Notebooks. With it, you can mix queries, results, and even Markdown describing the purpose of the query into one editor.

GitHub

Many extensions of VS Code are based on GitHub. For example, the CodeTour extension allows you to create a guided walkthrough of the code base, while the WikiLens extension turns VS Code and your repository into a powerful note-taking tool (with two-way links). To facilitate access to the code in GitHub, VS Code for the Web has built-in extensions for GitHub Repositories, Codespaces, and Pull Request. You can make quick edits, review PRs, and continue local cloning. If you want a more powerful language experience or need to build, run, and test changes before merge commit, you can use GitHub Codespace to get a stronger development experience.

Wow, it sounds a lot like github.dev doesn't it? Why are there two? ? ! !

What a good question!

github.dev is a customized instance of Web version of VS Code deeply integrated into GitHub. Login is automatic. The URL format is as follows in the /organization/repo mode of github.com, so that you can simply change .com to .dev to edit the code.

In addition to the repositories on GitHub, VS Code for the Web also supports Azure Repos (part of Azure DevOps). In order to use both at the same time, VS Code for the Web supports two routes, vscode.dev/github and vscode.dev/azurerepos. However, you don’t have to remember this, just add "in front of any URL you have vscode.dev", that's it!

For example, change https://github.com/microsoft/vscode to:

https://vscode.dev/github.com/Microsoft/vscode

For Azure Repos, do the same. Change https:

https://vscode.dev/dev.azure.com/…

Today, support for Azure Repos is in preview mode for reading the repository, but we are working hard to provide full read/write capabilities as soon as possible.

If you are not on GitHub or Azure DevOps, you can extend support for other repository hosting services, just like on the desktop. As mentioned above, these extensions need to support full operation in the browser.

Talk about URL again

Just like on the desktop, you can customize VS Code for the Web through a rich and extended ecosystem that supports almost all backends, languages, and services. Unlike on the desktop, it is easy for us to provide a customized experience with the URL via the unique pre-installed extension vscode.dev (eg vscode.dev/github and vscode.dev/azurerepos).

For example, try to browse to vscode.dev/theme/sdras.

Here you can directly experience @sarah_edo's night owl color theme. No need to install! If you are a theme author, you can even create a badge in the README to let users try your theme directly from the Marketplace (Learn more in the VS Code for the Web User Guide: https://code.visualstudio.com /docs/editor/vscode-web#_themes).

As you can see, vscode.dev is a powerful way for us to provide lightweight new experiences. Another example is the Live Share guest session, which will also be available in the browser The sessionId will be passed to the extension to make the joining experience silky smooth.

The way forward, how do we go?

Introducing VS Code into the browser is the realization of the original vision of the product. This is also a fresh start.

Anyone with a browser and internet connection can use our editor. This is the basis for us to edit any content from anywhere in the future.

Stay tuned for more!

---

Here are more Microsoft official learning materials and technical documents, scan the code to get the free version!
The content will be updated from time to time!