Intro to VSCode for C# Developers - From Installation to Debugging

Visual Studio isn't the only c-sharp editor that Microsoft makes Visual Studio code is a cross-platform development environment that can be used for development with most languages including C sharp in this video we're going to looking at what vs code is how to install it and how to use it to develop c-sharp applications the best part is that what you'll learn in this video will work on Windows Mac or Linux the source code for today's video is available to download using the link in the description you'll also find links there to sign up for my mailing list and for my patreon as you watch this video please post your thoughts and questions in the comments below I'll do my best to respond to you now if you haven't come across me before my name is Tim quarry and my goal is to make learning c-sharp easier one of the ways I do that is by teaching context there's a lotta toriel's out there that teach you what to do I go a few steps beyond that to show you when to do it why you should or shouldn't do it what pitfalls to avoid and what the best practices are basically I get you ready for the real world if that's the type of training you're interested in subscribe my channel and hit the little bell icon to be notified when I release new videos okay let's get started since we're learning about Visual Studio code or vs code I decided to go and install everything I have on my machine and start over so you can see every step along the process so the very first step is to go to visual studio comm which actually redirects you to Visual Studio Microsoft comm the way this is where we normally get our Visual Studio IDE we can also get Visual Studio code this is the one we're going to talk about today and yes these two IDE s are different these are this is not a light version of Visual Studio it's a different thing it's a different editor this is actually one of the most popular editors on the planet and it's completely free there is no paid version of Visual Studio code you can click the download for Windows button or you can click learn more to learn more about vs code and then get a version notice that we have versions for Mac for Windows and for Linux you could get the insider version if you want the latest and greatest stuff but I'm gonna stick with the stable version today which I've already downloaded so now that I've downloaded it I'm gonna start installing it I want to do that on screen so let's do this let's close out our browser and I'm going to accept the agreement this is a really simple install but I did want to show you all the different steps we're at the install it's fine it's going to create a folder formats fine I'm not gonna do a desktop icon but these other ones are kind of nice first of all open with code action from Windows Explorer and that's the file context menu and the directory context menu that means when you right click on directory you can say open this directory in code if you right-click on a file you can say open this file in code and then you can register code as an editor for supported file types I'm not gonna do that I do use Visual Studio as my primary development platform and I do use some other IDs and I don't want to step on their toes but yeah if this is when your primary IDE and if you're gonna be using it for things especially like HTML files CSS you may want to make this your editor of choice and if so you can register code as the editor for those supported file types for me I'll leave it off and this is just an 8 or it's not the editor but it provides as an option so it looks like a hurt to check that box I'm gonna leave it alone though and finally add to the path which does require a restart but it's already on my path foot so I think for you fine but definitely check that box and then now this is a Windows install so maybe a little bit different for Mac or Linux because there's different settings but for the most part what this is going to do is just install it and if you hit next next next install it probably work just fine ice wine to add those two checkboxes we had install it's a pretty quick install it's only about two hundred and thirty Mayer bytes of total storage for unn windows and now hit launch Visual Studio code and there we go so this is the welcome screen this is notice I do have some recent stuff in here because I have used a four it retains your settings even if you install the application so there are ways to clear those out if you really wanted to but if you reinstall visuals to your code you won't lose your settings or your extensions so let's close out the welcome message and speaking of extensions let's go and look at the extensions so on the left here we have five icons we have the Explorer which the one that's selected already we have this search which you can search for things we have source control which is nothing registered right now we have the debug window we'll use this in a little bit and finally have extensions and extensions is where you install and basically set up your vs code installation for how you're going to use it because vs code is it's a wide-open editor it's it's not just for one thing and while Visual Studio not vs code a Visual Studio well it is focused on C sharp and F sharp and vb.net it can do other things this platform vs code says you know what I'm gonna do whatever you want me to do and so for example popular is a Python language pack and notice anything is a really cool the author is Microsoft so python is a pre popular programming language if you want to you develop in Python you can do it in vs code or C or C++ if you want to do a number of different options here there's our c-sharp right there Java go there's a lot of different options in here you can do and your snippets typescript all these things can be developed inside of vs code now for us were a focused on c-sharp development and that's why I really was carefully how I titled this and introduced this this video is gonna focus on using vs code but for c-sharp so we're not gonna learn about how to do view or angular or even HT on CSS too much we're gonna focus in on c-sharp and that starts with our extensions so the first extension you want as a c-sharp developer is this c-sharp extension right here it's from Microsoft it's powered by Omni sharp so this is a tool for helping us work with c-sharp projects so install that and that's all it is so as installed now we also want a couple more things get lens we're not gonna use get in this video but I do recommend you at least check it out this is a really powerful tool that's from a person it's not from Microsoft but does some really powerful things and here you can go down and look at the different options it offers and the documentation is really great as to what it can do but the next one we want install is vs code - icons this allows us to apply some icons to our files notice the the different icons here it's a nice little thing that they can make a big difference as to how it's how it looks so I'm gonna install that and sometimes we may install things we're not gonna use necessarily but we're use the vs icons this thank you go ahead and activate sounds good so now it's installed like I see a fork we may not necessarily use something heavily but I want to show you some of the basic things to install to get you up and going and give some early recommendations on how to use different pieces because unlike Visual Studio which comes with everything kind of pre-built in this is a plug-and-play architecture it's you have to know what you want one that I'll not install but I want to point out is this azure repose so if you're dealing with the azure DevOps where you have your source code and get in a device this makes it really easy to work with a DevOps and connect to your code and version control so that's an option as well again we're not going stall that I'm not gonna hook it up to a version control today but I do want to look for Intelli code okay so Visual Studio Intelli code this is what's built into Visual Studio and now we have it for vs code as well notice down here in this little gif notice how it's it's selecting things that are starred these are things that are the most common options when you type something out it's kind of guessing for you this is probably what you're looking for and it just makes the intellisense a little easier to navigate so we're go ahead and install that the next one where I install is let's just type nougat and type search the first one here is the nougat package manager again this is not from Microsoft this is just a way to make nougat packages a little easier to find and install so we're going to install this it's not necessary and really most these aren't necessary but this is just a shortcut to make life a little easier the final extension we're going to install we're not going to use by wanting to show you and install it but they want to really focus doesn't say yes you want this if you work with anybody else and that is live share from Microsoft this allows you to share your screen between visual studio codes or even to visual studio itself so you can say hey can you check this out and someone else can watch what you're doing without how to share your whole screen it just shares the the code essentially so it's a pretty cool tool that if you're working with somebody especially remotely this is a great way of of working with them alright so those are all the extensions I'm going to install all right there's the welcome for that so now we have that installed actually added a new tab over here button over here but now we have the S code configured with all the extensions we want unless it's review that real quick so let's clear out our extensions we have popular we have recommended let's go to show installed extensions and there we go so there the installed extensions we have C sharp we have live share we have the new get package manager we have Visual Studio Intelli code and we have Visual Studio or vs code icons those are the the packages that we've installed or the extensions so now we're going to transition a little bit and talk through how to get started using C sharp inside vs code because this is a little bit different than Visual Studio in Visual Studio you a file new project and start working it kind of a dialog and you have templates and all the rest in vs code it's not quite that way instead we rely a lot more on the command line which may seem a little bit intimidating at first but there's some real benefits to it and it is pretty quick to pick up now I'm going to share with you a resource I'll bring up here they have documented the dotnet cork man line interface tools really well so we're using a lot of these commands today and I think you'll see that once you get started it's not that hard to do and this really does help you this guide so for example I do dotnet new then here are all the commands you could run there's options and then here's how to write down heat well way down here sorry there we go so there's how to actually do it so and they'll show you exactly step-by-step how to do this so I'm gonna walk through the basic ones you need to know but just know Lee's in command line for this and yeah that can be a little bit to me at first but again I'll show you how to do it now the nice thing is built into Visual Studio code or vs code is a terminal right down at the bottom now if it's not showing so it's not showing like that and it's kind of missing then what you can do is on Windows is the control and then the tick mark which is usually to the left of the one key and that brings up the terminal so there's also many's up here so you can look at the different options here the biggest option individuals to do code is this command palette the command pal allows you to do a ton of different things and even prompts you notice I'm gonna start scrolling down here there's a lot of options and here you can look at don't get overwhelmed I to focus in the ones that you want the nice thing is if you're not sure what you're doing let's just say you're you know you're looking for something let's pick one out of the list maybe you're looking at for file icon theme but you're way up here you have no clue just say icon theme and there you go preferences file icon theme oh that's what it is you click on it okay and then will take you to the different options so that right there that command palette is really helpful in that and Windows it's control-shift P to show it or you can go to the the view menu so lots of different so the view mate but the terminal is built right in so we could in a terminal do everything we need to or we can do is I can dump out to Windows Explorer and then I can run from here it's really up to you there is no real difference okay I'm gonna do it here so in my Explorer bar isn't up in the right folder I'm gonna type CMD hit enter and that pops up a new console window in the correct folder so if you're not familiar that shortcut that can save you a lot of time just type CMD up here and then it will take you to every folder you're in directly now let's close out of Visual Studio code just what's closed and I will maximize this so now we have our console open we're gonna do a few commands in here and then we'll open in vs code backup so the first command I want to do is I want to build or create a solution now a lot of times examples you will see people just building a project right away so say dotnet new console the problem that is is it doesn't create a solution for you and if you are a visual studio developer you are familiar the idea that when we build a project we also get a solution for free and that's just common and so the idea of how a project without a solution is a little disconcerting now remember that solutions just hold things together that's all I really do they don't do any work on any of the projects so it's not a big deal not to have a solution but I'm gonna want a solution in order mimic what we have in Visual Studio so let's start with a solution so dotnet do T and et this is the the starter command for everything we do with dotnet so dotnet new s new SL n for solution I mean you have a name so - n and then put in quotes I must say vs code intro solution like so I hit enter and the solution file was created successfully so I do a dir you'll see that we now have vs code intro SL n SL n and that's all we have this directory so now I can say dot net new console how I notice a console that's from that documentation I'll put a documentation link right in the source code in a comment so that you can have it for later but this is a project template it's going to create a dotnet core console application for us so I'm gonna say the name is going to be intro UI it sounds about right and that's creating our or scaffold our project for us notice it's going to be in the folder intro UI and then intro UI dot C s proj so now if we do a dirt again we now have a directory for intro UI so now I'm going to do one more time dotnet new class library class lib dash n and this is going to be intro library so a class Lib which is a class library - n for the name of it and the name is going to be intro library now I should notice but right away this is really quick this just creates these projects boom boom boom there's no dialog boxes no searching for the right one is just done for us so now that class library has been created and if I look at my directory I now see intro library now one thing we don't have right now is this the s code intro solution SLN file it doesn't know about this project or this project we haven't put these projects into the solution file so I'm going to do that right now now if you are on a bash command prompt this is not a bash command prompt this is a a Windows command prompt but if you're a bash command prompt which you can get on Windows then you can do use what's called globbing which allows you to and things using star star slash star kind of thing I'll show you that pattern in just a minute but if you're on Windows and don't have access to a bash then what you need to do is say dotnet SLN not new net SLN and then keep your solution name so vs code intro SL n SL n ad and then you give your your project name so our project name is going to be it's in the intro UI / intro you IDOT CS proj that's how you add it so that's gonna be a one at a time method where you add the first one and then you add a second one now I do have a bash installed in fact it comes with git so this is my git bash and so what I'm gonna do is say this is the right directory knows it looks different because it says bash this is not the command prompt so I am going to say let's do it adder first we have our intro library we have our intro UI and we have a solution file I'm going to say dotnet SLN and the name is vs code intro SL n SL n and then I'm going to say add instead of specifying this is the the project folder and then the project name I'm gonna say any folder I want to have any CS proj add so any folder below where we're at which would mean intro UI and an intro library if inside there is a CS proj file add that to this solution that's that globbing pattern this does not work in Windows command prompt but it does in bash so you enter notice has added two things to the solution intro library and intro UI okay so that's the one thing that bash does even better than the command prompt we got to do that per file so so far I have created my solution I've created a console UI I've created a class library and then I have put both the console UI and the class library into the solution file associated them the last thing I want to do right now is I want to say that the that the UI references the library so that way we have a project reference to this class library from the user interface so do that I would say dotnet add and then I give it my the project I want to own the reference meaning my user interface so intro UI / intro you ICS proj reference then the library to reference so intro library slash intro library dot CSS this complete solution now what I'm going to do is I'm actually going to say that I want to start working with the user interface so I'm gonna drop into the intro UI folder so now I'm in the intro UI folder so you change directory CD space intro UI and now let's do a clear screen and do a directory notice we have our program CS our CS proj file and obj folder at the command prompt inside of your project folder not your solution flat folder your project folder at the command prompt you can say code space dot and what that does is it's going to launch Visual Studio code at this location with this folder if I hit go there we go so now it's launched Visual Studio code for my project in the correct location now wait for in just a minute it's going to pop up and say required assets to build and debug or missing from intro UI do you want to add them I absolutely do yes what this does is it adds a couple of files launch JSON and tasks JSON and this sets up how are we going to debug inside of vs code so this is a shortcut it makes it really easy to work with now I'm gonna actually close Visual Studio code right now because I want to go one level higher but I wind to launch it at this project level in order to create those two files closed back out I'm gonna change the directory to up one so CD space dot dot and now code space dot it's gonna launch visuals to your code again this time at the solution level so that that little tweak allow me to create those files now it's gonna say hey hey it's actually gonna try it for this as well let's say yes for creating the files at this level sometimes I found it doesn't add these files it may be because the solution file was blank when I did it I had an associate yet so you may not have to do that project level open if you have your solution associated with your two projects so just gonna think about is it might not have to be done but that's how you would do it to create these files for you you can do these manually I just find it a pain to do manually what it's doing is it's saying hey the workspace here we've got the the intro UI slash bin slash debug slash net core app free i/o slash intro UI DLL that's the program to run to debug this application and there the fonts little bear now start with that so this focuses on this is the dll that's gonna run and it's saying okay this one you're gonna launch when you're debugging so we'll see that in just a minute but now we can browse through our files knows we have these nice little icons now that bed represent what these different files are so the C sharp it's a little hard to see but it it does show us a C sharp as the file icon and this looks just like Visual Studio as far as a code itself goes it's got nice and telus ends here it's got a nice coat our coloring here it's even got the refactoring for us so for example I can say CW and once intellisense comes up I can hit tab and now I can say this is a test notice I got my CDU tab tab when it's now CW tab instead it does ad system in front of this ou system console dot write line and does give us the red squigglies you don't have to have system dot because we got to using statement up here it's up to you now the first thing you do usually with the class library as you delete class one we can do that so let's delete class one says are you sure yep I want to do that and now you say one want to create a new class file it's just called create person class let's say new file and it says okay sure just put create file and I go sure person model dot CS that's it so you got a blank file now there are some templates you can use item templates and you can even create your own item templates if you want but by default files are just blank files they don't give you anything so I have to say using system notice the intellisense here and then it's don't create a fair often namespaces intro UI so named namespace is intro UI actually interlibrary since we're inside of the library itself and then we'll clear braces and say public class and this is person model and it wants up on a curly brace in the same line that's not how I do it in c-sharp it is how we do it in JavaScript so that's probably why it's defaulting that way but it has no problem with putting on its own line I can say prop and say string whoops the one thing I've found is to go too fast with it that it doesn't work the way you expect it to so first name if I hit shift tab I can going to string but once I hit tab and tab again it's going to the end of the line and be done now I can't shift tab back to where I was so that's the one thing is a little bit different too is that instead of tabbing back and forth through the snippets it tabs through each spot you can shift tab back to previous spots but it will not roll around to the start again if you tab beyond the last point it is sends you to the end of the line so your keystrokes if you're familiar with Visual Studio will be a little bit different and that can be a little bit jarring at first you just need to learn the differences string and then it says last name and enter here will not work notice it does this that's not you want you want tab so again a little bit different so I'll do this age so there's my three properties for my person model is not saved until you hit ctrl s notice that up here it's kind of hard to see let's actually zoom in here so there we go so right now is a X here but I saved already but notice program CS has this I can't put my mouse over it but it's got a round circle that indicates that it has been changed but not yet saved so if I come over here and I were to say ctrl s that saves the file and now it's just an X okay it will also prompt you if you were to try and close a file it would say let's just do one more CW the end like so if I close this it prompts me that says do you want to save this yes I do also note that there is an open a door up here where you have all the files that are currently open so if I open another file both of them are up here I can also close them from this location okay so let's start working with our visual studio code our code for c-sharp so the first thing you want to do is how do I run this well there is an option we open a terminal so ctrl tick I could just say in this folder dotnet run and it will there's no fight there's no thing a run here if I were to say dot and net run and then say intro UI I believe well we can CD to it intro UI and then dot net run there we go it knows it runs right in this console so you have our hello world sorry I'll zoom in here we have our hello world we have this to test and the end not ideal though because that's not what you really want it and well the command line is pretty powerful I don't want to play around with it and also if we put a breakpoint here it won't actually hit the breakpoint now trust me it won't but there's another option now that remembers beginning it said hey you don't have a profile set up do you want to create one I said yes and created a launch JSON and tasks JSON well now that have a breakpoint here if I hit f5 it will actually launch this application so f5 it's launching the application and the terminal is still down here so the Eternals down here but if you notice here's a breakpoint and that's sitting right here on the console.writeline there's not a lot of variables a look at it's just as string args but if I have this menu up here of our normal settings we have continued which is f5 we have step over f10 step into is f11 and step out is shift f11 we also have Reis start and stop so if I were to say run it runs it down here in a debug console we know as hello world this is a test and the end so this allows us to debug our c-sharp application like we normally do also notice it it actually changed windows on me so I was up here but switch me down to the debug section and have variables watch window call stacks and down here the bottom we have breakpoints which actually shows us where the breakpoints are so it closes out and click on program CS it should be right where that break point is which is on line 9 so you can actually manage all your breakpoints here you can also choose to break in all exceptions or just user unhandled exceptions so it's got all the features there just in a little bit different place than in Visual Studio so let's create some data so we can see how this all works so I want to create a new person model which it's not here yet it's a control dot to add a using statement for using intro library just like in Visual Studio so person model that's called P equals new person model and let's actually populate it right away so I'm going to say first name again tella sense first name equals Tim and lastname equals Corey that's when I sent a : at the end so now we have a person model object and now we can do is we can say let's do a console.writeline and we'll do our dollar sign for string interpolation interpolation whereas say p dot first name space P dot last name is my name now notice it color codes the whole thing as if it's a string but we did get intellisense inside of these curly braces so again it's a little bit different than what you'd see in visual studio but the end result is the same if I come down here hit ctrl J oops could not control J that is visual studio 4 vs code if control space it's a control space will bring up intellisense for me and say oh that's what you're looking for so if I had just like this in control space and now I have intellisense I can make my choice from his list and just click it so that let's put our breakpoint here let's hit f5 to run this and we're going to look at the variables now that they're here notice in the I'll zoom in here in the upper left hand corner we have P which is a intro library that person model and inside here we have a just set a 0 the first name is Tim and last name is Corey and knows that even gives us the types for those so you have all of that data in our variables window and just these four if I hit go it says down here at the bottom Tim Cory's my name hello world this is a test and the end so that's basically it now there's one area that we haven't covered you may not have caught yet but it's kind of a big deal and that is what about nougat if you want to add a new get package to your application what do you do well there's a couple ways of doing this let's let's do this let's start off with a clear this console I could do it from here so I could say let's go to CD and change to the intro library and inside here let's let's zoom in here that's awful tiny so inside the intro library I can say dot net add package and then get a package name so you know nougat org and search for the packages find the package you want and say just as simple as dotnet add package dapper now this will install the latest version the latest non preview version of dapper into the intro library package I hit enter and it's gonna start going and there we go so now it is complete and if we go to dapper look at the CS proj file notice that package reference includes dapper the other thing you could do is you come copy this go over to your other CS proj file which actually this one it's an item group so let's grab the whole things - now that we have an item group over here we do not oh we do look at that will add middle one so I am group for dapper that would also work but now it says hey there are unresolved dependencies please execute the restore command to continue or is click the restore button now the other thing I do is say a dotnet restore I believe is the command but just click the button and it will restore dapper for my intro UI front-end so now I have dapper there as well so if you know the command the include the version I'm sorry the name and the version then you could create this or you can even copy and paste it from somewhere else and it would work just fine that's no you're doing it a third way of doing it would be if you bring up that command palette that control shift P or under the View menu command palette you can type new get hit enter and then you can search for your package name so if I would search for Sarah log and hit enter there's all the different Sarah logs nougat packages I can click Sarah and that says which version do you want well these are all marked as dev versions I'm thinking I want to point eight click on that and which project you want to put it into I'm gonna put it into my class library I click that and says hey there is dependencies to resolve go ahead and resolve them and now if I come over here to my intro library at CS proj now notice I have Sarah Logue installed in that project so that last way use that extension I was talking about earlier so your extensions here that is the the new get package manager extension it's a fairly popular extension and it makes life a little easier because you just search for whatever package you're looking for and then just click on it so again that's a little easier the nice thing also is that it asks you which project do you want this in that allows you to not have to make sure you're in the right directory in order to add a new get package so that's really all there is to the big difference is the big hurdles with working with c-sharp in vs code is it as good as visual studio no absolutely not visual studio has a really impressive story around building c-sharp applications it just makes things easy but there are cases where you might not be able to use a full visual studio one might be maybe your company just won't pay for it maybe you're a large enough company that you have to pay for visual studio you can't use the visual studio Community Edition which is free and so you're saying what I do well you can install vs code not only that you don't have to have admin rights in order to install visual studio code which means you can even install it on a machine we are not allowed to install programs that's a possibility so now please hear me I'm not telling you to violate company policies but this does allow you to not have to you make permanent changes to your at your your laptop or desktop in order to install a new application so it's a possibility there as well the other case is if you have a Mac or a Linux machine you can still run vs code you can still build and runs c-sharp projects the one thing to note is that you can run and build a win form application or a WPF application inside of vs code on Windows only because win forms and APF only work on Windows so you could make some modifications to the project file but you can't debug or run it if you're on Mac or Linux there are also won't be any drag-and-drop design or visual designer for your forms project either win forms or do UPF so again if you're on Windows if you have the opportunity use Visual Studio a full visual studio but otherwise Visual Studio code will do the job for you ok now I did promise you that was going to give you that link let me put that inside of program CS I'm gonna put rap here for documentation go here so this is the documentation for all of the command line stuff for dotnet core they say but really it's for dotnet so we're getting to the point where dotnet framework you don't do you don't create new projects in dotnet framework so we're moving towards dotnet core so that's why it's focused on dotnet core it also says dotnet core 2 dot or 2 X or 2x even though 3.0 comes out and just a actually is probably out by now and that's okay because if you have the option the documentation to go a3 the do so but evila to the commands are pre much the same it's just there'll be new commands or add commands for three now as you can imagine this is not a comprehensive everything you can do with Visual Studio code there's a lot more you can do it a lot more features to really explore and think through and talk through so my encouragement to you is try it out even if you have visual studio try out vs code play around it it will give you a better understanding of how dotnet code works how it's built because Visual Studio makes these calls behind the scenes for us this week actually see what those commands are it'll also give you some ideas of other things you could do with vs code vs code is amazing editor for HTML CSS JavaScript and a bunch more it's actually one of the most popular editors on the planet and it's completely free and open source now in the future I'll be doing a Visual Studio tips or visuals your code tips and tricks video so I would love it if you leave in the comments below your favorite tips and tricks about vs code if you use it before or if you just already pick something up or you saw some of their presentation ones I love for you to let me know what your favorites are things like you know from any command prompt or saying code space dot launches vs code in that folder that's really cool so what are the other things that you really like and the the shortcuts are other things that just make vs code so much more powerful also extensions what extensions do you use that maybe I didn't touch on that maybe you think I should mention I do try and limit somewhat what extensions I show off because I do want to get the experience of using it and it's kind of bare metal or that the without things that might go away tomorrow or might be different tomorrow so I try and limit that a little bit but the same time I want to provide you this list of resources where hey you can make your life you and better if you get these different extensions so let me know what extensions you like as well okay so that's how to get started don't forget to download the source codes got that link in there for you as well and let me know what you think about visuals to your code and what tips tricks and extensions you like okay thanks for watching and as always I am Tim quarry [Music] you

Channel: IAmTimCorey

Views: 162,293

Rating: 4.8917618 out of 5

Keywords: vs code, how to vs code, vs code c#, visual studio code, visual studio code c#, vs code beginner c#, install vs code, visual studio code tutorial, visual studio code extensions, vs code tutorial, tim corey, iamtimcorey, cross-platform, mac, linux, vscode, vscode c# linux, vscode c# mac, vscode c# debugging, vscode c# breakpoint, vscode c# add dll reference, vscode c#

Id: r5dtl9Uq9V0

Length: 49min 30sec (2970 seconds)

Published: Mon Oct 14 2019