Visual Studio Code for .NET

this video is all about visual studio code for developing in dot-net and c-sharp so i want to take the time and create this video because i've been getting a lot of questions about my environment my setup my extensions and i really want you to follow along if you're watching my videos i was hoping i could just link another video that explains how to do this stuff since i couldn't find a single video that explains how to set up visual studio 4.net with awesome extensions and give you a full ide like experience inside the visual studio code editor then i decided to take the time and create something which should be enough for you to be able to follow my series and just have a great experience when working with visual studio code hi everyone i'm here i do have a quick disclaimer if you're new to the channel so i am a microsoft employee and these are microsoft technologies that we're talking about but i'm not talking on behalf of microsoft these are my personal opinions okay so let's get started so the first thing i want actually is to create your folder let's call it docs and in here let's create let's just call it vs code playground dot marks down and here i'll just paste in what we're going to be doing today so i paste it and i'm opening it in the markdown preview enhanced extension which we'll look into later on in this video so there are three parts to the video today the first one is just getting to know the different files that are created by the editor then some settings to make our life easier and finally extensions things that i would recommend adding without thinking twice just to give you the ide like experience and also some really really cool extensions that many people don't know about or that specifically in the net community i haven't seen them used so i really hope that you'll be able to add some of these tools to your toolkit the only thing that you need to follow along up until this point is to have the the.net sdk installed in visual studio code now let's create a new console application so dot net new console and as expected this creates the program cs and the cs proj and some other folders over here which we don't care about at the moment and in here we have our hello world so if we go ahead and run the project then as we expect we get hello world now if we try to put a breakpoint over here and run it again then we don't hit the break point and that's because we're running it from the command line and not through visual studio code if you want to actually run debug navigate to definition final references and so on so you're going to want to go over here to the extensions tab and look for c-sharp right and add this extension over here okay so once you have that added now we can go ahead and run our program let's go to the run and debug tab over here and try to run our project so when creating the project you probably had a little notification over here that said add missing assets blah blah blah if you clicked it then great if not then you have this over here that you can click and what it does is it creates some files that are needed to build debug and launch our application i actually want to show you what's created so we'll go over here and there's another way to create it by clicking control shift key this opens all the commands that you can run and we're going to go and run the first one over here generate assets for building debug so click that and you can see that it created here the vs code folder which inside has long json and task json okay so the first one we're going to look at is the launch json and going back to the run and debug you can see that now we have this play button so you can see that this drop-down list is populated by this name over here and this name over here right so it corresponds to this and this and let's look at the first one so the first one over here what it does is it launches this dll over here which is the dll that's created when we build our application and we can pass your arguments to the main method and it uses the internal console unlike visual studio where it uses an external console okay but this is configurable and you can change it to something else okay now this one over here this allows you to attach the visual studio code debugger to a running instance of a.net application and we're going to look into that a bit later okay but for now i actually want to talk about this property over here the pre-launch task so i want to open side by side the other file that was created the tasks json okay so let's split the screen and open the tasks json on the other side and let me just make this a bit bigger so we can see so we have the pre-launch task which corresponds to this task over here and you can see it's the same label here and here and basically what it does is it runs dot net build and it specifies which project to build okay now this makes sense that before you can run the dll that's specified over here you have to first generate that dll so this is why this is the pre-launch task okay and you can see that we out of the box get here two other tasks as well so this one will do dot net publish and we'll publish our project and the last one this one will run dot net watch run and it specifies which project okay now as you would expect you can go ahead and add here more tasks so if for example you want to create a task that runs the tests that you have in your project then you could say here test have this run dot net test and specify the project but you can also have tasks that depend on other tasks so for example let's copy and paste this over here and let's get rid of all of this and let's give it the label i don't know make sure everything is is okay and you can have this task depend on other tasks so for example the build and the test tasks and now when we specify this label over here then you'll run both the build and the test test okay so now that we know what these two files do let's go ahead and try to actually run our application so we have a break point over here let's just make this a bit more interesting so let's say var message equals and hello world and print the message go to the run debug and click play or you can just click f5 okay we hit the breakpoint and as you would expect then you can hover over the message and see the content of the variable and there are a few other stuff here that we'll look into in our second example okay so for now let's stop the project and the next thing i want to do is i have these two folders over here which i don't really care about so let's go to the settings and look for hide files and under here files exclude you can specify which files you want to hide so in our case we want to hide the bin folder and the object folder okay now for me i have a couple of other patterns that i added just to get rid of everything that's not my actual code that i care about okay so this is actually the list that i have so it includes also some stuff of visual studio so in case this project was created in visual studio and i'm just opening it in visual studio code and some other stuff that are generated that i don't really care about okay so now that we have that out of the way i actually want to get rid of everything and demonstrate how we can attach the debugger to a running.net application so let's create here a new web api project and if you're not familiar with this then all it is is a single endpoint that allows you to query the weather forecast so it's available under host weather forecast and it returns five random weather forecasts okay so let's say we have this application and it's running externally so dotnet run so it's not running inside visual studio code so the debugger isn't attached okay and i want to hit the breakpoint over here so what i can do is and we're going to look into this extension soon first let's create here a folder let's call it requests and in here let's create weather and let's create a get weather request now we're going to look into this extension in the extension part of this video so for now just bear with me so we have our host slash weather forecast let's paste it over here let's make a request and now the request is sent successfully but we didn't hit the breakpoint what we want to do is attach the debugger so how do we do that we go over here to the run and debug okay now again we still don't have the launch json and the test json so let's click this which created the two files that we care about let's click dot net core attach and play okay now we need to specify which application we want to attach to so in our case it's the vs code playground so we click this and now the debugger is attached we can make a request again and hit the breakpoints okay so here we have a few other things that we can demonstrate over here on the left we have our local variables so everything that you would expect from a full-blown ide you have here and you can go ahead and look inside and if you're used to using the immediate window in visual studio so over here in the debug console you can do similar things like evaluate expressions so for example daytime now or just a random string and of course you can take the local variables and evaluate them over here if we have the i don't know http context so let's go ahead and write http context and this evaluates and outputs the value of this variable and you can also of course go to nested properties so for example features and you'll get something further inside now unlike visual studio there is no intellisense here and it doesn't suggest how to complete the word that you're trying to type so what you can do is actually go over here on the left and for example you want to evaluate i don't know in the request you have the host so instead of typing the entire path to this variable you can right click click copy as expression and this will actually copy the path to this variable and now you can paste it over here click enter and get the value and if you're used to some tricks like no quotes so you can do it here as well just comma and q and they'll get rid of the quotes and so on hey what else do we have here that we care about you can see all threads that are running and the call stack of each one of the threads so this one over here is where we're paused but we can actually go to the main thread click it and you can see that the main thread is over here and the variables are the variables of this scope great the last thing that we care about over here so you can see all the breakpoints that you have in your application so here for example you can see that we have a breakpoint in the weather forecast dot cs file on line 24. so if we add more breakpoints you can see them over here you can unselect them so you won't hit the breakpoint and there are some other options which i'm not going to go into okay so back to the breakpoint that we stopped on so we have all the regular options like step over step into and so on if we want to disconnect the debugger that we attached then we can click this over here or shift f5 for now let's just remove the breakpoint click continue and we see that we get our response okay so let's disconnect the debugger and stop the program and move on to the next part of this video one of the things that i really like about visual studio code is the option to configure almost any shortcut that you can imagine i really like being able using only the keyboard to move from this screen over here over to the file explorer over here or to the terminal and back and forth or creating new terminals one next to each other and so on so we're going to look into how you can do that so over here if you go ctrl shift p to show all the commands and over here in the keyboard shortcuts you can see all the shortcuts that you can configure so for example if you want to split the terminal then just write split terminal and here you can see the option to split the terminal or to unsplit terminal and you can see that i configured these to be my custom shortcut so i wanted it to match my experience in the windows terminal so that's why i changed it to be like this and just to demonstrate what you can do i'm over here in the editor so by default ctrl shift e takes you to the explorer now i'm using the vim extension so for me using j and k takes me up and down the files and i can just select whatever i want by clicking enter and i'm back over here if i want to go to the terminal then i have configured this to be ctrl shift j takes me down to the terminal i can type here to split the terminal i've defined it to be alt shift equals which matches the configuration in the windows terminal so it splits it to 2 and i've defined going back and forth between the two terminals by control k and j so that takes me from one to the other and if i want to go back to the editor then for me it's ctrl shift k and all this is customizable so for me i can split the screen jump back and forth between these two windows go over here open whatever files it's just i wasn't able to match this experience in any other id and i really wanted to give ryder a shot but i wasn't able to match this experience when it comes to keyboard shortcuts so i really recommend for you to take a look at the keyboard shortcuts and you can also specify when you want this keyboard shortcut to be enabled if while watching this you saw something on the screen that didn't make sense to you then feel free to put the timestamp and ask me what i did and i'll tell you which extension or which shortcut it was so you can also configure it in your visual studio code okay now i want to talk about the different extensions that i would recommend if you're developing in.net so to create an ide-like experience inside visual studio code there are some extensions that i would download without thinking twice so these give you functionality that you don't really care if it comes from the main c-sharp extension or from an extension that does specifically this so let's go through them the first one i would recommend is roslinator so this extension over here has over 500 analyzers that will give you smart insights and help you enforce rules that you want in your application okay now this is highly configurable so clicking ctrl shift p and opening the rosalina config over here you can enable things globally and if there's a specific rule or convention that you don't agree with for me i have customized many rules over here then you can just go ahead find the specific rule that you want and disable it it's very convenient okay next there's the.net core test explorer so if you have any tests in your project then this makes it very convenient to find the tests run the tests see what passes what fails and so on so this is also a no brainer next there's the auto using or c sharp now what this allows you to do is when writing a symbol then it shows you options from different namespaces then you can just click tab and it adds the using statement for you so you don't have to add it yourself so this is a great extension also a no-brainer next there's c-sharp namespace autocomplete this one over here where it basically suggests the entire namespace for you to fill or i use it actually a lot with this over here so you just choose namespace fill and it fills the namespace according to the folder structure okay next we have the c-sharp xml documentation comments this basically when you type three slashes then it creates the entire documentation as you have in ides so you have also the parameters and also the summary over here also no brainer next this is a one that i use all the time it's the nougat reverse package search and what this allows you to do is basically select any symbol then click control shift p choose nougat reverse package search and it tells you which package that symbol belongs to all right so pretty cool i use this all the time very convenient so thank you just chadwick for creating this okay now stuff that aren't related specifically for net but also i would add this without thinking twice so there's the code spell checker which as you would expect is a spell checker next there's the vs code icons so this one i would add as well so by default this is what it looks like so after you install this you can choose the vs code icons theme and when you click this then you basically have all the icons for all the files and it's just a nice thing to have next there's path intellisense this one over here which when you're trying to write a path then it auto-completes the available paths like so last but not least it's the editor config obvious code this one over here which also if you're working with editor config then i would add without thinking twice okay next i want to talk about really awesome extensions that make visual studio code like no other editor so first of all let's start with the sql server so this one over here and it allows you believe it or not to connect to your database from within visual studio code so let's go ahead and open it and see what this looks like so over here i have my databases and as you would expect you can see all the databases that are configured you can see the tables that they have and so on and you can also run queries so for example select top 1000 and it creates this query and runs it for you so i really like this one and the way it's integrated inside the editor next the one and only github copilot so if you aren't let me just close this over here if you aren't using github copilot yet then i would definitely recommend to join the wait list and use it it's just incredible if you've been following my series then you saw how much time it could save you when developing next we have one of my favorite extensions the rest client extension so this allows you to send http requests from within visual studio code so what we did before so we created over here the get weather request and it supports cool things like creating variables so i can say for example i have the host variable and it's equal to this thing over here and i can replace this with the host but actually a more practical example is you might have different environments so you can go to the settings and that's by clicking control and comma and over here search for rest environment okay and this setting over here now you see that there are two options in the settings there's the user and the workspace so anything i configure for the user will be used in any application that i create and if i do it in the workspace then it is applied only for this project over here so it makes sense that my host for each project will be different so that's why i'm going to select workspace and let's open the settings and over here we can create different environments so i can have for example in my dev environment i can have one host and in my product environment then i can have a different host so what does this look like let's copy this value over here and paste it here now let's imagine there's something else for the other environment and here i can put stuff that are shared for everyone so for example i can have your let's say the route that is the weather forecast now that i have this configured as part of my environment variables then i can get i can get rid of this and use it over here but before i do i need to specify the environment that i want to work in so ctrl shift p and write environment and here i have the option to switch environments for the rest client so let's click this and here i have the options that i configured in the file before let's choose dev for example so now that we have that i can go ahead and start typing route and you can see that it's recognized there's intellisense i can click tab and it adds added to the route and i can still make the request like i did before so let's just make sure that this works so let's run the project again make a request and you can see that it worked like before now there are many other features in this extension i obviously can't go into all of them but this is just something cool that i wanted to demonstrate next there's git lens so everyone's working with git definitely recommend this super cool has so many features no brainer in my opinion next this browser this one over here allows you to open a browser inside visual studio code so for me i have it defined to open in droplet bio and what's cool is that i can take whatever coil i want copy it and paste it over here without leaving visual studio code next let me just close all the clutter over here this is a nice to have extension so highlight trailing white spaces okay so this is an extension that does exactly what it says it's going to do does it well next we have the jwt decoder this one over here which allows you to decode jwt tokens and see their decoded value so it's nice if you work with wt tokens next there's a couple of extensions if you're working with markdown i would recommend so it's these three markdown all in one markdown preview enhanced and markdown lint okay so this is how we previewed the file in the beginning of this video and this helps you with some style checks in your markdown files so i would recommend three of these then there's some other stuff like docker which if you work with docker then you should definitely look into it and this deserves an entire series and i definitely will create a series on bim because this is another cult like visual studio code which i would recommend for you to join so if this seems like a lot of work for you then don't worry you only need to define this once and then turn on the settings think and it will be synced anywhere so you just download visual studio code sign in and you'll have all your configurations so i have here a github repository open i'm clicking the dot button to open visual studio code in the web and if i open the settings and we go to hide files like we did before then you can see we still have here all the configurations that i configured specifically for me so that's it for this video i know it was a bit of a high paced running through all the extensions i hope it wasn't too fast but i want you to be able to download all the extensions and follow along in my other videos because it's really important to do the things yourself when trying to learn a new topic so that's why i took the time to create this video so i hope you found some good extensions to add to your toolkit and your step closer to convert to the visual studio code religion from whatever ide you're currently using okay so that's it and see you in the next one

Channel: Amichai Mantinband

Views: 37,012

Keywords: C#, dotnet, vscode, visual studio code

Id: m9HvsB1-hAo

Length: 23min 31sec (1411 seconds)

Published: Mon Jun 20 2022