Can I develop my .NET MAUI apps with
Visual Studio Code? Is a question that I get asked all the time and the
answer is... No. But something might have changed. So
let's check out this video and explore what our options are for using .NET
MAUI with VS Code. Because .NET MAUI is now a first class
citizen in the net ecosystem. It's integrated so fully inside of all
the command line tooling. So you can dotnet new maui and you can
do dotnet publish for your .NET MAUI apps and that means you
can also use it from VS Code, right? So you can open the
files, obviously, because it's just a text editor. You can do all the things
there. And then with the command line you can do your builds and check if
everything is okay. It was also announced with the introduction of .NET MAUI
that the best experience, for now at least, will live in "full" Visual Studio. So.
Visual Studio on Windows. Visual Studio for Mac. And that will
be the tools that has the full integration with all the emulators and all kind of
set up for that and the Hot Reload and all that kind of stuff,
right? So if you want to have the best experience, you have to
go to the full Visual Studio which is available for free. So you
can still get started with .NET MAUI entirely for free. But there
is a lot of fans out there for Visual Studio Code and for
good reason because it's a wonderful product. So how cool would it be if
you could also do .NET MAUI development inside of Visual Studio
Code? And now you can. So let's hop over to my
machine and let's see what this is all about. Now if you've been
following my channel for a while now and if you haven't, then maybe you want to
subscribe to my channel for all kinds of wonderful .NET and .NET MAUI content. Then you notice that I'm doing this on
a Mac. I've been on Windows for a little while, but I decided to demo
this on a Mac for just no other reason than I have my Mac in
front of me right now. But everything that you see here also works on
Windows. With the exception of seeing the iOS
simulator here, I don't think this extension will connect with
your Mac. That's one of those things that
definitely works in Full Visual Studio but not in this extension yet. Maybe it
will come, I don't know. But here you can see Visual Studio
Code already open on the left and I already have this extension
installed. So I'm talking about .NET Meteor which is kind of like a wink, a
nudge to Comet which is our solution for .NET MAUI MVU, right? And they also
have an extension that also already allows you to run
.NET MAUI applications through VSCode but it's a little bit more
tailored to it using Comet and MVU. I have a video on that as
well. It should pop up on your screen right now. I think this is
actually a fork and now they're kind of like developing from there
specifically for .NET MAUI apps. This is done by Nikita Romanov.
So thank you so much for doing this. Already 1500 downloads,
very good ratings. You can see I zoomed in this window
here a little bit. Very good ratings. So a lot is going on here and what it
has right now is you can do all kinds of .NET 7, .NET 6 apps, debugging including WinUI, .NET MAUI, native C#, Android, iOS, Mac, Catalyst and deploy them to devices
and Emulators. So that's kind of like the the core of this extension. It's
fast and responsive. It does not require you to install the
OmniSharp code extension separately. So something is built in
for this. I don't know exactly how that works. It shows all your projects and
it works on Windows, Mac and Linux. So you can
also do this on Linux. I haven't tested it. It has
been tested on Ubuntu. Let me know if you want me to test
this for you and let me know down in the comments and let's
see if we can how far we can take .NET MAUI development on
Linux. How cool would that be? Let me know if that's something that's
of interest to you, then run the application. I'm going to show you
this in a little bit. But this is all stuff. So there is a little bit of an
important thing down here with the limitations. Hot Reload is not
available but they're working on it. So that would be ultimate,
right? That Hot Reload would be in here as well. And XAML
IntelliSense is not available at the time of recording this. I've
already seen a PR on the repository for this extension. It's all open source. You
can contribute if you want. And I saw there is already a PR that
adds the XAML IntelliSense as well. So that is really amazing.
Now I've already installed this so it's just a matter of going to
the extensions pane right here in Visual Studio Code. It's just
this couple of blocks right here. Search for .NET Meteor, click the install
button and you should be ready to go in seconds. Then what I'm going
to do is bring up a little terminal. I'm going
to press CTRL back tick (CTRL + `) here. You also have an option in
the menu. So make sure that you get a terminal or open a separate
terminal that's not integrated in VC Code. That works as well. I'm going
to create a directory. So make their well actually no, I'm not going
to create a directory. dotnet new can do
that for me. So I'm going to do dotnet new maui and then I'm going to say -n vscodetest. So this is going to create a new
.NET MAUI project and it's going to name it vscodetest. And
because I do dash N (-n), which is the name, it's also going to
create a subfolder in the current folder that I'm in. So now
I can go into change directory to vscodetest, and that folder should be
there. And now what I can do is open that with code. And
did you know that you can do -r so it will reload it in the
current window. So if I do that, it's going to reload the
current Visual Studio Code window instead of opening a new one. Now
you've learned at least one thing in this video. So now you can see the contents
of this new project, which is just a file new .NET
MAUI application. You can see some things are building
here already, but the really cool stuff is here, not these warnings
here. So I'm going to close those is here, down at the very bottom in this
status bar. So you can already see we have the debug and the
release. So this is coming from our .NET Meteor. I can select if I want to
run a debug or a release build. And here you can already see
Android accelerated Oreo. So I don't know, what does that
do? Let's click it and you can see it's fetching devices.
It's going to go out to my Android SDK. It's going to go out to my iOS
Xcode installation, and it's going to list all these
devices right here that I have installed. So again, the full Visual Studio
experience will install all this stuff for you. Or it will at
least tell you like, hey, it's there, it's not there. This is.
Now if you want to use this, your responsibility to have this
installed, the Android SDK, all the prerequisites. But if you have that,
then you can see that I have all this stuff. I can just select my
macOS, my MacBook right here, and it will start running the Mac
Catalyst one. Or I can select all the iPhone ones. And because this is just
the Visual Studio Code interface, I can just start filtering
like this iPhone 14... And this is the one that I have open.
You can also see the icon is a little bit different. It actually
sees that it's running right here. So I could just select that one. Now
there's one more thing I need to do before actually running this. So
let's go over to this run menu, the debug pane right here. Run
and debug. And whenever you do and you don't have a launch.json
yet, it will give you like these options. And you
can here click Create a Launch.json file. Now if you don't know what
that is, this will create a .vscode folder inside of your project.
You'll see that in a little bit, which has a launc.json file. And
that's kind of like the definition for VS Code so that it knows what commands
to run to actually start a debugging session for all kinds of
projects, right? So we're going to do it for a .NET MAUI app right now.
But you can also do .NET 5+ and .NET Core, Blazor
WebAssembly, NodeJS, all kinds of things, right? But if you
have installed the .NET Meteor extension, you can also see now the .NET Meteor
debugger. So if I click that it's going to
create this new launch definition which has a bunch of stuff. I'm not
going to go into the specifics here. Again, if you want to learn more about
this, maybe I can consider doing some more VS Code content. Let me know down
in the comments below. But this is all that's needed for a
.NET Meteor build, basically. So this is saved
automatically. And if we go back to the files right here, you can
now see that I have this .vscode folder with a launch.json file. You
can commit that to your Git repository and everyone in
your team can now benefit from this. Just open it in Visual
Studio Code and you can run it from this. Now go back to our Run and Build
menu right here. So this screen has changed. I
now have this Play button right here. You can select other launc.json
options whenever you have them. But we don't have them
right now. So I can just click this run button and it's actually
going to run. So you can see here it spawns a new terminal.
You can see the commands that it's doing and build with all the options
that are needed to actually come up with the debug that we've
configured here down at the bottom. The Simulator that we selected here
down at the bottom. It's going to restore all these things and whenever
it's done, it's going to actually launch it here on this simulator that you can
see here on the right. So you can see the build finished.
Debugger is ready and listening. So I'm expecting the
.NET MAUI app to come up on my iOS Simulator right here. There we
are. It's going to launch and we have a fully functioning .NET MAUI
application now running on the iOS Simulator. Now I already
mentioned that the XAML IntelliSense is not there, Hot Reload is not there.
So that's a couple of things that if you've been working with full
Visual Studio things that you cannot do right now. But all the other things
you can just debug through here, you can set breakpoints as well. So I
can go into my main page. I can set a breakpoint here in my
OnCounterClicked and whenever I do, you see that it breaks. I can step
through it. I can do all these things. I can just press
continue. I can change some code here. I get
full IntelliSense for the code at least. So I get this button. I can set the
text color, do SetAppThemeColor, you can see this is
really the .NET MAUI APIs right here. So I have all that and the
IntelliSense for XAML, and Hot Reload is
apparently coming, but at least this will give you the basics and be
able to debug and run your .NET MAUI
applications from Visual Studio Code. Now, I already said you can also definitely
select the Android one right here. So the Android emulator,
it will work all the same. You can do all the stuff on
Windows as well. So .NET MAUI for Visual Studio Code? This is how to do it. Now, while this
is very early days, you can do the basics already, right?
And it worked brilliantly. I just installed the extension, I
selected my Simulator, created a new project, but
it will also work on an existing project. I actually tried it on the .NET MAUI
Community Toolkit project sample, which is in no way prepared to
run on VC Code or any of that. So I just
plugged in that launch.json file on that repository, started the
application and boom, it ran on iOS. Now, truth be told, I had some issues running it on
Android, both for macOS and on Windows. I reported those
issues on the repository, so hopefully those will be fixed soon. I'm not sure if
they're very specific to me because my setup development machine is kind
of a mess. So maybe I just have some weird SDK
installation going on and it works perfectly fine for you. Let me
know down in the comments what your experience is, but I have high hopes
for this, that new features will be added and I mean, you
can already start with this today, right? You can
start debugging, you can start running, selecting your emulator
on Visual Studio Code. And to be honest, I'm very curious if this will
also work on Linux like is promised. So again, let me
know in the comments if that's something that you want to see as well. But even if
you don't let me know in the comments, I might just make that
video just for me because I'm very curious to find out now. Thank
you again so much for watching watching one of my videos. Please click that like
button so that all the people can learn about VS Code and .NET MAUI so
that even more people can now start it. Get started with cross
platform development with .NET MAUI, which would be really amazing.
Subscribe to my channel if you've liked this video and you want to see more and
hold on, hold on. Don't go anywhere yet. Check out this playlist right now
for more .NET MAUI content. This video is recommended by how the
moon stands and the stars are just for you today.
And I'll be seeing you for my next video.
