October 20, 2021 by Chris Dias,@chrisdias
In 2019, when the.devopen top level domain, we collectedvscode.devand quickly parked it, pointing to our websitecode.visualstudio.com(or, if you're from the Boston area like me, "we bag it up"). Like many people who buy a.devdomain, we had no idea what we were going to do with it. And we certainly didn't anticipate that it would end up being the accomplishment of a decade-plus mission.
Bringing VS Code to the browser
Fast forward to today. Now when are you going tohttps://vscode.dev, you will be presented with a lightweight version of VS Code that runs entirely in the browser. Open a folder on your local machine and start coding.
Does not require installation.
With the availability of vscode.dev, we finally began to realize our original vision of creating a development tool that can run completely serverless in the browser. For a full history lesson, check out Erich Gamma's VS Code Day talk."VS Code, an overnight success... 10 years in the making".
So what can you do in VS Code for the web? quite actually...
Modern browsers that support theFile system access API(Edge and Chrome today) allow web pages to access the local file system (with your permission). This simple gateway to the local machine quickly opens up some interesting scenarios for using VS Code for the web as a local development tool without installation, such as:
- Viewing and editing local files. Quickly take notes (and preview!) in Markdown. Even if you're on a restricted machine where you can't install the full VS Code, you can still use vscode.dev to view and edit local files.
- Build client-side HTML, JavaScript, and CSS applications along with browser tools for debugging.
- Edit your code on lower powered machines like Chromebooks, where you can't (easily) install the VS code.
- Develop on your iPad. You can upload/download files (and even store them in the cloud with the Files app), as well as open repositories remotely with the built-in GitHub repositories extension.
And, if your browser doesn't support the local file system APIs, you'll still be able to open individual files by uploading and downloading them through the browser.
A lightweight experience
Since VS Code for the web runs entirely within the browser, some experiences will naturally be more restricted compared to what you can do on the desktop app. For example, the terminal and debugger are not available, which makes sense since you can't build, run, and debug a Rust or Go app inside the browser sandbox (although emerging technologies like Pyodide and web containers can change this). some day).
Slightly more nuanced are the code editing, browsing, and browsing experiences, which, on the desktop, typically work with language services and compilers that expect a file system, runtime, and compute environment. In the browser, these experiences are powered by language servicesfully working in browser(no file system, no runtimes) that provide source code tokenization and syntax coloring, completion, and many single-file operations.
As a result, when in-browser, experiences generally fall into the following categories:
GOOD: For most programming languages, vscode.dev gives you code syntax coloring, text-based completion, andcolorization of the pair of brackets. using atree keepersyntax tree, we canprovide additional experiencesasContour/Go to SymbolySymbol Searchfor popular languages like C/C++, C#, Java, PHP, Rust and Go.
Better: TypeScript, JavaScript yPitonall experiences are powered by language services that run natively in the browser. With these programming languages, you will get the "GOOD"Experience more rich single file completions, semantic highlighting, syntax errors, and more.
Better: For many "web" languages, such as JSON, HTML, CSS, and LESS, the coding experience in vscode.dev is almost identical to that of the desktop (including the Markdown preview!).
extensions
Most UI customization extensions like themes, keymaps, and snippets work in vscode.dev and you can even enable roaming between the browser, desktop, and GitHub Codespaces viaSettings Synchronization.
Extensions that run Node.js code that use OS-specific modules, or shell out local executables, still show up in search results, but are clearly marked as unavailable.
That being said, there are a growing number of extensions that have been updated to work in the browser, and there are more every day.
Use: If you are an extension author and want to make your extension available in the browser (we do!), check out ourWeb Extensions Creation Guide.
For example, himLuna Paint - Image EditorThe extension allows you to edit raster images directly in VS Code. The extension brings rich design tools (e.g. layer and blend tools) to VS Code, and of course you can save images to your local drive.
HeGitHub Issue NotebooksThe extension brings the Notebook experience to GitHub Issues. With that, you can embed queries, results, and even Markdown that describes the purpose of the queries, in a single editor.
GitHub
Many extensions for VS Code work with the source code that is stored on GitHub. For example, himTour Codeextension allows you to create guided walkthroughs of a code base and theWikiLensextension turns VS Code and its repository into a powerful note-taking tool (with two-way links). For easy access to your code on GitHub, VS Code for the web comes with theGitHub repositories,code spaces, ypull requestbuilt-in extensions. You can make quick edits, review public relations, andContinues into a local clone or better yet, to aGitHub code space, if you want more powerful language experiences or need to build, run, and test your changes before merging commits.
Wow, sounds a lot likegithub.devIt is not like this? They are different? The same? Because two??!!
Good question)!github.devis a custom instance of VS Code for the web that is deeply integrated into GitHub. The login is automatic, the URL format follows that of github.com/organization/repomodel so you can simply change.coma.devto edit a repository, and it's customized for GitHub with both light and dark themes.
In addition to GitHub repositories, VS Code for the web supports Azure Repos (part of Azure DevOps). To work with both, VS Code for the web supports two paths,vscode.dev/githubyvscode.dev/azurerepos. You don't have to remember that though, just prefix whatever URL you have with "vscode.dev".
For example, changehttps://github.com/microsoft/vscodea 'https://vscode.dev/github.com/Microsoft/vscode'.
For Azure Repos, do the same. Changehttps://dev.azure.com/…a 'https://vscode.dev/dev.azure.com/…'.
Azure Repos support is currently in preview mode for reading repositories, but we are working hard to bring full read/write capabilities as soon as we can.
If you're not on GitHub or Azure DevOps, support for additional repository hosting services can be provided through extensions, just like on desktop. Those extensions, as noted above, will need to support running fully in the browser.
Speaking of URLs...
Just like on desktop, you can customize VS Code for the web through a rich ecosystem of extensions that support nearly every back-end, language, and service. Unlike desktop, it's easy for us to deliver personalized experiences with pre-installed extensions through exclusivevscode.devurl (likevscode.dev/githubyvscode.dev/azurereposas mentioned above).
For example, try navigating tohttps://vscode.dev/theme/sdras.night-owl.
Here you can live the popularNight owlcolor theme by@sarah_edo"live", without having to go through the download and installation process, just to see if you like it. No need to install! If you're a topic author, you can even create a badge on yourLÉAME.mdto allow users to try your theme directly from the Marketplace (learn more atVS Code for the WebUser's guide).
Feel free to use this URL to share your favorite themes with friends. Personally, I'm a big fan of@wesbos'Cobalto2theme, take a lookhttps://vscode.dev/theme/wesbos.theme-cobalt2. note thehimURL only works with themes that are fully declarative (no code).
As you can see,vscode.devURLs are a powerful way to deliver new, lightweight experiences. Another example is that Live Share guest sessions will also be available in the browser through thehttps://vscode.dev/liveshareURL Thesession idit will be moved to the extension to make joining a seamless experience.
The possibilities withvscode.devThe URLs are endless, and we have lots of ideas that we're excited to share with you in the coming months.
Where to continue?
Bringing VS Code to the browser is the realization of the original vision for the product. It is also the start of a whole new one. An ephemeral editor that is available to anyone with a browser and an Internet connection is the foundation for a future where we can truly edit anything from anywhere.
Stay tuned for more... 😉
happy coding,
cris
PS In case you missed it, you can check out ourVS Code for the Weblive broadcast