And in this video we're going to look...
Oh, this is embarrassing. Okay, one moment. Yes, Maddy? Yeah, I'm
recording a vid... A NodeJS intervention...? Hair extension...! All right, but I'm about to...
A VS Code extension?! Are you sure? And I can announce
it right now. All right, thank you. So this just in! We have an official VS Code extension that allows
you to build .NET MAUI apps with VS code. Let's go check it out right
now. Yes, you've heard it right. There is
now a official Microsoft Visual Studio Code extension that will allow you to
develop your .NET MAUI apps on any platform that is supported by
VS Code basically. So at the time of recording a couple
of weeks ago, the C# Dev Kit was released, which was really
an amazing extension already, which brings feature rich experience
to VS Code for developing C# projects, C# and net projects. So you
could get all kinds of crazy things like the Solution
Explorer, the Test Explorer that you're used to from full Visual Studio. You will get
Roslyn analyzer stuff, AI powered goodness. So all this good
stuff bringing over from Visual Studio full.
So that the experience for developing .NET projects and C# projects is also
an amazing experience on VS Code. Now on top of that, we've built the .NET MAUI
extension. So now with the .NET MAUI extension you can also build your .NET MAUI apps
on Windows, on macOS and also yes, I'm going to
say it, on Linux. Well, more on that in a little bit
later. So we have this extension which is really cool. It brings a couple of
those extra things that are in Visual Studio full. I just keep it
naming it Visual Studio full. Like selecting your emulator and your
Simulator of course some IntelliSense as well. The XAML
editing experience is a little bit lightweight. We'll see
that. But actually let's just stop talking about it and show you because
I'm sure you're excited to try it out yourself. So I'm just going to
give you the highlights and then I'm going to let you go and explore for
yourself. Let's hop over. So not in Visual Studio 2022 this
time, but in Visual Studio Code. I have the iIsiders version which is
kind of like the preview version of VS Code. But this works for the regular
stable version of VS Code as well. So here I have the extension.
If you go to the Extensions pane on the left here, you can find
.NET MAUI in the store. I have it already installed, so it's
under installed for me. But you can find it, this fancy logo. Click the install
button and it will bring in everything that you need.
Well, it will bring in the extension. So the C# Dev Kit, if you don't
have that already and all the extension that it depends upon, it
will bring that in. But it won't set up your entire environment for like Android
specifically, it won't install all the prerequisites
like you might have been familiar with, with full Visual Studio because that's just not how VS Code
kind of like works, I guess. But more on that in a little
bit. So here is a full description. I'm not going to
read anything. I'll just give you the important bits. So here is this
feature list and here are the supported kind of like platforms.
So there is one important thing different from
Visual Studio. Visual Studio full for Windows, you
could typically connect to your Mac build host which could be
on the network and you could build your iOS applications on your Windows
machine. That's not possible with this VS Code extension.
Hopefully, I hope something like that will come. But for now you can see
this kind of like matrix here. So we have Windows and you can deploy
to Windows and Android. When you're running VS Code on macOS, you can
deploy to Android, iOS and macOS. And when you run on Linux, because VS
Code runs on Linux, you can deploy to Android. So just to
be very, very clear, you cannot write .NET MAUI apps that will run on Linux,
but you can open your VS Code on Linux and you can write apps
on Android, right? So you can now do cross
platform development, at least starting with Android on Linux as well. That is very
new. Now, not the most fun thing to talk
about, but some known limitations. So the XAML editing capabilities, I
already mentioned them, a little lightweight. We all know the XAML by heart, right? So we can just type it
and it will of course work, but it will not do all the code
completions and IntelliSense and that kind of stuff is being worked on and we will
improve that in future releases. This is a preview release. Right now.
You can't switch the target framework for IntelliSense. So I might
show you that in a little bit. But if you have like in full
Visual Studio, you have that combo box now, that drop
down box which will allow you to switch the context between the
platforms. So if you want to have IntelliSense specific for iOS, then you select iOS
there and it will give you that. That doesn't work yet for VS Code.
It's coming, we're working on it. But right now, if you really need that
IntelliSense, just go into your csproj, into the TargetFrameworks
tag and move the framework that you want to see the IntelliSense
for to the front of the list. And you will get the IntelliSense for
that. If I remember. I will show you that in a little bit. XAML and .NET Hot
Reload aren't supported yet. We're working on that. And the
extension has not been fully tested with iOS and Xcode betas. So we have the betas
right now for iOS 17. At the time of recording, we
didn't fully test it with that. So make sure that you're using the stable ones
or use it with the betas and let us know if it actually works already
that would be super cool. Now if you found a bug we're doing this for you
and with you and we appreciate all the feedback. You can also report it
through VS Code also for this extension which is really
cool. So you can go to Help and then Report An Issue and then you can
choose here Bug Report, Feature Request Performance
Issue and you can select the source. So if you have anything in Visual
Studio Code definitely report that as well. But if you want it for this extension,
do An Extension, click the .NET MAUI one and now you can enter a
title and a description and we will get all the information to
hopefully get it fixed soon. So now with that out of the way, let's
just see whenever you install it what is going to
happen. So let's close this Extensions pane and this overview and you will get this
great walkthrough tutorial. So I'm not going to walk you through
all the steps. Like I said, there is some more manual steps if you
have not set up .NET MAUI on your machine. So
if you have installed VS full whether on macOS or on Windows it should mostly just work because that
have brought in all the prerequisites. But otherwise this will walk you
through all the steps. So if you have a clean machine you just install Vs
code. This will walk you through all the steps. If you can't figure it out,
please let me know down in the comments and I will make a follow up video
where I walk you through it in more detail. First we have to connect
our C# Dev Kit account. So click Connect. My account is
already connected. You can see a little pop up here coming up in the bottom
right? Else it will pop up a browser window. You have to
log in with your account because this is tied to C# Dev Kit. So this will
follow the same licenses as full Visual Studio so you can use
it for free. Visual Studio Community is for free. If you have a company
license for Visual Studio you can log in with that account and you should be
able to just use it. Check we've got that. Set up your net environment
so if we go to that it will make you check your net version. You
can click here to create a new terminal.net version. See what you got installed.
You can even click the Install .NET SDK button here and actually install it
from right there. I'm pretty sure that I got it set up. So I have it set up your
.NET MAUI environment so you can open a terminal and check your dotnet
workload list. So actually let me do that. I'm going to copy this right
here. Open a terminal. It will open the integrated terminal of VS code.
And I can just copy dotnet workload list and it will show me a
couple of .NET MAUI options. I already got that set up. If you don't see
anything here, there is the command right here at the top which says
dotnet workload install maui. That will bring in all the bits. Or if you're running
on Windows, it's still kind of like the preferred method right now to
install the Visual Studio IDE, check the .NET MAUI workload and that
will bring in all the dependencies right here if you're on a Mac. Also
make sure that you have Xcode, right? So this will walk you through
it. Create your .NET MAUI app. So now we can create our first .NET MAUI app.
You can go into a console, you can do dotnet new maui or you can
just do it from here inside of Visual Studio. So let's do that.
You will get this command palette. That's what it's called in Visual Studio
Code. Create new project. And you see all the templates, well, a
couple of the templates for C# and .NET. And now you also see the
.NET MAUI and .NET MAUI Blazor Hybrid ones. So let's just click this one, go
into a new folder. I'm going to create a new one...
mauivscode. Go into this folder, select folder and
it's going to ask me to name my project. So MauiApp1,
that's fine. And it's going to create this project.
Now for me. It's going to reload this VS Code window and it's going to open
this .NET MAUI app for me. I trust the authors. Yes, I'm a very
trustworthy person. And now we have this MauiApp1.
It's open for us. Now there is a bug for me because I'm
using an internal version else. I couldn't get you this
video on time. But I think in the version that you're going to see, this
bug should be solved because I have a solution file here right now which
is named after the folder that I just created. And I have a subfolder
which also has a solution file which is kind of like two, which is not
great. You shouldn't have to do that. VS Code was very helpful though. I'm
going to get myself out of the way. It popped me a notification with like
hey, there is multiple solution files. Which one do you want to open? So I
chose one to open. Just go with this MauiApp1 and it's going
to open that solution. And now you can see Visual Studio Code has
this bunch of folders, just a tree view with the files and folders
in there. But now we also have the Solution Explorer which looks
more like how you're used to with Visual Studio full, right? So you
have the solution, you have the project and under that
you will have the dependencies and all the folders and the XAML files and the
CS files. So we got all that and I can go into this
XAML. We will get the highlighting and stuff, but we will not get the
IntelliSense yet. So if I want to do this background color, this won't
really work yet. But of course we know
everything from the top of our head. So we can just add this background
color. Now what's really cool is that we can just run this. So we
have everything right here, the editing and everything is just as you're used
to. So what I can do now is go over to my run run and debug pane
and I can just say, hey, run and debug. Or you can press F5
and it will come up with the options. Hey, what profile
you want to run with? Oh, actually that happened before, but now it remembered
that I want to do this with the .NET MAUI profile. Else you would get
the command palette and it would say like, hey, what do you want to run this
with? And you say .NET MAUI. And now it's going to run the Windows
target by default, and it's going to deploy the
application, and my Windows application is going to come up, and I can debug through it
if I want to and do all the things well, not all the
things, but a lot of the things that are also in the full Visual
Studio. But now from the lightweight editor, that Visual Studio
Code. So that is very, very cool. You can see the debug
console. All the output is coming by. My application is coming up and I can
just go through this. I can go back to Visual Studio Code, my main
page, the code behind, set a little breakpoint here,
click this button again and boom, we are landing in our
breakpoint. And I can walk through this, I can inspect the variables
here. You can do all these things. So one thing that is not really easy
to discover is the selection of the emulators and
where you want to run to. So if I get out of the way
here again, here in the status bar, you can see already
Windows local machine by default. This is not there. You have to click
the curly brackets right here. And when you want to have easier
access then you want to click this pin right here. So if I
don't do that, you just have this and you can select the debug target.
And if you click the pin it will be a little bit more clear and easier
accessible here from this status bar right here. And you can click it
and that will bring up the command palette again. And you can go through
these Pixels and that kind of stuff, right? So you can see all the
devices here that are connected to your machine and actually select the one
that you want to run on and what's really cool. It's just one of those very
small wins. But now, especially if you are running on iOS,
you have like a ton, a gazillion items list of all the iOS simulators, right?
Or you could have that. Now you can filter through it
something you couldn't do before. So if I just type typing Pixel, you see all the
Pixels, right? So I can just select one of these. It's just a very small thing
that comes free with VS Code, basically. But this is very helpful to
me. So you can just switch over to the Pixel one, start running that one
and you have the same thing. So there is that the last
thing before I hop over to macOS and just show you how it works?
There is I want to show you how to get the IntelliSense for a
different framework. So go back to your files and go into your csproj
file right here. So this is what I meant. Now we would
get the IntelliSense for Android specifically first. If you want to
have it for iOS, just make sure that you get this one for iOS and put that in
front of the list. Save it, it will reload your project.
And now we will have the iOS IntelliSense at the front,
right? So that's all that. Now let's quickly hop over
to macOS and see how it works there. So here we are on macOS and you can
see it looks the exact same. So this is very boring. VS Code
looks the exact same on all the platforms. So that's really
cool here. I'm also running on dark mode. So it also works on dark
mode. It has dark mode support. Yay. And the thing that I didn't just
really mention is that you can also select your Emulators and your
devices in another way and trigger some more functionality. If you press
Command + P or Control + P on Windows, you will get this
command palette right. You can go through the files. This is really your best friend
if you learn how to work with VS Code. So go look up those VS Code
tutorials or let me know down there in the comments if you want to see
more content on that. But you can not only skip to files and do all
kinds of amazing stuff with this, you can also trigger commands. You
just type an angle bracket. And now you are suddenly going to execute
commands right here. And you can prefix it with the extension name. So you
have to do MAUI or you can .NET MAUI, it will filter the list. And
now you see all the commands that have to do with the .NET MAUI
extension. Like pick iOS device. So you can pick your devices like this or
configure Android. So if you're starting from scratch and you need some help
with oh, what should I do to you? Set up my Android environment do this,
it will bring you to the next steps and you can learn more and set all
these things up just to get you started. But you can also select
all these things. So pick the Android device, pick iOS
device and it will already filter it to those devices where if I do iOS device
right now, you can see that it has all these devices. And this is
what I meant. This is like a long list, right? But now what I can
do is say iPhone 14 Pro and there you have it, iPhone 14
Pro. I can go back to running here, run my .NET MAUI
profile. It starts building all the things and it will
come up with the iPhone 14 Pro simulator and you can actually run and
debug all the same things that you're used to. Like with
Visual Studio for Mac. But now from VS Code. So this is how to get
started with VS Code in .NET MAUI and all the things.
I don't even know what I'm saying anymore. Let's just close this video
and let you explore for yourself. You might be able to tell that I'm a tiny bit
excited about all of this because I think this is great. People have
been asking for this since forever and now it's finally here. You can develop
.NET MAUI apps in this lightweight, great editor that everyone loves VS
Code. So go get that extension. It's out right now as
you're watching this video. So go get it. There's also a blog post
that explains all of this and a documentation page.
Actually it's a documentation page of regular .NET MAUI. So just go to
https://learn.microsoft.com/dotnet/maui and there you will now find new tab
with the Getting Started for Visual Studio code which list all
the things that you should know about this. If you can't figure
something out, let me know down in the comments below. That will be feedback that I
can bring back to the team. But also I'm going to try and help you out to
get started with this. Please let us know what you think about this VS
Code extension. I think it's super duper cool. Just don't even watch a next
video from my channel this time. Just this once and
go check out this Visual Studio Code extension. See you for the next one.
