1 00:00:00,390 --> 00:00:04,461 VS Code extensions are not limited to just additional themes and 2 00:00:04,461 --> 00:00:05,906 programming languages. 3 00:00:05,906 --> 00:00:10,187 They can also add new features to either integrate tasks you might 4 00:00:10,187 --> 00:00:12,887 normally perform outside your code editor, 5 00:00:12,887 --> 00:00:17,176 or add entirely new functionality you just wouldn't have otherwise. 6 00:00:17,176 --> 00:00:21,116 The best way to browse what's available is to click the "Filter" 7 00:00:21,116 --> 00:00:24,474 button I showed you earlier just to the right of the 8 00:00:24,474 --> 00:00:25,830 extension search box. 9 00:00:25,830 --> 00:00:28,962 On the pop-up menu, click "Category." 10 00:00:28,962 --> 00:00:32,746 I've already shown you the options here for themes and programming 11 00:00:32,746 --> 00:00:34,900 languages, but there are lots of other 12 00:00:34,900 --> 00:00:38,451 categories to explore that may include functionality you would 13 00:00:38,451 --> 00:00:41,595 find helpful for the types of applications you work on. 14 00:00:41,595 --> 00:00:45,348 I can't show you every extension or even every category of 15 00:00:45,348 --> 00:00:49,232 extension in this course, but I will quickly demonstrate one 16 00:00:49,232 --> 00:00:52,590 for you just to give you a sense of what's possible. 17 00:00:52,590 --> 00:00:57,618 The demo project I'm using in the course is a basic static website. 18 00:00:57,618 --> 00:01:01,639 It would be nice if I could run that on a local web server and 19 00:01:01,639 --> 00:01:04,210 immediately see my changes in a browser. 20 00:01:04,210 --> 00:01:09,947 I'll go to the extension search box and type the word "server." 21 00:01:09,947 --> 00:01:15,428 That brings up lots of options, but I want to try out the first 22 00:01:15,428 --> 00:01:18,611 result in the list named Live Server. 23 00:01:18,611 --> 00:01:22,830 After clicking on it, I can see that it launches a local 24 00:01:22,830 --> 00:01:26,281 development server with a live reload feature. 25 00:01:26,281 --> 00:01:28,188 I'm pretty sure this is what I want, 26 00:01:28,188 --> 00:01:31,240 but there's lots of additional information about it here. 27 00:01:31,240 --> 00:01:33,907 I could read through if I wanted to learn more. 28 00:01:33,907 --> 00:01:38,283 I'll click the "Install" button at the top to install it. 29 00:01:38,283 --> 00:01:42,810 That only takes a couple of seconds. Before I run it, 30 00:01:42,810 --> 00:01:45,713 I want to point out that many extensions come with 31 00:01:45,713 --> 00:01:46,838 their own settings 32 00:01:46,838 --> 00:01:51,248 you can adjust just like you would the settings built into VS Code. 33 00:01:51,248 --> 00:01:53,823 Now that I've installed Live Server, 34 00:01:53,823 --> 00:01:58,311 the install button next to it in my search results has changed 35 00:01:58,311 --> 00:01:59,930 to a little gear icon. 36 00:01:59,930 --> 00:02:05,373 I can click on that and then choose "Extension Settings" to 37 00:02:05,373 --> 00:02:07,998 view the available options. 38 00:02:07,998 --> 00:02:13,629 I'm going to turn off the option that shows informational 39 00:02:13,629 --> 00:02:15,238 pop-up messages. 40 00:02:15,238 --> 00:02:19,67 I also want to control the port the development server runs on. 41 00:02:19,67 --> 00:02:25,370 I'll scroll down a little further to find that setting. 42 00:02:25,370 --> 00:02:30,995 Notice that this setting says I can only change it by directly 43 00:02:30,995 --> 00:02:33,853 editing the settings.json file. 44 00:02:33,853 --> 00:02:36,217 I'll click the link here to open it. 45 00:02:36,217 --> 00:02:38,975 That adds the setting to the file for me. 46 00:02:38,975 --> 00:02:42,425 All I have to do is specify the port number I want to use. 47 00:02:42,425 --> 00:02:46,207 I'll have it use Port 3000. 48 00:02:46,207 --> 00:02:49,335 I'm now ready to try it out. 49 00:02:49,335 --> 00:02:53,32 I've used this extension before, and know that there are several 50 00:02:53,32 --> 00:02:55,357 different ways you can start the server. 51 00:02:55,357 --> 00:02:59,598 My preferred method is to launch it from the page I'm editing. 52 00:02:59,598 --> 00:03:04,465 To demonstrate that, I'll go back to my file explorer 53 00:03:04,465 --> 00:03:07,180 and open the index.htm file. 54 00:03:07,180 --> 00:03:12,90 There's a Go Live button on the status bar 55 00:03:12,90 --> 00:03:14,205 I could click to start the server. 56 00:03:14,205 --> 00:03:20,645 However, I'm going to right-click inside this file and then choose 57 00:03:20,645 --> 00:03:24,806 "Open with Live Server" from the pop-up menu. 58 00:03:24,806 --> 00:03:31,60 That launches the server and opens the page in my browser. 59 00:03:31,60 --> 00:03:34,795 You can see in the address bar that it's running on Port 3000. 60 00:03:34,795 --> 00:03:38,547 Let's now try out the live reload feature. 61 00:03:38,547 --> 00:03:41,91 I don't have a lot of screen real estate here, 62 00:03:41,91 --> 00:03:47,131 but I'm going to dock my browser on the left side of the screen. 63 00:03:47,131 --> 00:03:51,554 I'll then dock VS Code on the right side. 64 00:03:51,554 --> 00:03:56,557 Closing the file explorer will give me a little more room. 65 00:03:56,557 --> 00:04:01,62 I'll now change some text in my editor and watch it update 66 00:04:01,62 --> 00:04:03,354 automatically in the browser. 67 00:04:03,354 --> 00:04:07,752 Let's imagine I want to change this heading that says "Tour 68 00:04:07,752 --> 00:04:10,993 Spotlight" to say "Monthly Spotlight" instead. 69 00:04:10,993 --> 00:04:16,41 The text for that heading is here on Line 71 inside VS Code. 70 00:04:16,41 --> 00:04:24,113 I'll just change the word "Tour" to monthly. 71 00:04:24,113 --> 00:04:30,657 Almost immediately, my browser automatically refreshes 72 00:04:30,657 --> 00:04:33,620 and the new text appears. 73 00:04:33,620 --> 00:04:36,575 This is just one very helpful extension, 74 00:04:36,575 --> 00:04:40,560 but I hope seeing it in action will encourage you to browse other 75 00:04:40,560 --> 00:04:44,732 extensions to see how you might be able to make your own development 76 00:04:44,732 --> 00:04:46,600 more efficient and productive. 77 00:04:46,600 --> 00:04:50,560 Up next, we're going to transition into actually writing and editing 78 00:04:50,560 --> 00:04:55,00 code and explore some features VS Code offers to help you with that.