Hi hello everyone, this is Alessandro from the VS Code
team and today I'm here to talk to you about
the latest innovations that we brought to Visual Studio code
over
the last few months to make sure that you can
work with VS Code anywhere,
anytime and on any device. In particular,
today we'll talk about two things.
The first one is Visual Studio code for the Web,
which we released in October in preview that allows you
to use VS Code in any browser without any setup.
And the second thing is GitHub Codespaces.
Which is a complete cloud powered development environment that is
backed by VS Code and running in a cloud environment
managed by GitHub.
All these innovations that we released over the last few
months allow you to use VS Code and to be
productive no matter where you are and what device you're
on. For example, you could even use them on a
tablet like this iPad that is sitting next to me.
Let's get started by talking about Visual Studio Code for
the Web. To use VS Code for the web,
the first thing you need to do is just to
open a web browser. VS code for the Web
Works with any modern web browser also on tablets on
Chromebooks and other low power devices,
and you just need to go to vscode.dev.
This opens the familiar Visual Studio Code interface that you
might be well used to,
except this is running entirely in the browser and it
is completely self contained within the browser sandbox. VS Code
for the Web doesn't have all the features of the
traditional VS Code, however it does have support for editing
files on the local disk,
including the files that are stored on your laptop as
well as repositories from GitHub and Azure Repos.
In the first part of this demo I'm going to
show how you can open a folder from your local
file system and make changes using VS code for the
Web. So let's click on open folder and I'm going
to select my demo folder which contains a TypeScript project.
And here you can see that the list of files
in my folder are appearing here and I can open
files and browse them and I get a student lighting.
Everything is colored and also hovering when I move my
mouse over.
The items this is great also for editing markdowns and
you can also click on the button to see the
preview and see what the markdown looks like,
rendered exactly like Visual Studio Code would.
With VS Code for the Web,
you can also make changes to the source code.
For example, this is a TypeScript file and you see
I get syntax highlighting.
I get hovers and I also get some limited IntelliSense.
For example, if I try typing array dot you can
see the autocomplete
that suggests what else to type.
VS Code for the Web is not a complete
editor with all the features of VS code.
However, there is a few,
including support for search like I can search for const
and I will see all the results in every single
file contains in this folder you will have the ability
to make changes, save files and you have the ability
to use some of the extensions.
Not every extension works in VS Code for the Web,
but the number is increasing.
Notably, you can use the GitHub extension, LiveShare,
GistPad and a bunch more that are made by Microsoft
and by the community.
VS Code for the Web is great to make small
code changes and changes that don't necessarily require compiling.
In fact VS code for the Web has a limitation
that, because there's no compute behind this–
as I mentioned earlier, everything is running entirely within the
sandbox of your web browser–
certain things are not available.
You cannot use all extensions and also you cannot… sorry
about that.
You cannot use the terminal.
If you try to open that,
it tells you that the terminals are not available in
the Web web editor and this is because there is
no actual shell.
This is not running on an operating system,
it's not running on any compute,
and also because of that you cannot run and debug
code.
We are looking at some experiences to debug and run
specific kinds of application.
Specific kinds of code. For example there is a Go
Playground extension
That allows you to… That I created,
by the way… that allows you to run Go files
using an external service,
the go playground. Nut these are more limited scenarios .For
all these other situations we can leverage Codespaces and we'll
see at them about that in a moment.
One of the things that I wanted to talk about
is how Visual Studio Code and GitHub Codespaces can run
on any device,
and that means also on tablet.
So, for the next part of this this demo I'm
actually going to switch to my iPad and I'm going
to do the rest of the demo from there.
So here I'm working on my iPad.
I am working on this application that has been live
and I got a text from a colleague that the
app is broken.
In fact, as you can see all the images are
missing and this is a big problem.
This is a live application and users are being impacted
right now.
However I'm currently not at home.
I am traveling and my only device that I have
with me right now is my iPad.
So what am I going to do?
Well, turns out with VS Code for the Web and
GitHub Codespaces,
thankfully, there's actually a lot that I can do directly
from my iPad, using a web browser.
So, the source code for this application is stored on
GitHub in a repository that is here,
and I think I know what the problem is.
In fact, to be honest,
it's my fault, I messed up,
but I can use VS Code for the Web to
make this change and fix it right away,
so I'm going to go here and change the URL
to add vscode.dev before the URL of the repository.
And this launches Visual Studio Code
In the browser and it shows my files that are
fetched directly from GitHub and you can see here that
vscode.dev is connecting to GitHub and fetches the
file there and also shows all the list.
…I actually need to refresh with the latest changes.
OK, so I know what the problem is. In this…
…this is the original one…
Sorry about that. So the in this file, which is
the template,
the path here is missing an S, so I'm just
going to add it here and save. This actually get
saved automatically and then when I go to my source
control just like I would in a regular Visual Studio
Code,
I can see the change here that that has been
made. I want to commit with this but I don't
want to make the commit directly to main,
so I'm going to click here to
create a new branch just like I would do on
any Visual Studio Code installation.
And I'm going to create a new branch and call
it
fix-images. Then VS Code is asking if I want to
switch to another new branch
maintaining all the code changes and I'm going to say
yes.
This reloads the window. And you can see that
I am in the new branch that I created and
the change that I made is here and it's just
ready to be saved.
So I'm going to commit this by saying "fixed
image path" and commit. And because I'm working with a
GitHub remote that commit is already made and synchronized to
GitHub.
So if I go to the repository.
You can see that the branch has already been pushed
to GitHub and it's already here.
Now. The next step, of course,
is to make a pull request so someone can review
that.
So I'm going to use VS Code again and use
the GitHub Issues and Pull Request extensions to do that.
I'm going to go here and create a new pull
request.
I wanted to merge the changes from fixed-images into main…
perfect. And I'm just going to add… the title is
already there,
I'm going to add a description.
Fixes live site incident,
perfect. Create. And this creates a pull request directly with
GitHub.
And it's here so I can review it and and
I can also open it it with with the GitHub
UI to be able to see that the pull
request is here. So this is perfect.
However, I don't want to merge this pull request just
yet.
I already messed up the live site once,
so I want to be sure that this is actually
working.
So how can I test my code and make sure
that it is working when I'm working on an iPad
that doesn't have any IDE,
doesn't have a terminal, doesn't have anything that I can
use to test the code.
Well, for that I can use Codespaces.
So in any GitHub repository.
You can click on the code button and if you
have Codespaces enabled you can launch Codespaces directly from there
or click on "new codespace".
In this case I am going to also do that
inside a pull request.
And this will launch Codespaces which is Visual Studio Code
running within a web browser.
But unlike Visual Studio Code for the Web,
this one does have a backing compute,
so you will see that when the codespace launches,
for example, I get access to a terminal,
I get access to every single extension that is supported
by VS Code,
and I have the ability to build,
run, and debug my code.
So this would be running in just a second.
The files are showing up and here is my terminal.
So because this application is a Node.js application,
the first thing I need to do is to run
NPM install just to make sure that everything is working
properly.
And this will install on all the dependencies… and this
is done. And then from here what I'm going to
do is… I am going to
checkout the… the branch with the fixes. Perfect.
And you can see that on the GitHub extension I
can also see the details of the…
of the Pull Request and see the changes that are
here.
So what I'm going to do… before I merge this,
I want to confirm that everything is working, so I'm
going to start this application which is a JavaScript application,
so I'm going to do node index dot js.
And this will launch the application.
Now the problem is that I'm working in a cloud
environment,
so I can't just open a browser and say localhost
and see the application running.
The good thing is that on code spaces all the
ports are forwarded to my machine,
so I can access them by clicking on ports and
I see here that there is something running on port
3000.
It's the node index dot JS that process that I
launched and there is a local address,
so I can just copy this or click on that
button to open it.
This should launch in one second… and I see my
application and I see that, yes,
the images are actually working.
This time I fixed them and this is all good.
So I'm gonna go back to my pull request.
And I feel comfortable merging it now.
Perfect. And so this is merging a pull request and
this is triggering the GitHub action that deploys the application
to my Azure Web App.
While this is running, it will just take a minute
or two… I wanted to show that Codespaces is the
full experience of Visual Studio code.
You can access that through a web browser… that works
on any modern browser,
including iPads and tablets. You can also connect to a
codespace using the desktop Visual Studio Code application if you
are working on a machine
that does have VS Code installed. inside the codespace
you have all the features of VS Code.
All the extensions. Also the ability to run and debug
by creating a debug file. All the extensions work and
the full Visual Studio Code experience is available.
So let's go back and let's wait for my Action
to be completed and my application to be deployed.
And that's it. The application has been deployed,
so if I click on the URL to my live
site,
you see that… phew! it's fixed and everything is back
and working and the images are shown. So, we fixed
this and we used…
We did this completely from a tablet, that I could
have been anywhere and I could have done this at
anytime with just with the tablet device.
So let me switch back to my laptop.
And this concludes our demo. Today I showed you how
to use Visual Studio Code anywhere, at anytime, and on
any device,
including on my tablet. We used two different things that
were announced over the last few months.
The first one was Visual Studio Code for the Web,
which you can access at vscode.dev using a web browser,
and you can edit files on your local machine or
files that are stored on GitHub and Azure Repos source
control.
Next we moved into GitHub Codespaces,
which is a complete cloud-powered development environment
backed by cloud resources that are managed by GitHub and
that you can work on using Visual Studio Code in
the browser and Visual Studio Code as a desktop app.
To learn more about the GitHub Codespaces and how to
get started,
you can visit aka.ms/codespaces