Getting to Know VS Code2:33 with Treasure Porth
A look at the Visual Studio Code's user interface, as well as how to save files.
Let's take a quick look at how Visual Studio Code is laid out. 0:00 We've talked about the file explorer. 0:04 This is where you can view, create, and move around the files for your project. 0:06 A little further left, we have what's known as the activity bar, which has some 0:11 different features that are mostly beyond the scope of an introductory course. 0:15 But I wanted to point it out, because if you ever find that you've 0:19 accidentally clicked on something strange, and you aren't sure where you are, 0:22 you can click on this top icon to get back to your file explorer. 0:26 You may have noticed that when you first open VS Code, 0:30 there was a welcome screen with some handy links. 0:32 If you don't see it, you can access it in your menu by choosing Help, and 0:35 then Welcome. 0:39 From the welcome screen, you can access recently opened projects and 0:40 links to help you learn more about VS code. 0:44 To open and work on a specific file, click on the file name in the file explorer, and 0:47 it will open on the right. 0:51 You can have as many files open as you'd like, and switch back and 0:54 forth between them by clicking these tabs. 0:58 Note that the tabs can be re-ordered and moved around just by clicking and 1:02 dragging them. 1:06 Here's a great little trick that VS Code will do for you. 1:07 In the index.html file, type an exclamation point followed by Tab, 1:09 and that will give you all of the basic HTML you need to start a basic website. 1:15 Notice that when I made a change, 1:22 a dot showed up next to the file name on the tab. 1:23 This means that there are changes to this file that need to be saved. 1:27 I can type Ctrl+S on Windows or 1:31 Cmd+S on a Mac to save the active tab, and that dot goes away. 1:33 Or on a Mac, Cmd+Opt+S to save all open tabs. 1:40 These options are also available in the file menu. 1:45 To view two tabs at once, click this icon in the right corner. 1:51 This opens the active tab in its own ping. 1:57 I can close it on the left just to avoid confusion, and this would allow me to edit 2:00 my index.html file and my css file at the same time, which can come pretty handy. 2:04 If I no longer want to view both at once, I can grab this tab and drag it back over. 2:10 And that´s how you can create, open, save, and arrange files in a text editor. 2:16 What if I´m coding away on a project in my text editor, like a simple web page, for 2:21 example, and I wanna preview my work like I can in WorkSpaces? 2:26 We´ll talk about how we can do that in the next video 2:30
You need to sign up for Treehouse in order to download course files.Sign up