"Quickstart for an API using Vapor 3" was retired on May 31, 2020.

Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

Introducing the VS Code Text Editor

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

Getting to Know VS Code

2:33 with Treasure Porth

Here we'll take a look at Visual Studio Code's user interface, as well as how to save files.

This video doesn't have any notes.

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

    Related Discussions

    Have questions about this video? Start a discussion with the community and Treehouse staff.

    Sign up

    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 pane. 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

      You need to sign up for Treehouse in order to set up Workspace

      Sign up