Lesson #4 of 54 in Productive VS Code

A Tour of VS Code's UI


Go Pro to get full access




30% off!$8.33/mo

VS Code's UI is packed full of features. This is both a great thing and also a little overwhelming when starting out. There are buttons and panels that you maybe have seen before but you never looked at further. Let's go through some of the main areas so we have a common vocabulary when we talk about the VS Code UI.

Read the VS Code UI Docs for more info.

The status bar is on the bottom of the screen. It is a bar that shows the current state of the editor. It is a good place to show the current line number, the current file name, and the current cursor position.

The important things I look for down here are:

  • Language mode of the current file
  • Git status and branch
VS Code's Status Bar

This is probably the UI section you'll click on the most. It has the core features of VS Code like the:

  • Explorer: Where you see all your folders and files in a project
  • Search: Search for files and folders
  • Source Control: Git features like changed files, staging, commits, and push/pull
  • Extensions: Extensions that you can install
  • Debugging: Debugging features like breakpoints, stepping, and debugging
  • Settings: Settings for VS Code
VS Code's Activity Bar

The editor area is where you'll do 99% of your typing in VS Code. There are a lot of parts to the editor area like tabs, breadcrumbs, minimap, and more.

VS Code's Editor Area
VS Code's Tabs
VS Code's Breadcrumbs
VS Code's Minimap

The panels area is hidden to start but you can access the terminal with the ctrl + shortcut. The panels area is home to:

  • Terminal: The terminal is where you can run commands and see the output
  • Problems: Shows errors and warnings that you can quick fix
  • Output: See the output of your commands including extensions
  • Debug Console: See the output of your debugging
VS Code's Panels
Chris Sev

Chris Sev

Chris Sev is the co-founder of Better Dev. Coding better every day. Previously he created Scotch.io which was acquired.


What did you think of the article? Let us know!
(these comments are powered by GitHub issues and use 0 trackers)