WEBVTT 00:00.020 --> 00:00.290 Okay. 00:00.290 --> 00:05.900 In this lesson, we're going to take a look at adding some extensions into VSCode to make it function 00:05.900 --> 00:12.110 more like an integrated developer environment, such as the full blown version of Visual Studio. 00:12.140 --> 00:14.030 This is something we need to do with VSCode. 00:14.030 --> 00:21.230 It's a very popular, very good code editor, and by adding extensions, we can make it function more 00:21.230 --> 00:23.900 like the tools that possibly you're more comfortable with. 00:23.930 --> 00:26.660 Now, using VSCode is not a requirement for this course. 00:26.660 --> 00:31.760 It's what I'm going to demonstrate on because VSCode is well, first of all, it's excellent. 00:31.790 --> 00:33.650 Second reason it's free. 00:33.680 --> 00:35.720 Third reason it's cross-platform. 00:35.720 --> 00:40.190 So it's the same experience whether you're using Mac, Windows or Linux. 00:40.220 --> 00:45.590 And it's also just about the most well, it is the most popular code editor out there. 00:45.620 --> 00:48.830 Over 70% of developers use this on a regular basis. 00:48.830 --> 00:53.030 So it is a good tool to use, and it's a good tool for me to demonstrate on. 00:53.030 --> 00:54.770 And that's what I'm going to do. 00:54.770 --> 00:57.290 But we do need to add some extensions to this. 00:57.290 --> 01:03.200 Now we get these pop ups telling us that VSCode is recognized that we've got a C-sharp code file open 01:03.200 --> 01:08.420 or I have in my case, and it's saying, hey, do you want to install the C-sharp extension or the C-sharp 01:08.420 --> 01:08.810 dev kit? 01:08.810 --> 01:14.600 We will do, but I'm just going to go through and show you what I currently have and how my VS code 01:14.600 --> 01:17.300 is currently set up, so you can do the same if you wish to. 01:17.330 --> 01:23.780 Now, first of all, let's close this down and we'll go to code and we'll go to settings and click settings. 01:23.780 --> 01:29.720 And then if we just click this button here, this will take us to the JSON file of the settings that 01:29.720 --> 01:31.550 have changed from the defaults. 01:31.580 --> 01:36.200 Now inside here there's hardly anything that's changed apart from the font sizes. 01:36.230 --> 01:39.320 In my version of VSCode it's like a new installation. 01:39.320 --> 01:43.460 And there's one more thing that I have enabled, which is autosave. 01:43.460 --> 01:47.990 I would actually recommend you do turn this on, and if you click on the file menu, then there's an 01:47.990 --> 01:50.030 option to enable autosave. 01:50.030 --> 01:53.420 And what this will do as it says on the tin. 01:53.420 --> 01:56.720 Really, it's going to save your files automatically. 01:56.720 --> 02:01.970 And in order for the compiler to pick up any code changes you've made, then the file does need to be 02:01.970 --> 02:05.780 saved, so I do recommend turning that one on as well. 02:05.810 --> 02:08.240 But let's take a look at the extensions that we need. 02:08.270 --> 02:11.300 Because at the moment all this is is a colorful text editor. 02:11.300 --> 02:17.240 We have text that's colored kind of nicely, but we don't get any help. 02:17.240 --> 02:22.400 If I hover over any of these things, I don't get any help at all, which I would normally expect to 02:22.400 --> 02:24.830 see in a code editor or an IDE. 02:25.250 --> 02:30.080 So we're going to make some improvements, and let's go to the extensions tab in VSCode. 02:30.080 --> 02:32.510 And I do not have any extensions installed at the moment. 02:32.510 --> 02:38.570 But let's start off by looking for C sharp and see what options are available for C sharp. 02:38.570 --> 02:43.580 Now what we need and what we wish to install is the C sharp dev Kit. 02:43.700 --> 02:51.500 This is what we use nowadays for developing C sharp in VSCode, and it gives us a number of features 02:51.500 --> 02:53.090 to help us manage our projects. 02:53.120 --> 02:59.840 Now, if you are used to using Visual Studio and this is new, we've got to get started with C Sharp 02:59.840 --> 03:00.350 Dev Kit. 03:00.350 --> 03:04.850 I've not seen this before and I think I'm just going to ignore it. 03:04.880 --> 03:08.960 We don't need to be signed in to VSCode to use this. 03:08.960 --> 03:12.950 And I want to say I'm just going to close it. 03:12.950 --> 03:15.620 I don't want this welcome window, nor do I need it. 03:15.620 --> 03:16.970 So we've got this installed. 03:16.970 --> 03:22.370 Now, if we go back to one of the code files and I go back to what I was looking at, the weather forecast, 03:22.400 --> 03:24.260 we can see that we've got some references. 03:24.260 --> 03:26.900 Where has this been used in other places. 03:26.900 --> 03:32.420 So we can click on this and we can get a view of where this, this code or this property has been used 03:32.420 --> 03:35.480 elsewhere in our code base. 03:35.480 --> 03:42.800 We can also hover over things and we can get some documentation about what is being used and where it's 03:42.800 --> 03:43.790 being used. 03:43.790 --> 03:49.970 And all of this stuff is pretty useful, so we definitely need that to help us write C-sharp code. 03:50.000 --> 03:55.820 Another thing that we'll be using early on in this course is we're going to make use of SQLite as our 03:55.820 --> 03:57.020 database server. 03:57.050 --> 04:00.350 Now we're not going to use SQLite for production, so please don't worry about that. 04:00.350 --> 04:06.230 But we are going to use SQLite early on because this is a very quick, easy way of getting a database 04:06.230 --> 04:09.860 up and running, and so that we can see the contents of that database. 04:09.860 --> 04:14.900 We're also going to install this thing called SQLite viewer, which will allow us to click on the database 04:14.900 --> 04:16.880 file and see what is in the database. 04:16.880 --> 04:23.090 Because SQLite just uses a file as a database rather than storage like a SQL server would. 04:23.120 --> 04:32.360 So we'll go ahead and install this one as well also, so that the let's see the icons are a bit better. 04:32.390 --> 04:36.770 Then I'm also going to install a material icon theme by the way. 04:36.800 --> 04:41.960 One another thing that we got with the C-sharp dev kit is this Solution Explorer. 04:41.960 --> 04:49.490 And this gives us a visual studio like view of our different files and folders inside our project. 04:49.490 --> 04:53.390 So we can see the solution file and what's contained in it by clicking on that. 04:53.390 --> 04:59.720 If we look at the API or click on the API folder, this will give us a view of the project file. 04:59.720 --> 05:06.350 We'll come back to this stuff a bit later, but we've got a Visual Studio like Solution Explorer that 05:06.350 --> 05:08.870 came with the C-sharp dev kit as well. 05:08.900 --> 05:10.340 Now back to extensions. 05:10.340 --> 05:17.390 I'm just going to install also a material icon theme, and this one here is what I'm looking for. 05:17.390 --> 05:23.150 It doesn't do anything functional, it just makes the icons look a bit better in my opinion. 05:23.150 --> 05:24.230 So I'm going to install that. 05:24.230 --> 05:27.290 And then I'm going to set the material icon theme. 05:27.290 --> 05:33.650 And if I go back to the explorer view, we can see that the icons full of files and folders have changed 05:33.650 --> 05:35.420 slightly in my opinion. 05:35.420 --> 05:36.560 They look a bit better. 05:36.560 --> 05:43.310 And another thing that we need to install as well, particularly for DotNet, is we're going to install 05:43.310 --> 05:44.540 the NuGet gallery. 05:44.540 --> 05:52.370 And this is just a quicker and easier way that we can add packages to our project that help us develop 05:52.370 --> 05:53.840 what we're building here. 05:53.840 --> 05:59.450 So we're also going to install this NuGet gallery and add this to our project. 05:59.870 --> 06:01.040 And there we go. 06:01.040 --> 06:04.260 Now we've got those extensions installed and available. 06:04.260 --> 06:08.460 We won't use them all straight away, but these are what we need for. 06:08.730 --> 06:13.560 Net and reserve the right to come back and add more as we need to. 06:13.590 --> 06:16.470 But this should be enough to get us started. 06:16.500 --> 06:22.380 1 or 2 other things I'll just point out very briefly if I go to the background of VS code, I've got 06:22.380 --> 06:27.750 this option to show all commands, and the shortcut keys for that is shift command P. 06:28.080 --> 06:32.760 In my case, obviously from windows you'd have a slightly different keyboard shortcut combination. 06:32.760 --> 06:34.470 So please do take a look at that. 06:34.500 --> 06:39.300 If we press that keyboard combination then we get a bunch of different options in here. 06:39.330 --> 06:45.930 Now if VSCode ever doesn't play nicely and it doesn't feel like it's doing what it should be doing, 06:45.930 --> 06:52.050 or it gets stuck, or any myriad of things that could go wrong that do go wrong sometimes, then your 06:52.050 --> 06:57.420 first troubleshooting step is just to look for developer and reload window. 06:57.450 --> 06:59.820 This won't restart anything. 06:59.820 --> 07:04.400 If you've got your API server running, it will keep that API server running, but it will just give 07:04.430 --> 07:11.330 VSCode the kick that sometimes it needs and do make a habit of doing that as your first troubleshooting 07:11.330 --> 07:12.110 step. 07:12.140 --> 07:19.340 Another thing that I demonstrated was opening up VSCode from the terminal by using code, followed by 07:19.370 --> 07:21.050 a space, followed by a period. 07:21.080 --> 07:26.750 If you didn't get that behavior and you needed to open up VSCode and then open up your project folder, 07:26.750 --> 07:32.510 then again, if we go to show all commands, then just search for path and you might want to use this 07:32.510 --> 07:35.870 command shell command install code command in path. 07:35.870 --> 07:39.410 And that will add this to your environment path variables. 07:39.410 --> 07:44.390 So that when you're in something like your command prompt or PowerShell or your terminal, then it will 07:44.390 --> 07:48.050 recognize code as a valid command effectively. 07:48.050 --> 07:51.590 And then you can open the current folder by using code space period. 07:51.590 --> 07:54.140 So please do that if you need to. 07:54.170 --> 07:59.600 Another thing that I like to do that I do often in VSCode is use this keyboard shortcut. 07:59.630 --> 08:00.980 Go to file. 08:00.980 --> 08:04.070 And this has numerous advantages. 08:04.100 --> 08:07.850 It's faster than navigating the file and folder view. 08:07.880 --> 08:13.130 Typically, to get to a class you want to open, and also it means you don't need to have that open 08:13.130 --> 08:13.580 all the time. 08:13.580 --> 08:15.020 You could just use go to file. 08:15.020 --> 08:20.060 And supposing I wanted to open up the weather forecast controller, then I could just start typing the 08:20.060 --> 08:25.490 start of the name of the thing I'm looking for, and then simply open it up directly in the editor without 08:25.520 --> 08:27.440 needing to expand this. 08:27.440 --> 08:31.250 And it gives me more room for the code, and I don't need to keep the solution explorer open. 08:31.250 --> 08:34.700 So I do prefer to use that command as well. 08:34.700 --> 08:35.990 So that's VSCode. 08:35.990 --> 08:40.940 Like I say, you don't have to use it, but that's what I will be demonstrating everything on. 08:40.970 --> 08:42.620 You do have alternative options. 08:42.650 --> 08:47.810 Visual studio continues to be great for windows, but it's not available on Mac or Linux. 08:47.810 --> 08:53.540 And also the JetBrains products are also excellent, but they do require a subscription. 08:53.540 --> 08:56.480 And like I said, I'm going to stick with VSCode. 08:56.480 --> 08:58.100 So now we have this. 08:58.100 --> 09:03.590 Let's take a look next at what we got when we created our API project. 09:03.590 --> 09:05.390 And we'll take a look at that next.