>> The VS Code Teams original vision was to build
a development tool that could run fully in the browser.
We're so excited to show you that
we've brought that vision to life and it's
available in VS Code for the web or at vscode.dev.
Here I've already gone to vscode.dev and we're
going to see that even though it's in my browser,
it looks like the VS Code I'm
already familiar with in the desktop.
Now there's a ton of different great things I can do in here.
For instance, I could go ahead and choose
to open a folder to work on my local files.
I'm going to go ahead and open up
this HTML project that I've been working on.
Now, once I grant permission to the browser,
I can view these files.
I want to go ahead and work on some 16 colors.
I'll get a color picker, which is super convenient,
so let's go ahead and say I want to change
the header in this site to this red color.
I'll be prompted to save my changes and over here,
I've already been working on the site.
I'll reload and boom.
We can see that the change took effect.
Beyond just local files,
I can also work on repositories
stored elsewhere or different remote repositories.
Let's say I'm working on this GitHub repo.
What I can do is I can prepend vscode.dev to any GitHub URL,
and we're going to see that it loads up in my VS Code environment.
We're going to see that the files populate in the explorer,
I have the readme here.
I may get the same experience of being able to
open preview on the sides as I make changes,
I can preview those changes.
All those kinds of awesome things,
and are taking a closer look at these buttons on the left.
It's going to be the same activity bar that
we're used to in desktop VS Code.
For instance, I can go ahead and search
my app and I can even get multi file search by enabling indexing.
I'm going to have access to source control,
so if I want to go ahead and say I'm really excited about set up,
add an explanation I can say
Update readme and just directly commit that change.
Now, beyond just GitHub repos,
we also have the power in VS Code for
the web to work on Azure Repos,
which are stored in Azure DevOps.
Again, I can just go ahead and prepend vscode.dev to that URL.
Now we're going to see that it looks just like
the GitHub editing experience.
My files populate in the Explorer.
I can work on them, view them.
I'll get different syntax highlighting and language
support in the browser, all those things.
Also navigate between different repos
directly in VS Code for the web.
So over here in
the repo indicator on the lower left because they open
remote repository and I could choose
different repos from GitHub or Azure Repos directly.
If I escape out of that,
we can also see I have other options.
One thing to know about VS Code for the web
is that since it's running entirely in the browser,
there isn't any backing compute,
which basically means you won't have access to
certain VS Code functionality from the desktop where you do
have compute so you wouldn't be able to run
your code or you wouldn't be able to have access to the terminal.
If I select continue working on from
the terminal or from that remove indicator menu,
I'll see different options.
For instance, for Azure Repo,
I could implement locally,
if I was working on a GitHub repo,
I'd also get the option to continue in a GitHub codebase.
We can see it in the URL we have
the same pattern that we follow and it's
vscode.dev/ and then some service or project.
For instance, here it's
/Azure Repos and the GitHub example it's /GitHub.
Now these special URLs are called routes
and now beyond just the GitHub or the Azure Repos routes,
we're also going to have a variety of
other routes that can give us this awesome,
customized VS Code Dev experience.
For instance,
there's this theme that I've been interested in trying out,
and I can go ahead and say this vscode.dev
slash theme is the route and the identifier of the theme.
What we're going to see is we have some sample files that load
up and VS Code Dev is going to
give us this preview of the theme in the browser.
Now we have our preview,
and we can choose if we'd like it and
we want to keep using it, we can keep.
If we want to keep exploring some other themes,
we don't have to keep it.
Now beyond themes, there's a variety of other extensions
that'll really make your web experience even more powerful.
For instance, if I open up here,
we're going to see that we have
this /codetour route and
this route is going to be populated with Dakota extension,
which gives us these awesome steps to navigate
more easily through a repository.
You may be thinking, hey, this looks really cool.
Can I just use any extension that I
already use in desktop in the web?
And the answer is it depends.
As an extension author,
if your extension is more than
just a theme or a snippet or grammar,
you'll want to make sure that it's web enabled and we make that
super easy and straightforward through this document here.
This will give you the entire rundown of how to
make sure that your extensions are going to work in the browser,
different steps to take and they're going to be
structured pretty much just like your regular desktop extensions,
just with a few additions.
Thank you so much for joining me for
this quick overview of
the awesome features of VS Code for the Web.
We'd love for you to go try it out.
Just go to vscode.dev and if you're an extension author,
please go ahead and check out this web extension authoring guide.
Thank you so much and happy coding.