What do you want to learn? Leverged jhuang@tampa.cgsinc.com Skip to main content Pluralsight uses cookies.Learn more about your privacy Using Visual Studio Code for ASP.NET Core Projects by Shawn Wildermuth ASP.NET Core let's you run your code anywhere. Wouldn't it be nice if you could write your code anywhere too? That's where Visual Studio Code comes in! Start CourseBookmarkAdd to Channel Table of contents Description Transcript Exercise files Discussion Learning Check Recommended Course Overview Course Overview Hi everyone. My name is Shawn Wildermuth, and welcome to my course on Using Visual Studio Code for ASP.NET Core Projects. I've been in the business for over 30 years, and I'm the owner of Wilderminds. If you're an Agile developer who wants the tool not to get in your way, then Visual Studio code might be for you. It works with ASP.NET Core, but also a slew of different project types no matter what operating systems you use. In this course, we are going to show you how you can use Visual Studio code as your development environment frivoled in great sites and APIs without the heft of full Visual Studio. Some of the major topics that we'll cover include installing Visual Studio code in ASP.NET Core on Windows, Mac OS, and Linux, generating new ASP.NET Core projects without Visual Studio, debugging both server and client code, interacting with databases with Visual Studio code, and effect use of Visual Studio code extensions. By the end of this course, you'll be ready to use Visual Studio code for your ASP.NET Core projects. Before beginning the course, you should be familiar with ASP.NET Core. I hope you'll join me on this journey to learn Visual Studio code with the Using Visual Studio Code for ASP.NET Core Projects course, here at Pluralsight. What Is Visual Studio Code? Introduction Welcome to using Visual Studio Code for ASP.NET Core Projects. In this course, we're going to introduce you to the tool called Visual Studio Code. We'll install it on Windows, Mac OS, and Linux and then explain how to use it to create ASP.NET Core projects. We'll be creating projects from Scratch, we'll be debugging, and we'll be working with data stores. In addition, we'll customize Visual Studio with some of my favorite extensions. Visual Studio code is a lightweight IDE developed by Microsoft. It is open source, Cross-platform, polyglot, free, has plenty of community support, and a large catalog of extensions. The idea behind Visual Studio Code was a way to allow people to do development across a variety of languages and platforms. Whether you're using a Mac, Linux, or Windows, they wanted the same experience on all platforms, whether you were doing PHP or WordPress development, ASP.NET, or even writing Java, they wanted to allow all developers to be able to use a fast, but lightweight tool. Unlike the full product, Visual Studio, Visual Studio Code is a lot less lightweight, so it doesn't have some of the bells and whistles that developers have learned to rely on. Visual Studio Code is also perfect for those developers that want to get closer to the medal and are comfortable using command line tools and tools from outside the Microsoft ecosystem. Let's get it installed. Installing Visual Studio Code - Windows We're going to start off by installing Visual Studio Code. We're going to install them in order on Windows, on Mac OS, and on a Linux distribution. If you're using one of the other operating systems, feel free to click to the next clip to find the Mac OS installation or to the clip after that for the Linux installation. This video is going to be about installing it on Windows. We're going to start by just opening up our browser to code.visualstudio.com and this will take you to the Visual Studio Home. The Visual Studio Code team is iterating very fast and so it has two versions, a stable build and an Insiders edition. The Insiders edition updates itself much more frequently and gives you access to early features. We're going to go ahead and download the stable build. If this didn't detect your correct operating system, you could also pick the different installers that you see here, but let's go ahead and click on the download for Windows, it will download it, and it's also going to show you how to get started pretty quickly with extensions and first steps and I'll assume that you're going to read that on your own. Let's go ahead and run the installer. It's a standard installer, accept the agreement, which of course, I've read meticulously. I'm going to let it live in the regular directory. There is some additional tasks, and the one that's most important is Add to PATH. You're going to want to click on that Add to PATH it's clicked by default so that you can use it in any console. There are some other options here for adding open to code to the context menu and to directory context menus, etc. I usually don't turn those on and I don't even have a desktop icon. I'm going to be using code from the command line more commonly and I'll show you how that works once we're done. Now if you say finish, it'll go ahead and just launch Visual Studio Code so you know it's installed correctly. But I'm going to actually close this for a minute and I'm going to just open up a console or a terminal window, whatever you want to call it, and let's go over to our examples and I'm just going to make a new temporary BeginningCode directory. While I could open up the Start menu and look for code and run it, more commonly, I'm going to actually write the word code and then either the name of a file to open up or often the name of a directory, in this case, I'm just going to use period for the current directory and we'll see that it's opened it up here in this directory, and as I create files and folders, it's just giving me a view to those actual files and folders that exist. We'll see how that works after we get this installed on all the operating systems. Let's see how it works on the Mac. Installing Visual Studio Code - Mac Now we're going to install it on Mac OS. So to start installing Visual Studio Code, I'm going to open up Google Chrome or whatever browser you want and just type code.visualstudio.com. Visual Studio will run on Mac OS and you do have options for either the stable or the insider build. If for some reason Mac isn't shown here, it's guessed wrong at your operating system, you could always drop this down and find the Mac OS packet, stable, or the insiders build. We're just going to download the stable build for the course, and once it finishes, let's go ahead and execute it. I'm going to grab that application and I'm just going to put it in applications for now. I can now launch it by just running code in Finder and it's going to complain because I download it on the internet, I want to say yep, please open, and it'll launch a getting started, but if we go back, we can see a full version of Visual Studio Code with some welcome documents and an untitled document. Instead of doing this, more commonly what I want to do is be able to this from a terminal because I'm going to be dealing in certain folders and always opening it through the UI may not be what you want. And so, Mac doesn't automatically install into the path for you, but does allow you to do it directly in code. So one of the commands you want to get used to is Cmd+Shift+P, or Ctrl+Shift+P on Linux and Windows, and there is a special command that's only in the Mac version and it's only in the Mac version because the installer doesn't actually add it to the path, and if we look at this, this is going to have all of the different commands that are available inside of Visual Studio Code. And if we go ahead and type path, we'll see one of the options is to install code into the command path, also uninstall. We're going to pick the install code on the command path and then it's going to launch a little script that we need to give it our root password for and now it's in the path. Let's go ahead and close this, in fact, we can just to prove to you it works, let's actually completely quit it and let's open up a terminal. We're going to make this a little bigger and all I have to do is look at the directories, let's go ahead and make a directory called FunWithCode for now, and if I do code . for the path that I want it to open or the folder I want it to open, there it is in the context of our new folder. So as we add new files and new folders, they're going to be looking at exactly what is in that folder. In fact, if you drag and drop files or clone a repository, all of that will show up because this is just a view into the actual physical file path. In the next clip, I'm going to show you how to install it on Linux or skip that clip and let's go ahead and get started actually using the tool. Installing Visual Studio Code - Linux And now we'll install it on Linux, specifically, I'm going to be using the Ubuntu distribution. On Linux, it's pretty similar to the Windows installation. We're just going to open up a browser, we're going to go code.visualstudio.com, and in this case, it's detected more in Linux and given us a couple of options. There is the .deb file for Ubuntu and DB and distributions and you'll also see the RPM for Fedora and Red Hat and some of the others. If you don't see an option for your flavor of Linux, you may open up the drop-down and you'll see there is still the tar gz file which you can download and just drop into some directory. But I'm going to go for the deb file so I can have it run the installer for me. I'm going to open it up with the package installer, click the install package, I'll need root access, so put in my magic password. Now that it's done, I'll go ahead and close it, and I'm going to open up a terminal and I will see I'm in my Home directory, but if I do code ., this will open up Visual Studio in the directory I specify, the period meaning the current directory. I could have pointed at any directory I wanted and here is a bunch of files in here, probably not what we really wanted, but we can see the same version of code we saw on Windows. So let's start using Visual Studio Code so we can see actually how it works as a development IDE. Exploring Visual Studio Code Next, let's dive into Visual Studio Code and show you around a bit. Here in Visual Studio Code, I'm just in an empty folder, the same one we ended the Windows installation with, and just to explain the basic nature of the tool, there are five by default tabs or action icons on the left that change the experience here in this left-hand panel, search here, debugging, Git, and extensions, and we'll look at each one of these individually, but let's start with files. This is going to be a view into the directory that we're open in, and if you remember, we opened this by saying code and then the current directory, but this is an empty folder, so there are no files or folders being shown here. So let's create a new file. You'll notice that the file doesn't show up underneath this beginning code because we haven't saved it, it's in memory only, but it will be listed here under the list of open editors. This is a list of the recently used files and the ones that are still open. This gives you the opportunity to do things by closing all files or group them into different layouts or to save all the files at once, but right now, this is just a plain old text document and we can tell because down here in the bottom right it says plain text. This is the language mode for a file. Normally, it's going to infer this from the extension, but because this is a new file, it defaults to plain text. And so, by clicking this, I can go ahead and pick and let's start with something like JavaScript. So in this case, we're going to get keyword coloring, help with formatting, a bunch of different things, even IntelliSense. So if we create a function called hello and down here further in the file, if we start to type H-E, we're going to get hello is a function that it knows about because this is the JavaScript that it knows about. It's actually pretty good at this. We can see this if we change the format again to let's say CSS, we're going to get the same sort of IntelliSense based on the language we're picking. We're even going to show errors. If we hover over this squiggle for the end brace, we're going to see that it expects a semicolon to be in the format, and in fact, down at the bottom left, you're going to see errors and warnings. The X is for errors and the triangle is for warnings, and if we click that, we'll actually open up a set of problems in a new split window. This will be all the problems in the directory itself, not just the ones in the opened files. It's going to go ahead and assume based on those file extensions what kind of files you expect it to be. So let's go ahead and fix this CSS, give it a font family and I'll just call sans-serif so that all the problems have gone away and let's go ahead and save this file, see it just pops up whatever operating system you're in a save as dialog and I'll just call this site.css, and once I save this, it's going to show up here in this bottom section of the directory. Now this isn't a project or a project template, this is simply a view to the disc, that's it. If you create new files or other things create new files outside of Visual Studio Code, they're just going to magically appear here. Let's create a file in a different way. Let's first come over here to the icon that we're seeing next to the beginning code when we hover on it and we're going to see the first one is a new file, a new folder, refresh, and then collapse all. This will collapse all folders if you have some open, but let's start with a new folder called JS, and when we're focused on that folder, if we create a new file, it's going to be inside of that folder and I'll just call it site.js. So now because we have both files open we can see that their open editor list is going to show both of them so we can quickly go back and forth between open editors regardless of whether it's easy for us to see the tabs or not. In fact, we might want to work with our site.js and our CSS at the same time and that's where the split view comes in. We can go ahead and split the editor and work in the two different files at one time. Now even though we have site.js in both sides here, we're going to be dealing with the exact same document. So if we say foo and have the function notice it showed up in both places because we're actually looking at that same file. If we close it over here, it doesn't mean that it's going to be closed over here, and in fact, we can even split it a third time. As you see the code allows a number of splits based on your screen size, but I believe three is the maximum. And I'll go ahead and close these so we can get rid of the splits and let's make a save to that file and now we can see this. Now this view of the folder structure will allow us to move the file as well. We can drag it down to the root or let's go ahead and drag it back to the JS folder and it'll change and move those files for us. Again, this is the actual file system, so moving that file is actually moving it in the file system as well. Next, let's look at the Git integration. Using Git Inside Visual Studio Code Now let's take a look at how Git is used inside Visual Studio Code. For this clip, you're going to want to have access to the example that I have out on GitHub. It's github/psauthor/vscodeforcore. You can see the address up here at the top. If you're not familiar with Git or you haven't used Git before, some of what we're going to talk about may not be that familiar and you can feel free to go ahead and use the website to download the zip of the project if you want. But instead of doing that, I'm going to come over here into a console and I'm going to use the Git command clone and this is telling Git to go get a copy from some Git repository and that's going to be that same address effectively, it's going to be github.com/psauthor/vscodeforcore.git. This is going to go out to GitHub and download a copy of it with the Git history as part of that download. So it's assuming you have Git installed already and you can see it cloned it, downloaded it from the remote, and if we look in this directory now, we'll see that BeginningCode that we were using in the last clip and now we have this new vscodeforcore, which I'll go into, and let's go ahead and just start code in that directory. Now that we're dealing with a much larger project, or at least a project with some code in it, you can see how the files show up on the bottom and the different folders are going to have different contents as we open them. We're going to focus here on the module1 files in a minute, but let's go over to that Git tab. This knows this is a Git repository and so a couple of things have happened. Any changes to files you've made would show up here so that you can make commits directly in Visual Studio Code, but you also down here at the bottom have the ability to pick what branch you're going to work with, as well as to synchronize changes directly in the UI. We haven't done any changes, so let's come over here and open up that site.css. As I make changes because this is a Git project, I'm going to show colored bars in the editor for those actual changes. So I added a line here and I'll go ahead and add a pull-right class here and I'll just set it to float right and you notice that all of these lines are shown in green because I've added those lines. Let's come over here and change this font size to 1.1, 1.1 is a change, therefore, it's blue which means this is a change line, and I remove a line, you won't actually be able to see it here, but it'll show it as a changed line. When I remove this line, it all became change because it didn't know and couldn't do the diff to figure out what was addition and what was changed. So let's leave that deleted for a moment and let's go over to our Git tab, and when we save this file, over here on the Git icon, it's showing a number 1, that means there is 1 change so far and this will increment as there is more and more changes. And if we look at it, we'll be able to look at the change and decide whether we want to undo it or stage it or we could even click on it, it'll show us the changes that it thinks happened showing that this was deleted, that was changed, this is the new until we can actually look at the differences between the two files anytime we want via the Git tab. Now we could go ahead and give it a message like change the CSS, you'll probably want a better message than that, and use this checkmark to go ahead and commit or at least stage these changes by staging them all and stage tells Git about the change, and then when we commit the stage, it will commit it to our local machine and then allow us to do a refresh to the actual repository. But of course, you're not going to have rights to the PS author vscodeforcore repository, so if you're familiar with Git and your comfortable, feel free to fork this if you want to actually practice with the committing of changes and synchronizing, but all of that works directly inside of Visual Studio Code. Let's take a look at configuring Visual Studio Code next. Configuring Visual Studio Code Now let's talk about configuring Visual Studio Code. We're back here inside of Visual Studio Code and I'm going to go to File and look at Preferences, Settings. This is going to be a file that has settings that I care about on the right, the default settings for all of Visual Studio Code and you'll see that these are collapsible regions so you can look at the different kinds of settings or even search for them. Luckily, the settings themselves support IntelliSense, so if I add something like CSS.editor, it's going to show me different options, I can tab over and change the cursorStyle to something like block, and in fact, it's pretty good about even giving you hints about what the acceptable properties are. And what's interesting is that these properties change immediately. I had a handful of these set up for the course already. When you start this, you're going to start with a completely empty set of settings. So if you want your fonts to look at little bit more like mine, you can change the font family for one that's on your machine, you can set the font size, the tab size, and this doesn't require restarting the editor or anything. In fact, let's change this to 16, press save, Ctrl+S, and you'll see that all the fonts change pretty immediately as soon as I do that. And if you look at the properties here, they give you a lot of help for what each of the properties are for. We'll take an editor.tabSize as an example, number of spaces, the tab is equal to, etc, etc so that you can have a sense of it. So going through this and finding the different ways to customize this for your own use is really useful. In fact, this isn't just for user settings. You can also click on the workspace settings and it'll create a new settings.json here in your project and the settings.json in your project override the settings.json on your machine, which overrides the default set of properties. So if I come here and I decide that I want editor.tabSize to equal 4 because I have a special client that I'm working with that really insists on tabSize equals 4 or tabs instead of spaces or any of that sort of thing, I can actually set that at the project level as well. In addition to settings, go ahead and save those, you can also go into Preferences and look at keyboard shortcuts and they work very much the same way, there is a default set of bindings to what they do and we can see that each binding actually shows what it's for. So if you want to find the actual action and change that finding, you can certainly do that, and each key binding is special. So if you look here at let's say key escape, it has two pieces. It says what the command is that it's going to execute and when it's in certain places so the certain places is about the focus. Are you focused in the Explorer for this keyboard shortcut, are you in the editor, are you in the debugger, etc. So that has a fairly robust key bindings customization. I'm going to leave this blank for now because I haven't found a good reason to change them. But you can also add extensions to change key bindings to ones you're comfortable with. The ones that are used in here are sort of a mix of sublime and Visual Studio shortcuts. You're going to see a little of both, but there are actually extensions that'll change it to Emacs and Vim and TextMate or anything that you might be more comfortable with, even Eclipse if that's your thing. And the last thing about customization that I'll mention is that you may find that not all of these are really relevant. What if you're not a Git user, for instance, if you right-click any of these or two-finger-click on Mac, you can actually remove it from the Activity Bar. That's going to allow you to clean that up for how many the icons actually matter. Git was the only one I ever thought was all that interesting about changing, though, once you have all the extensions you want, you might want to remove that one as well. There is a keyboard shortcut that I'll talk about that's pretty important here and that changes the view. So there is a few ways to toggle the view for what you're working on. Toggle Full Screen actually is going to take all of Visual Studio Code and make it full screen. That's going to react a little differently in different operating systems, but it's about the same experience. I believe on Mac you never lose the menu bar if I remember right, but you're still going to get that as full of a full screen experience as you can. There is also View, Zen mode and you'll notice it doesn't have a keyboard shortcut here for going in and out of Zen mode. But often, the menu items aren't as helpful for giving you those shortcuts, but there is another command. That command is called the command Palette and that's Ctrl+Shift on Linux and PCs and it's Cmd+Shift+P on Macs and that's going to open up this little drop-down with all the different commands and you can just type to do a search. So if I type zen to show zen mode, we'll see that Ctrl+K+Z is how I turn it on and off. So if I go ahead and hit Ctrl+K+Z, I'm going in to zen mode and then Ctrl+K+Z will bring me back out of zen mode and that will give you a good way to learn the different commands that you're going to be doing and that's going to include all sorts of commands. You're become very comfortable with using this command palette. You can also use Ctrl or Cmd+P to open up the different files that you have. So if you want to quickly open up something like index.html, as I start typing it, it's going to find it in the files, and in fact, we have a bunch of them, but it's going to assume it's the closest one. As I press Enter, it's going to go ahead and open that so that becomes an easy way to not take your hands off the keyboard and have to go to the mouse to find a particular file, especially when you're involved in a larger project with lots and lots of folders. And the last thing we'll look at are extensions, let's do that next. Installing Extensions So now let's talk about installing extensions. Back here in Visual Studio Code, let's go to the extensions icon, and by default, it's going to show you all of the extensions based on sorting of installation. If you have extensions installed, it'll actually show the installed extensions here instead and you can change what it shows in these extensions by using the ellipse here to show installed extensions, outdated, disabled, etc, and this way you can find the different kinds of extensions that you want to use. But in our case, we're going to install the C# extension because that is one that we're going to need to do ASP.NET Core development. And the installation experience for an extension is pretty simple. If you click on the body of the extension itself, it opens up this preview directly from the marketplace so you can see what the extension is about. This'll show information about what the extension is, what it's supposed to do, what's been contributed to it in the case of what settings are supported by the extension, what commands are added, etc, and this has a lot of different pieces to it. Change log, if that's interesting to you, and then even what dependencies it needs. And I went ahead and installed it and when as soon as you install an extension, you will need to reload Visual Studio Code, but it's relatively easy to reload because it leaves you in your same state, allows you to save all the files, and then very quickly restarts, and you're back in and the extension is installed. The marketplace for extensions is a great place you can use to make this a little bit more like yours. So if you're a Vim guy and I type Vim, you're going to see things like Vim emulation and there'll probably be some Vim based color themes as well, and even options to open up a Vim file. So as you look at the different things you might want to do if you're an Angular person, there is going to be a bunch of extensions around Angular, snippets, working with the cli, etc, and this is something you're really going to want to do as you get comfortable with Visual Studio Code to make it work the best for you. Through the rest of the course, we're going to be adding extensions here or there. I think by the end of the course we end up with 10 or 12 different extensions to sort of give you a taste and a flavor of the different kinds of extensions. Thanks for joining me for this introduction to Visual Studio Code. Let's head to the next module and start talking about ASP.NET Core in Visual Studio Code. Your First ASP.NET Core project Installing ASP.NET Core - Windows In this next module, we're going to create our first ASP.NET Core project. We're going to start by installing ASP.NET Core. First, we'll do it on Windows. If you open a browser, you can simply go to dot.net. That'll take you to the main .NET website. Let's go ahead and click download and it will show us a download page for the full .NET framework, for the Xamarin tools, and right here in the center is the .NET Core downloads. Let's click that and this will show us a list of downloads, including the ones that we want for the SDK. Now this is valid for both .NET Core 1.0 and 1.1 that we're going to be using 1.1. I'm going to grab the 64-bit installer since I'm using a 64-bit version of Windows and I'll just grab that exe. If you have Visual Studio installed, you may already have .NET Core and the SDK installed for you, but if you're on a clean machine, this is the way you would get it. Once it's downloaded, just execute it, and you're going to do the agree to terms, install, and then watch the progress bar magically move. Now the versions of the SDK and the versions of the .NET Core runtimes are not in sync. This is the SDK 1.0.1 which includes support for .NET Core 1.0 and .NET Core 1.1. We can know that .NET is installed by just opening up a console, I'll go ahead and open up a command prompt, and if we type dotnet version, it'll tell us that we're using the 1.0.1 version. So we've successfully installed the .NET SDK. The way the SDK works is that all the commands start with .NET and then have different commands after them, restore, build, publish, etc. We'll be talking through many of those through the course. Let's see what it looks like to install on a Mac next. Installing ASP.NET Core - Mac OSX Now let's repeat the installation but do it on a Mac instead. Now that we have Visual Studio code installed, let's get .NET Core installed on our machine. Let's start by just opening up a browser and we're going to go to dot.net. This is the .NET website and it's going to forward us to where we can download any of the .NET tooling. Click Download and it's going to show us the .NET framework and this is the full .NET framework that works on Windows PCs and this is Xamarin, works on Macs and PCs for building mobile apps and then .NET core, which is what we're going to be focusing on. So let's go ahead and click .NET Core and we're going to see a list of downloads like we did when we were installing on Windows and one of them is going to be a Mac OS package download. Let's go ahead and click that. I'll start the download process. I'm going to open up that folder and wait for the download to finish and then I'm going to double-click that to start opening the package. This is going to be a pretty simple installer. I'm going to say continue, we're going to read the entire agreement carefully or just press Continue, whichever you do, and here is that secondary yes, I agree, I agree. It's going to install some things on our machine and we're going to need to give it our root password because it's doing some magic with changing paths and other things at the machine level. Now there is a note here that's really important and that is that you're going to need open SSL in order to use the .NET Core SDK. So we need to do this in two simple ways. The easiest way is to use a product called Homebrew. This is a package manager for Mac, but it's not built in, so you're going to need to actually install that first and then install open SSL, so let's do those two steps. Let's go ahead and close this and I'm going to go ahead and move the installer to trash, and to get Homebrew, we're going to go to brew.sh and this will allow you to install Homebrew, again if you don't already have it. If you already have it, you can skip past this to when we do the actual install of open SSL. Let's just copy this and open up a terminal and I'm going to go ahead and paste that and let it do its magic to install Homebrew for us. It's running as roots, so we're going to need to put in our password again, put in our password correctly, that is. There are a number of steps to getting Homebrew installed so it may take a few minutes with this process. But now that it's done, we can make sure it works. We'll just type in brew and it will show us some help for the different things we can do, but it is like most other package managers. We should be able to say brew install and then some package, so let's do that. I'm going to type brew install OpenSSL. Now that OpenSSL is installed and you'll see some warnings about Apple has depreciated it, but we're still using it inside of .NET Core. Let's close and reopen the terminal so that any pathing can be done. We can go ahead and type dotnet --version, we'll see we're getting 1.0.1 so dotnet is now installed on our Mac. We're all ready to get started. If you want to see how it's installed on Linux, follow to the next clip, otherwise, skip over to the fourth clip in this module and we can get started using .NET to build our first application. Installing ASP.NET Core - Linux Now let's look at installing ASP.NET Core on Linux. So let's start by just opening up a browser and I'm going to go to dot.NET, the home of .NET on the internet, and I'm going to decide to just download here in Linux, and this will show us downloads for the full .NET Framework, which it doesn't work on Linux, the Xamarin tools, which also weren't supported on Linux, but here is .NET Core. So here the .NET Core downloads includes those packages we looked at on Windows and Mac and then there is a link to installing .NET Core on Linux. This is just for installing the .NET Core SDK directly, but let's go ahead and look at the step by step instructions because Linux requires some special steps. First thing is we're going to want to select whatever distro you're using, I'm using Mint. So I can go ahead and click on the Ubuntu or Mint link and there is different directions for each of the supported distros, RedHat, Debian, Fedora, etc, and I'm using Mint 17 so I'm going to use these directions. First thing I need to do is set up the .NET feed into apt-get essentially telling as new source of packages for .NET. And so, I'm going to need to execute each of these commands, so let's open up a terminal first to make this a little bigger so we can see it and then I'm just going to copy each line and execute it one at a time. Because this is a sudo command, it's requiring that I run it as roots, so I need to put in my password. Second line also requires it, but because I already put in a password, it won't require me to do it a second time. Then finally, once it's set up both the source of the new packages and then the key to make sure it's a valid source, we need to tell apt-get to update it now that we've made those changes. These three steps really only have to happen the first time you install it on a machine. Once this has been done, as new versions of .NET Core come out, you can just simply install them in the normal way with apt-get. Once you've done all these, you can go ahead and install it simply by using apt-get. So let's do sudo apt-get install dotnet-dev-1.0.1 which is the current version we're looking for. Let's add a bunch of data and let it go about its business of downloading the entire SDK and installing it on the Linux machine. So it'll allow you to do the development both in Visual Studio Code or at the command line as well. Well you can find out that it's installed by just saying dotnet --version, we'll see it's 1.0.1, and we're all good. Let's move on to actually using the SDK next. Starting a Project with the SDK Now let's start a new ASP.NET Core project using just the SDK. I'm going to start at a command prompt and I'm just going to make a new directory for our first core project, and in this directory, I can use dotnet and call the new command. I'm going to use the help here just so we can see what it actually does. You'll notice the first time you run dotnet any command, it's going to do some caching. When using one of the commands in dotnet, you're going to be able to see a help page on it. And we can see here that the dotnet new supports a variety of different project types, console, class, library, unit test, etc. The ones we're going to concentrate on are the empty, the MVC, and the Web API ASP.NET Core web applications. Those are the ones that are most interesting to what we want to do. And all we would do to use it is say dotnet new and then give it a type, and in this case, we can do like it shows in the examples, MVC --auth None and that'll generate a new MVC project with no authentication or identity system set up at all. If we see what it built, it built a project for us using csproj as the project type and then some standard boilerplate for our project. If we go ahead and say code current directory, we'll see this new ASP.NET project directly in code. Now before we can really use it, we're going to have to tell it that it's an ASP.NET Core project and the shortcut to doing that is to actually just open up one of the C# files because what it's doing here is that C# extension we added is actually going through and setting up the environment for ASP.NET Core. Some of the downloading of packages it's doing right now are one-time only thing because these packages are going to be used inside of code for all our projects. Once it's done this sort of setting up of code for us, you'll see down here it says successfully installed .NET Core debugger and we'll take a look at the debugger in the next module. But we get these two pop-ups on the top. It says first assets to build in debugger missing, should we add them, and typically you're going to say yes. This is for a brand new constructive project. There is some Visual Studio set up files to allow you to build and debug and so we're going to say yes. And then this is a pop-up you'll get quite often as you change the csproj file and that is to simply do the NuGet restore and it'll go ahead and do that for you if you hit Restore and we'll see that it's going and getting all the packages required. And we know this is working because inside the C# files, we're going to start to see some of that code lens support for looking at number of references, for being able to get IntelliSense, for the sort of rich experience that you're probably already used to using other IDEs with C#. Visual Studio Code supports most of those that you're already used to. I'm going to quickly format this file and I can do that by holding down Shift and Alt, or Cmd on Mac, F and it'll format it based on any of the preferences we had set. I'd set two spaces and so it went ahead and did that reformatting for me. And we can see IntelliSense working by simply adding to our app here, and as we press . there, we're getting a bunch of the different things that we can actually do with the app class and we're going to see that for most of the different objects that we're actually dealing with. For example, if we come up here to services, services.Add and we're going to see all these different sorts of things that we can add to the services, Logging, MemoryCache, etc, even support for things like cores because it knows the project and the different objects that have been exposed through the existing references. And if we go ahead and open up a console, there is actually two ways to do it in Visual Studio Code. The first is to use Ctrl+Shift+C, or Cmd+Shift+C on Mac, and that will open up just a brand-new window in the same directory you're in. The other way is you can actually open up a console inside of Visual Studio, you do that by holding Ctrl and hitting the back tick, or Cmd back tick on Mac, and you'll actually get a console directly in Visual Studio Code. Now the kind of console you're going to get here depends a lot on how your machine is configured and what operating system you're on. This could be a bash shell on Linux, this could be a command shell on Windows, and one of the interesting thing is, by default, the command shell here is PowerShell. Because I don't prefer PowerShell, I prefer the old command, I actually had to go set this up. So let me show you where that is. If you go back to the settings and preferences, one of the options I chose here, can actually change the font size a little, make it a little easier to see on our screen, is the integrated terminal here was one of the options and I chose to use cmd.exe instead of powershell.exe. If I take this out, the default behavior is PowerShell on Windows, but you're going to get a standard shell on Mac and Linux based on the operating system and the Linux distribution you're using, etc. Let's go ahead and close those settings real quick, and the reason I opened the terminal is I want to see if we can actually get this thing to run and the way to actually start .NET project is dotnet run and this will look for a csproj or a solution file in the current directory and try to execute it. You see because we run it, it's listening now on port 5000. And so if we just open up this browser and say localhost5000, we'll get our boilerplate. Here is our first core just like we generated it using the sample template. Now Microsoft is supporting a few different ways of building these standard projects that normally would be built directly into an IDE like the full version of Visual Studio. There is actually two ways, one is using this dotnet new and one is using a different open source solution that lots of other ecosystems already use called Yeoman. Let's look at that next. Starting a Project with Yeoman So now let's start a new project using Yeoman. I'm going to go back to this command prompt we had before and I'm going to try to use a command called Y-O for yo and it's going to say it's not recognized because we don't actually have it installed. The tools we're going to be using to build this stuff are available through node package manager and it may seem a little confusing to be needing node, but some of these tools we're talking about are Cross-platform and also Cross-ecosystem. So Yeoman can be used to build brand new node apps, brand new Ruby and Rails apps, as well as ASP.NET Core, so it's a reusable skillset that you could use in different kinds of development, so we're going to leverage that. If you don't have npm already installed on your machine, you're going to need to go and download and install npm. Now that's going to be different on different operating systems, but in most cases, you're going to already have this, much like you might already have Git. But assuming you already have npm, I'm just going to tell it to install Yeoman and the package name is yo and I'm going to use the -g to tell it to install it globally because I'm going to use this in a bunch of different scenarios, not just in our current project. So it's installed Yeoman now, and if we type that yo command, it's going to show us the different options like install a generator or run a generator. It can't run a generator now because we have none of them installed. These are npm packages that start with the word generator that our lists and prepackaged templates for different kinds of projects. And if we go ahead and use npm, we can install generator.aspnet, and again, I'm going to add that globally because I use it all the time and this will contain code templates for a number of different types of ASP.NET Core projects. Much like the dotnet new is allowing you to create .NET Core projects, generator ASP.NET includes some that aren't included in the dotnet new. The other reason I like to introduce this as a code generator is there are some other third-party generators that can be really useful. There is one that's called generator ASP.NET SPA for spa that'll generate ASP.NET Core projects that include Angular or react templating. And so, it can be useful if you're using a client-side library to also generate new projects with some of that boilerplate already built in. But we're just going to use the generator ASP.NET here and the way we're going to use it is just yo and then ASP.NET, the name of that generator. And what this will do is show you the different kinds of applications it can build and then it's going to walk you through a series of questions about that application. So we could go, there's actually a number of these in here, we could create empty web applications, console applications, web applications with or without membership and authorization, simple API, even Nancy ASP.NET applications, which is a different way to write APIs using ASP.NET in addition to class libraries and unit tests. So I'm going to come down here to the web application basic and I want to do it in C#, which is the default one, I don't want to do it in F#, though that is certainly supported by ASP.NET Core, and when I do that, it's going to ask me what UI framework do I want to use, Bootstrap or Semantic UI. And so, again, one of the benefits of these templates is they have these branching questions that help you build more interesting versions of these applications. I'm going to leave it on Bootstrap and then I'm going to give it a name, FunWithVSCode, and then it does a bunch of this generation just like the dotnet new did, but it's also going to create the directory for me, it's going to go ahead and get some client-side code that I might need, and then it gives me some direction. So I'll just go ahead and open up the directory call dotnet restore and then build, but we don't actually need to do that because we're using code, so let's just say code . to open up this brand-new project. And one of the things you'll notice about this version that's a little different than the one we built earlier is that it includes a few more files that we're included before, and as soon as we open up a C# file just like we did before, we're going to get those tried and true pop-ups. Let's go ahead and restore the project and we want to add the pieces for debugging. Now that that's all done, let me close this window and let's talk about what adding and supporting debugging really means. In this vscode directory, .vscode, are some configuration dialogs. The bottom one is tasks.json which allows you to go ahead and build this project instead of going out to the command line and typing restore and then going out to the command line and typing build, we now can just hit a hot key for build. Let's see if we can find that. I used Ctrl+Shift+P, or Cmd+Shift+P on Mac, to open up the Command Palette and I'm just going to type the word build and we can see that tasks run build task is Ctrl+Shift+B because I'm on Windows or I believe it would be Cmd+Shift+B on Mac and I can still just select it here to also do it and this is just forcing this project to be built just like if we were using any other application. In that same way, we can go here to the Debugging tab and we can go ahead and launch. This would start debugging, which we're going to talk about in a little while. Instead of that, we're going to open up the Command Palette and if we go ahead and call Start Without Debugging to just execute it, we'll see it opens up an Output window and then launches this new application. There is our FunWithVSCode and our fully functional, though not very useful, website. And this is a good starting point, but we want to be able to actually do some interesting development. Let's do that in the next module. Developing with Visual Studio Code Navigating Code In this next module, we're going to be talking about how to develop ASP.NET Core applications in Visual Studio Code. We'll start out by showing you how to do code navigation. We're back in Visual Studio Code in the same project that we were using in the last module. Let's open up that Program.cs, which is the starting point for your application. Any time you're on a keyword like Startup or WebHostBuilder, you can hit F12 and it'll take you to that reference. So if I hit F12 here, it'll open up the file that contains the Startup class and you'll notice that it has a little helper here that tells you there is one reference to this class, that is has found in the code one place where this Startup class is actually being used, and if we click on the reference, it'll actually pop-up a peek or a hint to where this reference is. Let's go ahead and close this. We can actually use Alt, or Option on the Mac, and the left cursor key to go back to the original place we started in navigation, and so that way as you walk through looking at several definitions, you can go back and forth between them. So Alt, or Cmd on Mac, right cursor will take us back there and then left will take us back to the original instance of this. We can see all references to this key if we hold down Shift and hit F12 as well, this will open up a pop-up over our code that shows all the references to it and allows us to navigate to them. Let's go ahead and close that and we'll also see that if we right-click, we get the same options that he keys themselves support like Go to Definition, Peek Definition, which will open up that definition, but in this pop-up window, Go to Implementation and then Find All References that I showed you a minute ago. And so, in this way, you can quickly go through and find and navigate two different parts of your application. Another option is Ctrl+P, which opens up a quick find this file name. So if I'm looking for the home controller, I can quickly type part of the name, and if it's where we want it to be, just hit Enter and it'll open it up for us. So instead of having to always use the mouse to navigate to the files you're looking for, you can either use the navigation to the type or you can just use the Ctrl+P to go ahead and find the File you're actually looking for. If you use these same facilities to look at the references or the implementation of a built-in class, a class that you haven't written, but is part of some referenced assembly like the WebHostBuilder, if we go to the definition on that, it'll actually build us, based on the metadata, a version of the class to look at. So here it's telling you what assembly it came from and then it's showing you the structure, but of course, not the actual code for this class. It's pulling this directly from the metadata, and while it's not going to show you the exact implementation, it will give you some hints about what methods and properties are supported, as well as showing you the documentation for each of these based on the documentation that is inside of those assemblies. Adding Files Now let's talk about adding new files to our project. Back here in Visual Studio Code, let's go to our Controllers folder and let's add a new controller here. So with the folder highlighted, I can use this icon here to just create a new file. I can also do the same thing with a new folder. If you want to create a file in the root of the project, you have to unselect any folders. I often find the trick of just selecting the entire box, which will give you that colored outline that you see here so that a new file will exist directly in the project and let's do that for a moment and I'll just call this my RootController.cs and notice when I created this root controller, it just gave me an empty file. Visual Studio Code out of the box doesn't have the notion of certain extensions have certain templating with them. We'll see some ways to do that. But since the RootController should be in the Controllers folder, let's just grab it here in the tree and we can just drag it to the right place. So the drag and drop to move files works in exactly the way you would expect it to. Back here in the RootController, we're going to want some structure here. So if I start typing like namespace, I'm going to see two versions here, one is just a completion of the C# keyword of namespace, but the second one is actually a snippet to create a namespace for me. So if I go ahead and hit Tab there, you'll see it's creating the namespace and then leaving us a place to actually create that. So I'll call this FunWithVSCode, kind of just going to help us with that namespace, and then Controllers. So we now have the namespace and we can do the same thing with class. Again, we see the name completion there, but also the snippet below it, and when we do that, it's going to create a simple class structure for us and I'm just going to type in RootController and I'm going to go ahead and make it public because I know for me, I'm going to want that controller to be supported that way. And in our case, we're going to want this to derive from controller, but of course, controller, it doesn't know about right now. So if we look at this helper here, it'll give us some options like adding the using statement. We can also do this by being in Controller and hitting Ctrl+. and it'll allow us to do the same thing. So we've used a couple of snippets to help us build this a little quicker, but this isn't giving us the full weight of the class we might want. Let's see if there is an easier way to do this by building our own snippets and we'll do that next. Snippets So now let's take a closer look at snippets. If we go to the File menu and look in Preferences, we'll be able to pick User Snippets. I'm going to go ahead and pick that we want snippets for C# because the snippets are grouped by the kind of language it's using, and if you don't have this csharp.json file created, this will be in your user folder depending on the operating system you're using and it's going to create this boilerplate for you to get started. I'm going to leave that comment in there, though I can certainly get rid of it, and let's create our own snippet, let's create a snippet for creating let's say an index for our controller. So the first thing we're going to want to do is name it, I'll call it a psget for Pluralsight get, and if we look at the example up here, we're going to want to specify a prefix, a body, and then a description. The prefix is what you would start typing to actually get it. So prefix, and notice we are getting IntelliSense to help us figure out the right things here and I'm going to call that prefix psget. These do not need to be the same name, but for now, I'm just going to leave them the same name to be a little easy and then I'm going to say body. This will be an array of strings for each line in the individual snippet and then we'll just want a description. So in order to do our action, what are we going to want? We're going to want that first line to be public IActionResult and I'll just say Index for now. Then another line might be an opening bracket, let's put the closing bracket, and then in between them, we'll go ahead and just say return View, so just something standard to create an empty action for us. Now the snippets give us the ability to actually specify places that the user is going to type things. If you remember looking at the class name or the namespace, it left us with this placeholder that we could type over, and the way it does that is either by simply replacing something like the name here with $1 and it'll know that is the first 1 to go to, and we can include $2, 3, or 4, etc. And the last one you're going to want to include in most cases is $0 and that's where the cursor is going to end up after the snippet action is completed. I want to use labels, so I usually don't use $1, 2, or 3, on their own, instead, I'll use this syntax where I can say 1 ActionName and this will actually show up to the user as ActionName that they can type over to give them a little bit of a hint of what we want. So let's save this and let's go over to our RootController and let's try this. So if I type ps, you'll see that the snippet is already in place that we can use. If I go ahead and hit Tab, it's going to create our action, put the cursor on ActionName so that we can actually replace it, I'll say Index there, and when I'm done, we now have a simple action, and if I needed to create a number of these, let's say Contact, then I'll also have exactly what I need here. But let's go back to that snippet because there is something interesting about the ActionName here. This name can be reused inside of your snippet. So what if I wanted to come down here and say implement the ActionName Method, I wanted to put a little piece of help text here, and whatever I typed here would show up in this second place as well. So let's make that change and let's implement one more, psget, and when I type About, we can see that it actually changed in both places. And then this way, you can create simple snippets that are useful for very repeatable tasks like, in our case, creating actions here. Luckily for us, there are already a number of these action packs out there that we can actually just bring in and use on our own without having to write each of our own snippets manually. Let's talk about that next. Snippets Packs Now let me show you some snippet packs that can be useful in your implementations. If we come down here to the extensions, we can search extensions to find snippet packs for different kinds of development. I've actually created one that if you search for ASP.NET Core, you'll see the WilderMinds ASP.NET Core Snippets, and the way these extensions will work is before you install them, go ahead and click on it and it'll actually open up some help so you can see what an application actually does. We can see how well it's rated, we can see how many times it's been downloaded, that sort of thing, and in many cases, it'll show you all of the sorts of things it can do, like in this case, create different actions, create get, post, put, etc. So let's go ahead and install that, reload, let's save those changes, and now back in our root controller, let's use the MVC action from the snippet pack. We can see here it tells you what it is, but it also tells you where it's from. This is going to be the name of the extension that is supplying that. If you notice before, it said that the namespace and the class snippets were actually from the C# extension. So let's go ahead and hit Tab there and we'll see very much the same implementation that we did a minute ago. I'll call this About and it'll leave us where we want to be. So being able to use snippet packs to create these repeatable pieces of functionality can be really useful because most of them have a variety of different snippets. In my case, I have snippets for creating the different sort of actions for writing APIs, as well as websites, async versions of them, etc and we'll go through and just show you an ad for them, but there is a number of here that can be useful. But if we look at the extensions here for snippet, we can see there is a lot of different snippet packs, some of them better than others for different kinds of development. So if you're using react, this might be 1 you want to use, though, if we look at it, it's only 0.0.3 reference so it may not be one that is as complete as you might want. Let's look at Angular2, we'll see there's a Component Generator, and if we open these up as far as we can take them, we'll see that some of them have the stars to tell us how popular they are. For Angular2, there is a very popular 1, 5 stars, 355,000 downloads and that's going to be an indication of how good an extension is. Mine is relatively new so I don't have a lot of downloads or reviews yet, but if you're going to be using Angular v2, especially for TypeScript, I'd definitely go with 1 like JohnPapa's here that you can just install. And we'll see the same sorts of things for react, vuejs, etc. I see a bunch of different types of snippets for the different languages you may want to use in different places. Snippets aren't just for C#, they could be for JavaScript or for TypeScript, or even for your views being able to actually write and use things that are part of HTML or otherwise. But there is one other way we can build up our HTML without using snippets that is built directly into Visual Studio Code. Let's see what that is next. Zen Coding Now let's talk about Zen Coding. Built into Visual Studio Code is support for Zen Coding or sometimes called emit. So let's go ahead and open up one of our views. There are some built-in views already existing, so let me go ahead and look at the about page, which is a nice empty page. The idea behind emit or Zen Coding is to allow a very short coded way of building structure inside of HTML. So if I put a just div and press Tab, it's just going to create a simple div for me and that might seem a lot like just tag completion, but it goes further than that because it layers itself upon the selector syntax in CSS so we can create some structure. So if I wanted to create a div that had an unordered list inside of it, we can do that using the greater syntax, and when I tab, it creates that entire structure in the way it's laid out. I can actually go a little further than this because if I come here and say the list item inside the unordered list, I can also use * and then a number to say how many of these to create. So now I'm going to get four different versions of this and the idea of the Zen Coding is to allow you to quickly scaffold up the actual HTML. This isn't about necessarily styling what you're doing but creating structure. In that same way, if I started down here and I said div header, it's going to go ahead and create the div and specify the class for me because again, remember, the CSS selector syntax says period and then a name is the actual class of an item. So we can use those reusable skills we're using in CSS to also quickly build up our applications here. So let's do one more that's interesting. So I showed you how you can say ul li*4 and that will actually give you 4 list items, but what if you really just wanted to mock this up and I just wanted to fill them with some lorem ipsum text. I can actually just tell it inside each list item do lorem. Lorem is a magic word in Zen Coding to say do what, generate some lorem code, and I can even add a number on the end to say how many words of lorem to include. Now let me show you a more complicated example. Let's say we're using Bootstrap, we want to be able to put together a very simple form. So I can start with form and then say .form-group, and then inside of that I want a label and I'll use a plus to say I want a sibling that is also an input.form-control, and if I create that, we'll see that it creates that structure we want, but what if we want it to have a couple of these? We could surround these in parentheses and just use that *4 to say create 4 of these, in fact, I can then also say +.form-group input type=submit, again just like in CSS, and then let's go ahead and tell that to make it a form-control class and now we can see that the input is created as text and then down here, we created one that was of type submit and we've just boilerplated a very quick form by leveraging our CSS and selector knowledge to be able to build these pretty quickly. Add References Now let's take a look at how to manage references in our ASP.NET Core application. Now that I've shown you some of the Visual Studio Code tricks about managing and adding files and using snippets, let's talk more about ASP.NET Core specific functionality we're going to need and one of the first things you're going to run into is adding and removing references. If you look at the csproj file, starting in ASP.NET Core with the latest SDK, which is the 1.0.1 SDK, you're going to notice that there is a C# project file or csproj that's going to contain information about the project you're going to need and that's where references are stored. This is going to be an XML file that specifies what references and what framework you're targeting. As we make changes to this, Visual Studio Code is going to notice that change and ask you if you want to rebuild them. So let's make a couple of changes here by changing this to the 1.1 core app, which is the latest version as of I'm writing this, and then let's change all of these references we're using to using 1.1.1, which is also the latest version. And when we save that file, we'll see this pop-up here that says there are unresolved dependencies, do you want to restore, and this is really doing the same thing that going to the command-line and typing .net restore would do, but allowing it to be a little easier and it shows it all in the output in case there is any problems. And we run into one immediately and that is the VisualStudio.Web.BrowserLink doesn't have a 1.1.1 version and this is something you're going to run into here, and again, where you might assume what a version is or what a version isn't. So let's copy this for a minute. Let me show you one of the ways to get around that. If we open up a console, which I'm going to use Ctrl or Cmd on Mac tilde this will open a terminal directly in the project for us and in both cases, we can use NuGet as a console app to list the references in NuGet for packages that have certain names and I'm going to go ahead and put in the name of this problem link, so Microsoft.VisualStudio.Web.BrowserLink and you see that it's showing you that the latest version of BrowserLink that is actually 1.1.0 wasn't updated for the recent minor change for 1.1.1 so we can go ahead and make this change here. You could also go to the NuGet site and search for this reference and be able to look it up in that way as well, but I'd like to go ahead and stay inside Visual Studio code and this is sort of a simple and easy way of actually looking those up. So let's save our file again, it's going to ask us to restore again, and we should get a clean reference fix. Good. Done with no problems. But what about adding a new file? So let's say we want to add a package reference and include a new reference for us. Visual Studio Code isn't going to give us IntelliSense to look in NuGet to know exactly what we need in many cases, and so we're going to need to understand the references we want much easier. So let's add Microsoft.Asp.NetCore and here we saw something that looked like IntelliSense because as we started typing it's showing Asp.NetCore, but it's actually just mimicking because it's seen these together in this file. In fact, if I start typing MVC, we'll see it's going to guess that too because it has seen this in open files and we'll try to sort of hint at IntelliSense, but it's not based on any real intelligence. And just type Cors, which is a package for handling Cors in ASP.NET applications, and let's go ahead and guess that the version is going to be 1.1.1. Now I saved it and it said we're having trouble with some projects and that's because I had forgotten this ending slash, but if I go ahead and save it now that I have this slash, we'll see it's going to allow us to restore and I can just close that little warning. And then now we're now getting the additional reference we wanted here. The other way we can actually do this is back in the terminal. So I can tell dotnet to add a package and then give it a package name. Optionally, I can give it a version name as well, but let's go ahead and ask it to add AutoMapper, which is a NuGet package that isn't from Microsoft, but is a run-of-the-mill NuGet package that it will be able to add. So let's let it do its work, it installs it, says there are unresolved dependencies so we want to restore it again, and we'll see up here that it added the package reference for us based on the latest version that it could find. If I need a specific version, I could, of course, go in there and either change it here or I could have in the terminal said version and then give it a version like 5.1.1 or if I knew the exact version I was looking for. Once we have these, our application now has reference to all of those and the C# library will know that they exist now. Let me show you that by going to Startup, and if I come down to configure, let's format that for a minute, and I just want to say app.UseCors. We can see UseCors from the new reference is now being shown here because we now have the reference downloaded so the C# can actually refer to and use those new APIs that are now part of the project. Now let's set up the build next. Setting up a Build So now let's use Visual Studio Code and set up a build. Here in Visual Studio Code, let's open up a console and we can build our project by just using the command dotnet build and we can even run it by saying dotnet run. So here it says it's listening on localhost 5000, let's just click that, and we'll see it's opened up and run our actual application, but we'd love to be able to do that within Visual Studio Code itself and we can because there is a special file that was added when it asked to add debugging support to your project, and if we open up this special vscode directory which was added, there is a file called the tasks and this sets up the task and we can see that the command is going to be dotnet and then the sub task name is going to be build and they're going to actually point at our csproj and force this to run whenever we do a build. So if we hit Ctrl+Shift+B, or Cmd+Shift+B on Macs, we can see it's going to take the information from this task.json and actually run the build. Now we're getting an error that it can't do it and that's because we're still actually running the application here in the terminal, so let's go ahead and stop that, and if we go back to the output and let's build it again, we can see it build the project for us. The other part of this is being able to actually launch. Now the launch.json is similar to the tasks. The task is what happens when you build, the launch is what happened when you actually try to run the application and normally, there are one or two of these different launches. So let's close this for a minute and let's go down into debugging and we'll see that in this drop-down, there are going to be the two different kinds of launches and these configurations exist inside of the launch.json, though they are configured and work here. So I'm going to leave it as the web launch and I can start debugging here or I can actually run it without debugging and the way I do that is to actually use this Start Without Debugging command, which is Ctrl+F5. And what that will do is it'll cause the build to happen and then it'll launch the application by both starting the web server and opening up a browser for us, so let's do that. Ctrl or Cmd+F5 and this way it automatically launches the web browser for you, whichever web browser is the currently in use web browser. If we go back to Visual Studio Code, you'll notice that it is running it even though we're not actually supporting debugging this moment. So when you're done here, you're going to want to hit Shift+F5 to stop the process or just use this little toolbar and stop it. Next, let's take this same facility and understand how debugging of your ASP.NET Core code works. Debugging C# Now let's look at debugging C#. Back in Visual Studio Code, let's go ahead and open up one of our controllers, the HomeController, and right here in the about, let's go ahead and just click on this left-hand section on that line or I believe you can hit F9 and set a breakpoint. This tells Visual Studio Code that you want to run the code, but if it reaches this line of code in our application, we want to come back to Visual Studio Code so we can look at what is happening at runtime. If we just hit F5, it will build and then launch our application with the debugger attached. So here it didn't stop at all because we didn't actually reach that about action on the controller. So let's click on About and let's see what happens. Here it stops on our line and we're able to if we look at the Debug tab, we can actually see information about debugging. We can see what the controller has as far as data, we can see the call stack, we can even set up our own watches. So if we want to say this.ViewData Message, it's going to show null right now, but let's step over this first line with the toolbar or just hitting F10 and now our watch actually has information in it, and if we tell it to run, it's just going to continue and then over here in the browser, you'll see that About page. Now this works anywhere in your application where you can just set breakpoints directly in the C# code. In addition, if we go look at the views, let's go to that About page, and we set a breakpoint in the actual Razor code, we're going to see breakpoints in the Razor code as well. So here I could look at or even change ViewData, ViewBag, as well as other properties that the page has. If we look at the debugging, we'll actually be able to see this object and look at the different properties it has, like here the layout model is that _Layout view. So debugging in Visual Studio Code is pretty similar to the debugging experience that you've probably used in a full Visual Studio or even other IDEs with other languages. It's pretty straightforward. This is one of the ways that Visual Studio Code is more than just a simple enhanced text editor like it might seem at first blush. By using plugins like the C# plugin, we're going to add functionality like being able to debug our applications. So next, let's talk about a different way to do development that might be even faster than using the debugger every time. Setting up a Watcher Build So now let's set up a watcher build. So what exactly is a watcher build? There is a special tool that's available to ASP.NET Core projects that allows it to continuously build the project to speed up your development cycle and let's see what that looks like. The first thing we're going to need to do is open up the csproj because we need a new item here in our project file. Usually these go in their own ItemGroups, so I'll go ahead and just create a quick ItemGroup and these are called DotNetCliToolReference. If you started your project and included identity, you may already have one of these DotNetCliToolReference objects for Entity Framework tools, but let's create the one for watcher and the name of that is Microsoft.DotNet.Watcher.Tools and the version we're looking for is 1.0.0. Even though the rest of our project is 1.1 or 1.1.1, the tool itself is versioned at 1.0. And now that we have this change, we want to go ahead and restore our references because this tool reference is also a package reference, this is just a NuGet package that we're looking for, but it's a special type of NuGet package that will extend the DotNet command. So let's hit Ctrl or Cmd backtick to open up our terminal again. And if I say dotnet restore just to make sure that I have all the references now, and then I can say dotnet watch and this will tell us what watch actually does and that is it allows us to execute a command like dotnet run. Dotnet run is going to start your project up until you stop it. But using watch in the middle of it, starts up your project, and keeps an eye on this entire project structure and anything that changes, it notices it and rebuilds a project without having to manually restart the coding so let's see what that looks like. Dotnet watch run and we can see we're getting our listening at on 5000 just like we were before. So if we open this up in Chrome, we'll see our project actually running. Let's go to the About page and back in the code, let's just look at the view for the About page. And here is that line that says use this area to provide additional information, I'm going to make it nicer and say please. If I go back and refresh this page, you'll see the please shows up. This really doesn't require anything special like the watcher to work because we're just changing runtime files and all the views are files that aren't compiled, they're actually executed at runtime, I can make those changes and they will continue to work. But more importantly, if I come back here and I look at the Controllers, now let's go back down to that about as well and let's actually change this description to say this is using Watch today and when I save that file, we can see here it noticed that a file had changed, rebuilt it, and re-executed it. And if I refresh this again, we'll see that we now have that change in it. And so, the magic here is that you're not going through your own rebuild cycle over and over again, you're simply making changes, coming back, refreshing the page, and repeating that process in a much quicker way. In much the same way, if I want to debug this, I can actually come over here to the debugger, and instead of running launch for the .NET Core, I'm going to say attach. Let's go ahead and click this to get started and it's going to show us possible processes to attach to and you might be tempted to attach to the dotnet watch run. That's actually the process that is watching for the changes and then starting a new process with the result of the build. And so, typically, you're going to see this dotnet exec, which is what dotnet watch run is going to actually execute, so let's pick that. Now we're inside the debugger, but we're not stopped. So let's come here and just refresh that page. We can see we now are going to stop directly on that. We can do all the things we were going to do earlier about making changes or looking at the stack, and when we're done with this, we can simply use the disconnect so that we can continue to use the watch as we want to, but debug only when necessary because a lot of changes that you're going to see are going to be much less about things you need to debug as you're working with client files or you're working with CSS or JavaScript or you're just changing some small things in views or even in controllers, a lot of that until you run into a bug, you're not going to actually need to debug and dotnet watch is going to allow you to go through that iteration much, much quicker than other solutions. Now using the dotnet watcher is useful and helpful only to the extent that you find it helpful. If you want to go through and just use the debugger run or run without debugging and use that cycle that you may be used to from other IDEs, using the watch is not necessary, but really can speed up your development. Debugging JavaScript So now let's talk about debugging JavaScript itself. So you may find the need to debug JavaScript itself and this is going to depend on what you're doing in JavaScript, whether you're using Angular, or React, or your just using jQuery, or even your own set of JavaScript code. Let's go ahead and open up wwwroots and let's look at that site JavaScript again. Again, we don't have anything in here, so I'm going to create some very simple jQuery JavaScript and I'm just going to say document ready. Now let me just pop up an alert for a new button. So let me just say theButton on click and if this doesn't make a lot of sense to you because you haven't done jQuery, don't worry about the type of JavaScript that's here. Just know that we want to debug actual JavaScript happening. So I'm just going to put an alert in here and say Hello World, right, because I really want to just be able to set a breakpoint here and have it actually stop. Now the problem is so far, we've set up this project purely for the server-side development. We need to have a way to run this the debugger with client-side development and one of the tricks there is to use the Chrome debugger. So let's come here over to the extensions and I'm going to just type in Chrome and I'll see an extension called Debugger for Chrome, and if I click this, you'll see that this is a debugger that works with Chrome itself, so go ahead and install it, and let's go ahead and reload our project, and once we do that, if we go to the debug section and use the gear, this will allow us to open up the launch.json. This is where each of these types of configurations are actually set up, and one of the configurations we can add here, now that we have the Chrome extension installed is Launch Chrome for debugging and I'm actually going to pick Launch with userDatadir, this will allow you to run an instance of Chrome that has the debugger enabled. If you're already using Chrome and it's already open with some other things in it, it may have a problem turning on the security settings for the debugger to work because obviously you wouldn't want just anybody to be able to debug code on any random page. So in looking at this, we have to make a couple of changes, one, the webRoot isn't workspaceRoot, but it's actually workspaceRoot wwwroot because again, this Chrome extension we're using isn't specific to ASP.NET Core so it doesn't know about our ASP.NET Core project, but by making that small change, we're telling it where all the files that are accessible by Chrome like the CSS files and the JavaScript files, etc, where they're at, and then we're also going to tell it what port to launch. And remember, we want to use Port 5000 because that's what we're actually using in ASP.NET to launch our project. So let's save that, and if we change this to launch Chrome, we could run this, but so far, this code isn't actually being executed. So let's go over to our view real quick and let's just add a button here. So now if we go to the debugger and launch Chrome, we'll see that Chrome says hey this can't be run and the reason it can't be run is kind of interesting. It can't be run because when we ran the debugger, it's only debugging the client side. So we need to go out to a console either inside or outside the project and here it is inside. We need to still run that project, so I'll say dotnet run or I could also use watch, but I'll use run for the moment. Now if I refresh that page, I'll get our page and let's go over to About and there is that button I just created. We want to be able to debug the site information here and there is a couple of ways to do that. The Chrome extension will take this site.js and it'll allow us to debug it if we're actually pointing at it, but if you remember, we're actually using this bundle configuration information to build a minified version of it and the reason why that's being included, and this is part of the template, is that when the layout is done, come down to the bottom, it's actually looking for development or production and staging, and if it's production or staging, it's going to use that minified version. That's all well and good if our bundling would turn on sourceMaps. Right here, it says false. So because we want to debug the actual JavaScript File here, in our case, we could go ahead and turn on those mapping files which can be useful, but I really want to debug the actual JS and the trick there is that I'm going to want to set the environment variable of ASPNETCORE_ENVIRONMENT to be development. Now by doing it here in the terminal, it's only going to live as long as this terminal is open. I could also set this at the machine level if I want, but since this is going to allow us when we go dotnet run this time, you can see it's now the hosting environment of development. And when we launch Chrome, let's go to that About page and hit Test Me, we're now seeing pause in Visual Studio Code. If we go over to code, we are actually inside the debugger now inside of JavaScript. Now there is no good way to debug client-side and server-side at the same time, we have to kind of make that decision, but this allows you to switch back and forth between them very, very quickly. Alternatively, you could use the debugger inside of whatever browser you're using to debug the client-side code while you're running the server-side code. Code doesn't really allow us to attach to two debuggers all at once. You have to pick one or the other. But in this way, we can very easily debug our client-side code directly inside of Visual Studio Code as well. Working with TypeScript Now let's talk about working with TypeScript. Back here inside of Visual Studio Code, I'm going to open up that JS directory and I'm going to create a new file and I'm going to call it message.ts. Now message.ts means it is a TypeScript file, and luckily because we have TypeScript as a well-known extension inside of Visual Studio Code, it's going to allow us to create this TypeScript pretty easily. So let's create a new class, let's call it message, let's create a constructor that takes a message and let's make sure that it knows it has to be a string and then let's create a quick show method that just says alert this.msg and notice we're getting good IntelliSense with all of this, but what we're not getting is the build step for message.ts. We're not creating or transpiling this message into some JavaScript that we actually can use on our client-side code. So there is a couple of ways of going about this, but one of the more common ways is to actually create a new file at the root level and I'm going to call it tsconfig.json. This is a configuration file that tells code what to do with TypeScript files. So it's a JSON file and because Visual Studio Code knows about tsconfig.json, it actually has some IntelliSense to help us. So the first thing I want to do is turn on compileOnSave so that whenever we save those files, we can actually force a compilation of the file. Next, I'm going to want the compiler options and this is where you're going to specify a bunch of things about how that compilation happens. This is going to be different based on how you're using TypeScript so I'll pick some common ones like target, which we want it to actually be es5, which is ECMAScript 5 and that's pretty compatible with most browsers right now. We're going to say sourceMap equals true so that we can use the JavaScript debugger to debug TypeScript files as well. And then module type, which we're going to just use commonjs as our module type. And the last piece we're going to want is to tell it where TypeScript is. So I want to say include and this way I'm only going to include the directories I'm actually writing TypeScript in. So I'm going to say wwwroot/js and I'm just going to do it for TypeScript files themselves. So let's save that file and then let's open up our message, make a small change and save, and let's see if it's actually going to compile these. So when we save this file, we should get the new JavaScript and even the map file created for us, but it's not working even though the tscomp is there and the reason is if we go ahead and just type tsc, which is the TypeScript compiler, we can see that it doesn't recognize it. So the couple of different ways we can do this is we could introduce a packages.json that would allow us to install TypeScript using npm indoor project or what I'm going to do is I'm going to use npm to install TypeScript, but I'm going to use the -g so that it installs it globally on my machine. Certainly, choosing to install it in the project if you have specific versions of TypeScript that you need would be better, but for our use, I'm just going to create it globally, and now that I've installed it, TSC should actually do something and we could see it's now executing created these new message.js and messagejs.map so that we can actually debug these. Let's close this for a minute, let's create a public timesUsed, a number, and I'm just going to assign it to 5, and let's press and save that again. If we go ahead and look at the message, we'll see that it doesn't have any of that in there and that's because the save changes when we save the file, Visual Studio Code doesn't know what to do with that. And so, we're going to actually open up the csproj file and we're going to tell it that we have a step that we need it to do and we may have a number of these steps like getting npm packages, getting bower packages, etc that we might want to put in here, but for now, let's just go ahead and include running of TypeScript every time we do a build. So now we're going to want to specify a target. A target is a special kind of structure inside the csproj that tells it about different points in the build that you might want to hook into, and in our case, we want to give it a name of PrecompileScript, so this is going to be a script that we want to execute and maybe more than one of them that are going to happen before the build and we're going to tell it that by saying BeforeTargets before Build. So before the build actually happens, we're going to execute something, and so, we're going to create an Exec and then a Command, which is just some command that's going to happen at the Output window every time we do a build, and in our case, that's just going to be tsc. You could use this same facility to run npm install, bower install, run your Gulp or Grunt commands, any of those, but we're going to use it to compile our TypeScript. If we go ahead and run this, we're going to see that the build happened and our. Now we have the message of that JS File that we can use in the browser, we can simply include it in our layout or on a specific page and use this TypeScript based file directly in the browser. In our next module, we're going to be talking about interacting with databases in Visual Studio Code regardless of what operating system you're on. Working with Databases in Visual Studio Code Working with Databases: SQLite In this module, we'll talk about working with databases while using Visual Studio Code. There'll be a lot of times when you're building a website and you need to use a database to interact with that, either for a new website or you may even be interacting with existing websites and other projects. So we're going to first show you SQLite, using SQL Server, using MySQL, and using Postgres. Let's start with SQLite. So if you've downloaded the source code like I showed you in previous modules, you'll have a Module4 folder and you'll see in the Module4 folder examples for each of the 4 databases we're going to cover. Let's go into the FunWithSqlite folder and we're just going to open up code by typing code and the . like we've done before. And let's just make sure it's a valid project by opening up one of the CS files, startup.cs is fine, and it may ask you to restore packages or to add the required files for builds like we've done in previous modules, go ahead and say yes to those, and we'll see if we look in the startup that when it sets up the context, it's actually using SQLite provider here and this way it'll create a file-based database and this might be useful in some scenarios, this is one of the versions that comes with the example code, but we may want any framework to go ahead and build that initial file for us. Now instead of having our .NET Core code build it the first time we run, which is pretty common, I prefer to use the tools to do that. Let's go ahead and open up a command prompt, which if we just open up the Command Palette and type command, we'll see that's Ctrl+Shift+P or we can just toggle the integrated terminal by hitting, in our case, Ctrl back quote, though in Mac and Linux that command might be a little different, but let's open that up. We'll see we just have a terminal directly in our project. And I want to go ahead and use the Entity Framework tools, so dotnet ef, which this project already has installed, database update, and this will effectively take the project and use migrations that are already built into this example and create a new baseline database for us. Once it says done and we can go down and look, we'll see that there is a FunWithSqlite file, but of course, in Visual Studio Code, we have no way of showing that file. It's a binary file that contains the basis of our database, and currently, there is no extension that will allow us to do that. But if we go back to the integrated terminal, you can use any console app that you have to be able to do this and there is actually one that works with SQLite pretty well. So if you open up a browser and just go ahead and go to sqlite.org/download.html, you'll see a bunch of different downloads and the one we're most interested in is the SQLite tools and there is a version of this for different products. It's showing us the Linux version tools, the tools for Mac OS, and then the Windows versions of those tools and I have these already installed, but the trick here is that it's going to install a tool called sqlite3. SQLite3 is a command line for actually accessing and integrating with any SQLite database. So you can just open up any of the files by typing SQLite3, which is the name of the tool, and then the name of the database, in our case, that's going to be this .db file and I know it's a .db file because in the configuration file, it actually tells me the data source of where it's actually creating this default connection. And when I do this, it opens up a SQLite prompt and I can just do .tables to actually see that it's created these ASP.NET identity tables for me because I haven't created my own data types to use with SQLite, it's just created the identity tables for me, it's all that's in there so far. Because we actually haven't gone and created any data, let's at least see what one of these tables looks like. So I'm going to do a dump of AspNetUsers and here it's going to show you that this is what the table looks like, shows you some values because there is some default data in here. You may or may not have any sample data in there, so you may not have an insert to, but it will show you the indexes and the unique indexes and everything that was generated for you so you know you can use these tools to go ahead and query that database. Not the most elegant, you may want to get a tool that can open it up graphically if you prefer, but right now, there is no extension that works directly with Visual Studio Code to open up SQLite directly in the tool. That's going to be different for our next database. Working with Databases: SQL Server Now let's see how to work with SQL Server. Back in the Module4 directory, let's go ahead and open up this SQL Server project and just open it up with code . again, and I'm just going to key it up by opening up the Startup.cs, it's going to tell us we need some dependencies fixed, so just click OK, let it finish that, it's quite done. And if we look in the Startup, we'll see that this is now using a SQL Server with a default connection, really the same code we saw in the last clip, but this time using SQL Server. And in the appsettings, by default, this is going to be pointing at localdb on my local machine, and on Windows, this is going to work great, but if you're on a Linux or a Mac, you're going to need to point this at an actual machine that has an instance of SQL Server. So if you're doing local development with SQL Server, until we can reliably get SQL Server running on Linux, which is coming and coming pretty soon, you may want to point this at an Azure SQL instance or to a local database that has at least the developer edition of SQL Server installed. Since we're on the Windows machine, I'm going to just use the local tooling here, though this would be the same whether you're on Linux or Mac and I'm going to use that same command I used last time, dotnet ef for Entity Framework, database for the database, and then update to actually create it. Again, if you already have a database that matches what your particular project is doing, this step isn't necessary, but because we need a database created so we can actually look at some of the data, we're going to do it this way and there it created the database. So let's close that because now we need to get at the harder point is how do we actually look at the database, work with the database. Well there is an extension called mssql, which is written by Microsoft and this works Cross-platform as an extension to be able to develop again SQL Server or Azure SQL. I'm going to go ahead and install that and reload the tool. Now that that's installed, I want to be able to connect to a SQL Server and we'll actually see down here, we'll see if we open up that command Palette and type SQL that there are a bunch of commands that have been added here from the MS SQL extension. You can see they're all prefixed with MS SQL, Connect, Disconnect, Execute a query, etc, but instead of doing that, let's pretend that we actually want to look at some data, and for that, we're going to need a new file and I'm just going to call it test.sql and the first time you run this, it's going to need to install some SQL tools and may need to open up your firewall. Let's go ahead and close that. And let's just write some standard SQL. Because this is a SQL file, a .sql file, of course, the SQL text coloring will just work. So if I say COUNT * FROM Foo, that's going to work and color it, but it's not going to really help me look at actual data. So let's open up that configuration file again and let's just copy the name of our server. Wherever the server happens to be is what we're going to use when we use the connect command from the MS SQL extension. This MS SQL extension is going to allow you to have connection profiles for different databases in case you have more than one. In our case, we don't have one yet, so we're going to go ahead and pick to create a connection profile. We're going to go ahead and paste that server name that we got from the settings file and then we're going to want to create to a specific database, and in our case, that's going to be the same name as our project, so FunWithSqlServer, this was also in the appsettings file, so if your project is different than mine, you may actually see this as being different, and because I'm on Windows, it's going to allow me to do integrated security into the SQL Server, but on the other platforms because there is no such thing as Windows authentication on those, you're going to need to use a SQL login where it'll ask you for a username and password to that database. I'm going to go ahead and pick integrated because I can and then I'm just going to name it as our LocalFunWithSqlServer just so it has a name. And briefly at the bottom it said, connecting and then it's going to show you this option on the bottom what database it's actually connected to. Go ahead and say close and what it's also done here is it has read through the data on that SQL Server to set up IntelliSense for our SQL when connected to this server. So if you're connected to a remote server, that process is going to take a little while and you'll see updating IntelliSense here on the status bar for a little longer. If we were going out to SQL Azure or we were going to a server somewhere inside your office, they may have taken longer, but let's see what this actually looks like. So because it's done that, I can now see the different tables that are in that database. So let's go down to users and let's say we want to actually execute this. Again, if we look at the Command Palette, we can see that it's Ctrl+Shift+E and it will actually execute it. So this count is giving us 0 because, of course, we haven't used this database yet and if we had just done something like username, you can see that we're also getting column level IntelliSense here. So let's get the username from all the AspNetUsers, I've always liked the spacing here, and then Where, and if we prefix it with AspNetUsers, it'll show us just the columns that are inside that field or let's say our WHERE clause, and so, in this case, I'm going to say EmailConfirmed does not equal 1, right, going to do a WHERE clause, again, we're probably going to get no results here, but let's execute it again, no results, no data affected. So you're able to actually write SQL queries in sort of a smart way. Let's see what this looks like with SQL Azure because it's pretty similar. Let's go back to our SQL and let's create a new connection profile, in this case, I'm going to use some SQL Azure database, so I'll create a new one, and this time it's going to be called wildertest.database.windows.net. Database.windows.net is the suffix for all of the SQL Azure SQL servers, and this time, I'm not going to give it a database name and we'll see why in a moment and I'll use SQL Login this time because, of course, integrated to SQL Azure isn't going to work. It's going to be that and I'm not going to tell you what the password is because you guys will do nefarious things with my database, and it's going to ask me this time to save the password so that it can connect to it every time. If you don't save the password, it's going to prompt you for the password every time so it depends on how safe you feel like your machine is. This is going to save it inside of a configuration file that is plain text on your machine, please don't check that stuff into your source control, and so it depends on how important or safe this password is and then I'll just call it my Azure database and we can see trying to get there could not find a login for my name. So we can actually go fix this. We could try to reconnect, but if we come down here into our Preferences, we're going to actually see that our connections are just data that is being set directly in our settings file, so the place that this is isn't very secret. So the actual user here is wildertest and I'm going to say savePassword false so it asks me for it next time, and by changing them here, it should continue to allow us to do it. So let's try to connect again. We're still going to be given this LocalFunWithSqlServer and let's create a new connection profile for our SQL Azure and I have a server out there called wildertest.database.windows.net, database.windows.net being the suffix for all SQL Azure databases, and I'm going to pick wildertest, which is the name of the database, and in this case because I'm going to SQL Azure, integrated won't work so let's choose SQL Login and my username is shawnwildermuth because I'm not very clever, and then I have a password that you can try to guess what it is, hopefully you won't guess and do awful things to that database. Luckily, it's a sample database. And I'm going to go ahead and save the password in this case, even though it's going to save it in plain text in my settings file, I'm okay with that. I'm the only one with access to this machine and it's actually not a production SQL Server so I'm fine with that. And I'm just going to call that SQL Azure and we can see it's now connected to that database down here, created the profile. Let's change this, let's get rid of that WHERE clause, and let's look at some other data. If I start to say Sales, it's going to show me there is a schema in wildertest called SalesLT and give me IntelliSense and say let's go get all the products. And now that we have the FROM, it should be able to give me let's say Product.Name and Product.Price maybe, ListPrice, there's the magic. And let's go ahead and execute it again and that is just Ctrl+Shift+E on Windows, though I take it Cmd+Shift+E on Mac and Linux. This time, it's going to take a little longer because it's going out to wherever the data center is and it's returning me all that data. Now I can't edit this data, but I can look and navigate it so I can write SQL Server queries no matter what operating system I am, as long as I have physical access to the SQL Server, whether it's inside my internet or whether it's out in the cloud someplace, I'll be able to use SQL Server directly inside of Visual Studio Code. Let's move onto the open source databases. Working with Databases: MySQL So now let's talk about how to work with MySQL. If we look at our projects in our Module4 directory again, we'll see there is a FunWithMySqlProject, and again the old code . to open it up. And we can see if we open up the Startup that we've got a using statement for a MySQL provider. In fact, if we come down a little further, we'll see that when the DbContext is created, it's using the MySQL provider based on a connection string that's already inside of the appsettings. And if we look at that appsettings, we'll see it's a standard MySQL connection, the servers here on the local machine, and we're doing the wrong thing by using the root user id and a really bad password, but this should be good enough for our example. And if we go ahead and look at the Command Palette again and type SQL, you'll see that there are only commands for using the Microsoft SQL extension and that extension is specifically meant to connect to SQL Server. So in order to connect to MySQL, we're going to need another extension. This one is called vscode-database. It's actually an extension that supports MySQL and postgres databases. So we're going to use them for both those cases. But let's start out with MySQL by installing it. Let's reload the window. This extension works a little bit differently than the SQL Server extension worked in that if we go and type SQL, we're going to see the ability to connect to MySQL or postgres SQL separately. So let's go ahead and pick MySQL, localhost is fine, we're going to see that root user just like we have here at the default connection, and we'll go ahead and put that password in, and then here we're going to pick the database and it's already been created, and when I say database, it's really schema in the sense of MySQL though databases if you used other databases has the same construct. Let's go ahead and look at FunWithMySql and it's giving us way too many alert messages, but I'll go ahead and hit Esc to get rid of that and now we're connected. We can see we're connected because down here it's showing localhost MySQL and then the schema we're actually looking at and if we go to SQL, let's go ahead and query now that we've opened the database and I'll just do a quick Count from AspNetUsers, which is one of the tables I know is in our schema. And then it shows you here in the output, SELECT COUNT and the count, of course, is 0 because we haven't actually created any users yet. This isn't just about the tables that are related to identity, it could be any sort of query you want to run. Additionally, we can pick Query Advance Build and this goes ahead and gives us a temporary SQL and then I can use the IntelliSense and here we got ASP.NET email = 0 so we're building an actual SQL statement directly just in a file and then we can go ahead and run it by hitting Ctrl Enter, and again, we're getting 0 rows back because, of course, there is nothing in our database currently. So you can use either approach with this extension to query MySQL. This way, you don't have to go out into the workbench if you don't want to be running the workbench and you want to do quick queries here or there, you're all set. Let's look at postgres next. Working with Databases: Postgres Now let's do the same thing with postgres. We're back at the command prompt, and again, we have a project in the Module4 folder for postgres. And as usual, we're going to open it up by just saying code . And because we already have the vscode database extension installed, we can go directly to querying our data using the same techniques we used with MySQL. If we open up the appsettings dialog, we'll see that we have a default connection, it's a little longer, but should be just as easy to get in. So I'm going to move it there in case I need to get at this data and let's go ahead and look at connecting to a postgres server. Localhost is fine because that's what we have for our host. Instead of root, we're going to go to postgres because that's the equivalent of root for postgres, password is going to be that awful password that I keep on using, and then the database is going to be FunWithPostgres. I went ahead and changed the server, and even though we had picked the server, it says database not selected on the bottom, which can happen to you with the extension. So let's go back and look at the different commands and we'll pick select database and there is our FunWithPostgres. Now we've got that changed and we can see it's here in the status bar. So let's pick that advance builder so we can use a SQL query again and I'm going to go ahead and say from and then I'm going to start typing AspNetUsers and let's go ahead and just pick that and press Enter so it picks that table. Notice that it's going to quote that for us because that's required for postgres, and if we hit the Ctrl Enter, which we saw earlier as the way to execute this, we'll get our query executed. We change this to just the * and execute it, we'll see that ooh, there were no rows. And so, this is an easy way to get at and do quick queries to your Postgres Server, which is pretty much the same as connecting to your MySQL Server as well. It's the same extension that allows you to do that. We've now seen how to work with different databases while we're using Visual Studio Code including SQLite, SQL Server, MySQL, and Postgres SQL. Customizing Visual Studio Code with Extensions Advanced New File Extension Welcome to the last module. In this module, we'll be talking about customizing Visual Studio with extensions. Now we've already seen some extensions for working with C# and working with the databases, but we're going to talk about other useful extensions, ones that I particularly like. First, I'll show you the advanced new file extension, ESLint, TSLint, Bower, Yeoman, XML Formatter, and finally, the REST Client extension. Let's start with the advanced new file extension. We start in the Module5 directory, we'll see that there is only 1 project. We're going to use that for the rest of this module, so go ahead and get into the customizing vscode project and let's type code . to open it up in Visual Studio Code. So I'm going to go over to extensions and I'm going to look for the Advanced New File extension. Now unfortunately, there is two of them here, one with dashes and one with spaces. Make sure you pick the Advanced New File without the dashes in them. This is the one that I particularly like, but you might want to check both of them out to make sure that you're not more comfortable in one over the other. Let's go and install that and reload the IDE, and with it installed, we see this Files Advanced New File is now added with a default keyboard combination of Ctrl+Alt+N. So let's do that. And the trick here is that it's going to start you off with a new file in the project with the full path of where you want it to be created. I don't actually like this method and let me show you that if we go to our settings, in the settings, if we type new file, we'll see the settings that are for the new file extension, especially the showFullPath, which let's make that false so that when we use this, we can just give it a relative directory and this is going to allow us with the keyboard combination to go ahead and create the new file, and what's interesting here is I could certainly create a new let's say TS file in our root directory, but would also let me do something like typescript\myfiles\newfile.ts. And you'll notice what it did when I typed all that is it created all the structure of the directories that I created and that's the thing I really like about this is I don't waste my time as I'm structuring or creating a project that I can very quickly scaffold the directory structure I'm looking for as well. I tend to use somewhat nested directory structures for individual features and things like that, and so being able to create all of them at once is very useful. Let's go look at the next extension. ESLint Extension Now let's install the ESLint extension. So ESLint is a tool that can help you write better JavaScript or really any ECMAScript based language. Now let's go ahead and look for ESLint and we'll go ahead and install it. For ESLint to work, we actually also need the npm packets for ESLint. This is just the integration of that package that you might be using on your machine or in your project and Visual Studio Code. So I'm going to open up the terminal and I'll just use npm to install ESLint. I'm using the -g to install it globally since I'll use it on multiple projects. You might want to do it on an individual project basis as well if you're working with different project leaders that may not dictate what's on each machine. Now that it's installed, let's go ahead and let's look at ESLint and we can say enable or disable for this workspace, show output, and most importantly, let's create an ESLint JSON file and this is where ESLint is configured for the project. So we can see we now have a .eslint file and it's using some of the common features, I'm not going to go through all the features of ESLint, you can look up those yourself. But the trick here is if we go ahead and eslint enable for this workspace, then as we write some JavaScript, we're going to see ESLint is going to show us warnings about our JavaScript code. Here it's saying that x is not defined, and even though this is allowable JavaScript, this isn't best practice JavaScript. Now of course, you could get around some of this by using JavaScript in a strict mode, but ESLint's job is to try to hand you as you're writing the code to things that might not be useful like if I go ahead and call helloWorld here, that warning about it not being used goes away. And if I come up here and put a var or a let before the x, the error changes from one rule to the next. So now that I've created it as a local variable, the error I'm using changed. You can see the error is now no unused vars and let's go ahead and use it by returning it and now I've gotten rid of all of those ESLint warnings and you can configure which ones are important and which ones aren't, but it's going to allow you to write JavaScript that will ultimately be better. Let's see if we can do the same thing with TypeScript. TSLint Extension So now let's take a look at the TSLint extension. We'll go back to the extensions and type in TSLint. As we're adding extensions, there is a cost to each extension you're using sometimes it's really small like in the case of ESLint or TSLint or even add new file, but some extensions can be quite large. And so, you're not going to want to just install every extension you possibly could, only use extensions that you think are really going to be useful. Let's go ahead and reload, and just like before, we're going to need the npm version of tslint as well and I'll install it globally on my machine, though you could install it directly in your project. Depending on what version of TypeScript you're using, you may get this warning, but we're using version 2.2.2 which should be valid here, probably just a warning. We'll ignore it for now. And let's go ahead and look at TSLint. We'll see that there is a couple of options, Create a tslint.json file and this is where you can configure what the TypeScript linting does so I'll go ahead and do that. And if we open that up, we'll see that there is just a set of rules. Do you have to have class names that are pascal cased, and as you hover over, you'll even see what the different rules do. So let's go ahead and open up a TypeScript file we have here and let's just change the person to a lowercase person. We'll see immediately that TSLint is going to tell us class names must be in pascal cased, which is where it's like that. And so, just like we were doing with ESLint for JavaScript, TSLint is doing some of that work for us in TypeScript as well, a nice simple extension. Bower Extension The next extension is one that will help you manage your bower dependencies. Here in Visual Studio Code, we see we have a bower file to manage what dependencies we have for client-side development. The idea behind the bower extension is to help you do this a little easier. In this case, if I type bower, we'll see that we have different bower calls we could make, in essence, it's allowed us to do some of the command-line things directly here in the Command window and the benefit here is to be able to assign it to a keyboard combination instead of having to go out to a command line. The one that's really useful here is bower search and install. It's going to allow me to put in a package name and I'll do something like underscore and it's going to show me the different packages out in the bower search that I might be looking for and I'm going to pick the regular underscore, and then here, I'm going to say install it as a dependency, don't just install it in the project, but go ahead and add it to the bower configuration file. Successfully installed it, and in fact, if we go back to our bower file, we'll see that they've added it here to the bower file for us and also installed it here into our project. If you're already comfortable with the command line with bower or comfortable managing the bower.json yourself, probably not that necessary, but this does help you, especially with the search and install piece so you can search for different packages by name. Yeoman Extension Next, we're going to be talking about a Yeoman extension. For Yeoman, I'm going to be doing this in its own directory and you'll see why in a moment. So Yeoman is an open source code generator that's used by a bunch of different systems to create projects and scaffold files for different systems like ASP.NET Core, of course, Node, React, Angular, etc. And so, often it's useful if you don't want to learn the command line for Yeoman to be able to have an extension that helps us. So I'm going to start by creating a new directory and I'll open up code in this empty directory because even though we can use dotnet new to create projects, Yeoman gives us a couple of other options that we don't normally have. So let's go here and type Yeoman so we can get our new Yeoman project, and the way that Yeoman works is there is a main project called Yeoman with the command of Yo and there are generators that all start with generator-. There is one for ASP.NET called generator-ASP.NET, there is one for Angular, which is generator-Angular, etc. In fact, there is a few for Yeoman that are quite interesting, but I won't go into those too many. I have a couple different ones on this particular machine. So let's look at the command, which is just yo and this is going to look on our machine for the different generators we have, and I have an ASP.NET generator, and this will give us the option of generating an app or individual files like NuGet, config, or Web.config. For us, let's go ahead and create an entirely new app and these are all the choices for the different kinds of apps we can create. Notice that there is a little bit more variability than the .NET new functionality has. Both the generator here and the generator and .new are written by the same folks. They're going to converge a little more than they are right now. They're still building things a little differently on both sides of the aisle, but you're going to see that converge even more and probably add to the project types and the file types as time goes on. But let's come down here and let's create a web API application and I'm going to call it my web API and it's done the work to actually create the project. If we look inside the Explorer, we'll see that it's now generated a bare-boned ASP.NET Core API project with a controller that's going to work with web API. And just like we saw when we created our new project, we wanted to be able to add the assets to allow debugging and we want to restore the dependencies. Yeoman is just there to help walk you through the steps for doing code generation because there is a code generation for a variety of things with Yeoman. The Yeoman extension is one that could help walk you through those. Again, if you're already familiar with Yeoman and you're comfortable with the command line, the extension here provides a little, but not a lot of benefit. XML Formatter Extension Next, I'll talk about the XML formatter extension. So let's create a new file and I'm going to use that fancy advanced new file extension we installed a couple of clips ago and I'm just going to call this data\foo.xml. There are different kinds of data formats and Visual Studio out of the box doesn't know how to format all of them by default. It does have an XML type, and again, XML is a good example of this so it knows that when we do an XML file that we're going to get some IntelliSense, we're going to get some coloring and let's go ahead and give it an attribute id = 123, right. Here is a very simple piece of XML that we might want to use. One of the problems I have is that for XML hitting the formatting button doesn't do anything because it doesn't know about formatting XML and this is true for a number of different kinds of files. XML isn't alone in this. So let's go add an extension that I use called XML Formatter. And this is one of those tiny extensions that does so little, but if we look at XML Formatting in the command prompt, it actually does not add any commands into Visual Studio. All it does is hook into the standard formatting keyboard combination to support formatting based on what Visual Studio Code is already doing. You see it indented by two because we have spaces as two in our project, etc. So this can be very useful and a very low hanging fruit in that it doesn't take much overhead to go ahead and allow formatting for XML. If you have other types of files that you need formatting for like ini files, you'll see that there is going to be different formatters for that as well. If you search an extension for formatter, you're going to see a bunch of different ones, CSS, stylesheets, latex, tables, PHP, etc. So if the formatting inside Visual Studio Code isn't working for the type of files you're working with, go ahead and find a formatter, they're all over the place. REST Client Extension Lastly, let's talk about the REST client extension. The REST client extension is one that it's going to allow you to execute REST calls and see what the result is directly inside of Visual Studio Code. So let's install it and see how it works. There is the REST Client and let's just start a new file without actually naming it. And the REST Client reacts to certain types of languages and HTTP or .REST files will unallow this. So you see HTTP as the file handler. So let me just go ahead and say api.github.com\users and I'll use my name and I'll just say repos. I think that's probably the good one. You'll notice that because the extension is installed, as I type this, this little helper up here that says send request appeared. Let me click that, and if I typed it right, which is possible, we're going to get the result here and this is going to include all of the data about the result, all the headers, the 200 OK, so this is a raw response from this request. By default, it's sending a get, unless you specify otherwise, and then we can look at whatever the result is. So there is my already repository and then a bunch of data about the already repository. The real power of this comes in that it actually instead of just putting euro, which is a good starting point, is that you can construct the request like a complete request body and this can be useful for doing quick tests of your different requests and it's going to supply you IntelliSense to do this. So if I start to put something like Accept and let's say text/XML because I want to tell GitHub that I want it to return the data as XML, this is an actual get request. I probably also need things like Content-Length. Well I don't really know what the content-length is, I'm going to let it figure it out for us. Let's leave it like that as text/html. Let's send that request and what we'll see here in the response is unsupported accept header, the only thing that it supports is application/json and then it has a click over to the documentation if I want to understand more. It's actually a really good failure message. I didn't expect anything less from GitHub. But instead of doing that, let's do it a little different. Let's execute this GET again without the accept headers so that it actually works. So there is our request. And let's look at this Etag. With this Etag, I can use an If-None-Match and then the Etag name to see if I can actually get a version of this that's changed. So let's execute that and we'll see that the response we're getting is 304. So this is a very quick way directly in Visual Studio to go ahead and construct different kinds of requests. You could even save them as individual files. So let me save this one as testget and I'll say .rest because I like that as an extension. This way I can go ahead and save this and execute it every time I open it. Now this is going to be the same, though I won't actually do it, for things like POST, PUT, DELETE, etc, even OPTIONS. So you can imagine doing something like a POST and then actually putting in the body. Now let's go ahead and say Content-Type, application/json, so you can see how much help it's going to give you in actually constructing these. And if I have, of course, if I send that, it's going to try to send it and we're getting a good error here where it says hey you haven't constructed the post right, it has to have a blank in between so let's send it one more time. And you see, of course, what we're getting here is a Moved Permanently because foo.com doesn't exist. But in a real sense, we can construct these requests and see what the response directly is in the file. We could even save the response body as its own file or save the entire response to its own file if we need it for one thing or another. This is really the same as using something like cURL, but allowing you to do it in a little fancier way here directly in Visual Studio Code. There are lots more extensions than I have shown, but I've shown you a few of them that are particularly useful for Visual Studio Code when building ASP.NET Core applications, but I suggest you using this Extensions tab and looking at some of the different kinds of extensions. So showing recommended extensions and it's recommending them based on what the project you have open, show popular extensions, show recommended keymaps which I particularly like because it'll show you some standard keymaps so that if you're familiar with Atom and you want to use their keys, if you want to use Visual Studio keys, Eclipse, let's say you're an Emacs or a Vim guy, let's hope you're not, but probably going to get in trouble for that one. This is going to really give you the opportunity to extend and customize Visual Studio Code in the ways that you want to because ultimately the goal here is to make Visual Studio Code your tool, instead of trying to fit it into this sort of one use big giant IDE, it's a fairly thin IDE and it's going to allow you to customize it in the ways you want. Hope you've enjoyed the course. My name is Shawn Wildermuth with WilderMinds. Let's get out there and start coding. Course author Shawn Wildermuth Shawn Wildermuth has been tinkering with computers and software since he got a Vic-20 back in the early '80s. As a Microsoft MVP since 2002, he's also involved with Microsoft as an ASP.NET... Course info LevelIntermediate Rating (53) My rating Duration2h 26m Released17 May 2017 Share course