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