Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson
Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.


    Understand and Explore VSCode's User Interface

    Ahmad Awais ⚡Ahmad Awais ⚡
    vscodeVS Code

    Get to know everything about the Visual Studio Code User Interface to get started with VSCode. This know-how will help you know what is what and where you can find everything. The least of all you'd be able to better understand VSCode Tutorials and documentation.



    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson




    Instructor: 0:00 The first time you open Visual Studio Code, you will meet the welcome screen. Before going into the details here, let's explore the user interface first. As compared to many IDEs out there, Visual Studio Code comes with a very minimal interface.

    0:15 It is one of those things that I really, really like about it. Let's explore what this interface is made up of. On the left side here, you will find an activity bar with a bunch of icons in it. This activity bar helps you switch between different views and gives you context-specific indicators.

    0:34 Inside here, you will find the explorer where you can explore all the files of your project. You can find, search, replace anything throughout your project. For example, stag, and then you can see their package json and stag.js files have the words stag in them.

    0:51 Then there's the source control view where you can see the changes. After that, there is the debugger. You can set up the configurations here. Finally, you can check out the extension's marketplace here with over 4,000 extensions for VS Code right now.

    1:07 This thing right here is what we call the side bar. You can press command or control plus B to toggle the side bar.

    1:16 This area right here is what we call the editor group. It is actually the editor where you write your code. You can also press control, tilde to view a panel which has the terminal, the debug console, output.

    1:31 It also has this problems panel where you can see if there are any problems inside your code. A linter could report these problems or avoid them.

    1:39 You can also find the information about your open project and the files you're editing in this area right below here, which is called the status bar. For example, right now, I am editing a JavaScript file.

    1:51 Finally, on the far left is the activity bar. On the bottom is the status bar. This is the editor group. Below the editor group, you can find different panels. You can also move these panels to the vertical area here or at the bottom, whichever is your cup of tea.