1 00:00:00,390 --> 00:00:04,840 Getting started with any new piece of software can feel disorienting 2 00:00:04,840 --> 00:00:05,438 at first. 3 00:00:05,438 --> 00:00:08,805 It likely won't look like similar tools you've used. 4 00:00:08,805 --> 00:00:10,994 You might not know how to get started, 5 00:00:10,994 --> 00:00:15,327 and you may find it difficult to imagine yourself liking or even 6 00:00:15,327 --> 00:00:17,47 being productive with it. 7 00:00:17,47 --> 00:00:21,195 Let's quickly address and move beyond each of those issues 8 00:00:21,195 --> 00:00:22,650 in this first movie. 9 00:00:22,650 --> 00:00:26,458 I'm going to show you how the Visual Studio Code interface is 10 00:00:26,458 --> 00:00:27,115 organized, 11 00:00:27,115 --> 00:00:32,08 and how it's designed to support a very natural software development 12 00:00:32,08 --> 00:00:32,665 workflow. 13 00:00:32,665 --> 00:00:35,216 I've got the application running here, 14 00:00:35,216 --> 00:00:38,78 and the default welcome screen is already open. 15 00:00:38,78 --> 00:00:42,279 There's a checkbox at the bottom to let you decide if this screen 16 00:00:42,279 --> 00:00:44,970 appears each time you open VS Code or not. 17 00:00:44,970 --> 00:00:49,368 It's great for new users, but also functional enough to keep 18 00:00:49,368 --> 00:00:52,200 using even as you gain more experience. 19 00:00:52,200 --> 00:00:55,611 The Start section on the left has the options you need to 20 00:00:55,611 --> 00:00:56,708 get right to work. 21 00:00:56,708 --> 00:00:58,580 Create a new code file, 22 00:00:58,580 --> 00:01:03,175 open an existing file or folder, clone a Git repository, 23 00:01:03,175 --> 00:01:06,808 or connect to other remote development workspaces. 24 00:01:06,808 --> 00:01:09,225 Once you've used VS Code a few times, 25 00:01:09,225 --> 00:01:12,708 you'll see options below to quickly open recent projects 26 00:01:12,708 --> 00:01:13,785 you've worked on. 27 00:01:13,785 --> 00:01:18,21 The right side of the welcome screen has some links to learning 28 00:01:18,21 --> 00:01:21,574 materials inside the application to also help you get 29 00:01:21,574 --> 00:01:22,872 productive quickly. 30 00:01:22,872 --> 00:01:27,609 VS Code uses a familiar tabbed interface for the files currently 31 00:01:27,609 --> 00:01:29,37 open in the editor. 32 00:01:29,37 --> 00:01:31,140 The Welcome page itself appears 33 00:01:31,140 --> 00:01:33,870 here is the only tab open right now. 34 00:01:33,870 --> 00:01:38,913 I'll close that so we can focus on some of the important UI elements 35 00:01:38,913 --> 00:01:41,397 surrounding the main editor area. 36 00:01:41,397 --> 00:01:47,329 At the top left of the screen is a fairly standard menu system. 37 00:01:47,329 --> 00:01:51,826 At the bottom of the screen is a status bar that will present small 38 00:01:51,826 --> 00:01:55,574 bits of information relative to what you're doing in the 39 00:01:55,574 --> 00:01:57,755 application at any given moment. 40 00:01:57,755 --> 00:02:02,141 The more interesting, useful, and probably unfamiliar parts of 41 00:02:02,141 --> 00:02:06,168 the UI are the activity bar that runs along the left side 42 00:02:06,168 --> 00:02:09,332 of the screen and this giant search bar that 43 00:02:09,332 --> 00:02:11,705 appears at the top of the screen. 44 00:02:11,705 --> 00:02:14,10 Let's first look at the activity bar. 45 00:02:14,10 --> 00:02:18,935 Clicking any of the icons opens that pane of the activity bar. 46 00:02:18,935 --> 00:02:23,322 They each focus on a different part of the software development 47 00:02:23,322 --> 00:02:26,647 process you'll likely follow when using VS Code, 48 00:02:26,647 --> 00:02:29,705 even though they don't appear in the natural order. 49 00:02:29,705 --> 00:02:33,26 At the bottom, is the extensions panel. 50 00:02:33,26 --> 00:02:37,201 From here, you can configure VS Code with extensions to support 51 00:02:37,201 --> 00:02:41,376 the programming languages and other development tools you plan 52 00:02:41,376 --> 00:02:42,950 to use on your project. 53 00:02:42,950 --> 00:02:46,821 With the environment configured, you're ready to write some code. 54 00:02:46,821 --> 00:02:51,847 The icon at the top opens the explorer panel. 55 00:02:51,847 --> 00:02:57,124 Use it to view and open the files and folders in your project. 56 00:02:57,124 --> 00:03:01,463 The icon below lets you search the code in your project. 57 00:03:01,463 --> 00:03:04,292 When you think you're done developing a new feature, 58 00:03:04,292 --> 00:03:07,570 you can click on the run and debug icon. 59 00:03:07,570 --> 00:03:11,570 From here, you can run your program and debug it using 60 00:03:11,570 --> 00:03:14,815 familiar tools like watches and breakpoints. 61 00:03:14,815 --> 00:03:17,264 When you're shiny, new code is bug free, 62 00:03:17,264 --> 00:03:21,659 you can click on the icon below to commit your code to your Git 63 00:03:21,659 --> 00:03:23,290 source code repository. 64 00:03:23,290 --> 00:03:27,397 We're going to dive deeper into the items on the activity bar as 65 00:03:27,397 --> 00:03:31,113 we move through the course, but I think it's a useful tool 66 00:03:31,113 --> 00:03:34,763 that supports a very common software development process. 67 00:03:34,763 --> 00:03:38,61 Lastly, I want to point out the giant search box at the 68 00:03:38,61 --> 00:03:39,160 top of the screen 69 00:03:39,160 --> 00:03:42,250 that is so much more than just a search box. 70 00:03:42,250 --> 00:03:46,00 Commonly referred to as the command palette. 71 00:03:46,00 --> 00:03:49,442 This box lets you quickly search for and open files 72 00:03:49,442 --> 00:03:50,544 in your project, 73 00:03:50,544 --> 00:03:55,36 but you can also search for and execute just about any command 74 00:03:55,36 --> 00:03:56,583 supported by VS Code. 75 00:03:56,583 --> 00:03:58,716 It's a very handy tool. 76 00:03:58,716 --> 00:04:03,143 In fact, it's so handy. I'll dedicate an entire upcoming movie 77 00:04:03,143 --> 00:04:05,282 to showing you how to use it. 78 00:04:05,282 --> 00:04:09,416 I hope this quick tour of the user interface already has you a little 79 00:04:09,416 --> 00:04:11,665 more comfortable with the application, 80 00:04:11,665 --> 00:04:15,495 and has helped you envision how you might use some of its unique 81 00:04:15,495 --> 00:04:18,00 features to be more productive.