Announcing the public preview of Visual Studio Code for the Web, a new web-based code editor that runs entirely in your browser with no install. Everyone can use VS Code for the Web for free at //vscode.dev to quickly open and browse source code on your local machine, or hosted on GitHub or Azure Repos, and make and commit lightweight changes.
VS Code for the Web does not have access to compute resources, so you won't be able to build, run, or debug your application, nor you will be able to use the integrated terminal.
VS Code for the Web can be "upgraded" to a GitHub Codespaces instance in those cases when you need to leverage a more complete VS Code experience, including the ability to build and debug your code, use all VS Code extensions, or access the integrated terminal. Additionally, you can start working on the Web and continue your work on a VS Code desktop app.
Launch VS Code for the Web
Read the announcement
Our 64-bit upgrade
Take advantage of all your computer’s resources to scale Visual Studio to the largest of projects and complex workloads without running out of memory. You can continue to run and debug your 32-bit apps.
Comes with .NET 6
Develop cross-platform apps with C# and .NET MAUI. Build responsive Web UIs with Blazor. Build, debug, and test .NET apps in Linux environments. Use hot reload capabilities across .NET apps. Edit ASP.NET Web pages with Web Live Preview.
C++20 Support
Visual Studio 2022 comes with our latest toolchain for targeting C++20 and is binary-compatible with 2022. Develop cross-platform C++ projects from Windows and leverage the best the ecosystem has to offer.
Best IntelliCode yet
IntelliCode now automatically completes larger chunks of code, up to a whole line at a time, by understanding your coding context better, and leveraging the wisdom of nearly half a million open source repos’ code patterns.
IDE built for you
Visual Studio 2022 has a refreshed look with new icons and theme that’s improves clarity and consistency, while keeping familiarity. More than what comes out of the box Visual Studio has 100s of options for you to customize to make Visual Studio truly yours.
Enhanced Debugging
Unlock your potential as a developer with debugging tools that empower you to quickly diagnose issues. Use async visualizations, automatic analyzers, time travel debugging, and a dozens of others tools.
Did you know you can view a live-reloading browser preview right inside of Visual Studio Code? Well, with the Browser Preview extension, you can do just that. Setting up your Visual Studio Code browser preview is just a few clicks away. Let's see how to do it.
Why The Browser Preview Extension
As someone who records lots of videos, I'm constantly searching for the best way to display both my browser and my VS Code window at the same time. Most often, I end up switching between the two applications with shortcuts. This works fine but it can be a bit hard to follow for a user.
Want to learn everything you need to know about VS Code? Check out the Learn Visual Studio Code course
Alternatively, I've also tried setting VS Code and Google Chrome to take up 50% of my screen so they can sit side by side. This is fine too, but with the Browser Preview, you can get the same type of view right inside of your editor.
Install the Extension
Start by opening the extensions tab inside of VS Code. Then search for Browser Preview and click install.
Use the Extension
Now that you have the extension installed, let's see how to use it. This extension basically opens a [headless] browser window inside of VS Code. So, you'll need to start your application locally with a live-reloading server. If you're using react, angular, vue, etc. they come pre-packaged with a live-reloading server.
If you are using vanilla JavaScript, you can use the Live Server extension to serve your site from a live-reloading server.
Learn more about how to set up the Live Server extension in VS Code!
With your application and server running, now you can open the browser preview. Open the command palette [control + shift + p on Windows and command + shift + p on Mac] and search for Browser Preview: Open Preview.
Now, you can type in the url of your app in the browser. Here's my Quick Quiz demo running at localhost:5500.
Check out this FREE course if you're interested in learning to build a Quiz App with HTML, CSS, and JavaScript
Wrap Up
So that's it. Now you have a live-reloading browser preview of your app right inside of VS Code. I'm curious, are you using the Browser Preview or Live Server extension? Let me know on twitter, @jamesqquick.
FeaturesThis extension provide preview of HTML which execute on web server. When you save files, this extension automatically reload browser or side panel [live preview feature]. You can call these features from the context menu or editor menu. The main features are as follows.
Extension SettingsDescriptionThis extension contributes the following settings:
Simple example{ "previewServer.browsers": ["firefox", "chrome"], "previewServer.ignoreDefaultBroswer": true, "previewServer.port": 9999, "previewServer.ui": { "port": 3001, "weinrePort": 8081 } }Settings with workspace{ "previewServer.startupProject": "Product" } { "folders": [ { "name": "Product", "path": "foo" }, { "name": "Test", "path": "bar" } ], "settings": { "previewServer.startupProject": "Product" } }How to build locally
Known IssuesPreview on side panel somethimes don't work with CDN, Link etc. AcknowledgementsThis extension use browsersync. I would like to thank browsersync team for useful work. LisenceMIT |