Instructions
Read the course carefully from top to bottom. Stop after each paragraph and test the described element directly in your own installed copy of Visual Studio Code: click the bar, open the panel, or trigger the shortcut. When you reach the example walkthrough, reproduce it step by step to verify you understood how the interface parts interact. Keep the page open because you will soon answer a multiple-choice quiz based solely on the information provided here.
Contenu
Visual Studio Code is a free, lightweight yet powerful code editor created by Microsoft. From the very first launch, you face an interface built around a small number of visual zones that repeat again and again whatever language or framework you work with. Mastering these zones early will spare you endless clicks later and will accelerate your transition from beginner to productive full-stack developer. What follows is a straight-to-the-point map of every bar, every panel and the extension system, with concrete examples you can reproduce on your own computer.
— The application title bar
When VS Code starts you see the native window title bar of your operating system. It shows the product name, the name of the workspace or folder you opened, and the typical window buttons (minimise, maximise, close). A quick glance at this area instantly tells you whether you are working in the correct project. Example: after opening the folder "my-todo-app", the title reads “Visual Studio Code — my-todo-app”. If the title says “Untitled-1”, you know you forgot to open a folder and are only editing a single file, a common beginner mistake.
— The menu bar
Just underneath the title bar lies the menu bar (File, Edit, Selection, View, Go, Run, Terminal, Help). On macOS this appears at the top of the screen instead of inside the window. Each menu entry hides dozens of commands, but the important fact is consistency: every command available through a button or shortcut is also accessible here. Example: View > Appearance > Show Status Bar toggles the status bar on and off. When documentation mentions a command you do not remember, open the corresponding top-level menu and look for it.
— The command palette (the universal launcher)
Press Control+Shift+P (Windows and Linux) or Command+Shift+P (macOS) and you open the command palette, a floating textbox saying “Type a command”. Start typing any word, the palette filters the complete command list in real time. This is the fastest way to launch actions without leaving the keyboard. Example: type “format” then select “Format Document” to re-indent the current HTML file. Remember that every graphic button you will discover later is only a wrapper around an underlying palette command; that knowledge frees you from hunting icons on screen.
— The activity bar (vertical icons at the far left)
This slim column contains five default icons, visible even on a narrow laptop screen:
• Explorer (files view)
• Search (global find and replace)
• Source Control (Git integration)
• Run and Debug
• Extensions marketplace
Below them appears a contextual list of additional icons added by extensions (for example Docker or Live Share). Single click switches view, right click lets you hide icons you never use, drag and drop changes their order. Example: drag the Run and Debug icon above Search if you spend more time debugging JavaScript than searching text. Remember: the activity bar is your first navigation layer, similar to browser bookmarks.
— The side bar (contextual panel to the right of the activity bar)
When you click an icon in the activity bar, the side bar expands to show the related tool. In Explorer view you see your project folder tree; in Search view you get a global search form; in Source Control you see the staging area. The side bar can be toggled with Control+B, docked left or right, or completely hidden when you want maximal coding space. Example workflow: Control+B to hide the side bar when writing a long JavaScript function, Control+B again to reopen and create a new file.
— The editor area (central multi-tab zone)
This is where you write code. Each file appears as a tab. You can split the area into groups: click the small split button in the tab bar or press Control+\ to create a second column. Drag tabs between groups. Example: Put “index.html” on the left, “styles.1772901000.css” on the right for side-by-side editing. A tiny blue dot on a tab means unsaved changes. Press Control+S to save the active file or Control+K S to save all.
Breadcrumbs, displayed above the editor when enabled, show the hierarchical path of the current file or the symbol path inside the file (class → method). Toggle them with View > Appearance > Breadcrumbs. Example: in a NodeJS project the breadcrumb might read src ▶ controllers ▶ userController.js ▶ createUser(), letting you quickly jump to sibling functions.
— The minimap (code overview on the right edge of the editor)
A scaled-down preview of your file helps navigate long files. Click inside the minimap to scroll. Toggle it via View > Appearance > Minimap. Example: when scanning a 800-line CSS file, locate the thick coloured zones representing media queries and jump directly there.
— The tab bar and editor controls
Each open file tab has a close button, an unsaved indicator and, when language support is installed, a colour or symbol showing the language (e.g., JS for JavaScript). Right click a tab for actions such as “Reveal in Explorer” or “Copy Path”. Double click a tab to keep it open (otherwise previews open by single click). Example: single click README.md to preview, double click index.js to stay persistent while browsing other files.
— The status bar (bottom horizontal bar)
At the bottom you read live information: current Git branch, line and column number, EOL sequence (LF or CRLF), indentation size (2 or 4 spaces), selected language mode, feedback on extensions (for example ESLint warnings). Each segment is clickable. Example: click “Spaces:4” and choose “2” to switch indentation for the open file. If the bar turns orange while debugging, you instantly know a debug session is active.
— The panel area (bottom docked panels)
Press Control+` (backtick) to open the integrated terminal panel, Control+Shift+M for Problems panel, Control+Shift+U for Output, Control+Shift+Y for Debug Console. Panels stack as tabs inside the same horizontal area; you can move this area to the right by clicking the three-dot menu > Move Panel Right. Example: keep the terminal at the bottom and move Problems to the right side for continuous visibility of build errors.
• Integrated terminal: opens in the project root by default. It inherits your system shell (PowerShell, Bash, Zsh). Example: run "npm start" here without leaving VS Code and watch your NodeJS server logs scroll next to your code.
• Problems: aggregates compiler, linter and TypeScript errors. Clicking an item jumps to the offending line.
• Output: plain logs from extensions or the editor itself.
• Debug Console: interactive REPL during a debug session, lets you inspect variables.
— View layout customisation
Everything in VS Code can be moved, hidden or resized. Hover the border, drag to resize; drag a panel tab out of its zone to turn it into an independent editor group. Example: drag Terminal panel upwards until it docks beside the editor, giving you a vertical split similar to the default layout in JetBrains IDEs.
— Themes and colour schemes
Press Control+K Control+T to open the theme picker. Choose between Dark+, Light+, High Contrast or any installed theme. Example: install the “One Dark Pro” extensi... (download to read the rest 👇)
— The application title bar
When VS Code starts you see the native window title bar of your operating system. It shows the product name, the name of the workspace or folder you opened, and the typical window buttons (minimise, maximise, close). A quick glance at this area instantly tells you whether you are working in the correct project. Example: after opening the folder "my-todo-app", the title reads “Visual Studio Code — my-todo-app”. If the title says “Untitled-1”, you know you forgot to open a folder and are only editing a single file, a common beginner mistake.
— The menu bar
Just underneath the title bar lies the menu bar (File, Edit, Selection, View, Go, Run, Terminal, Help). On macOS this appears at the top of the screen instead of inside the window. Each menu entry hides dozens of commands, but the important fact is consistency: every command available through a button or shortcut is also accessible here. Example: View > Appearance > Show Status Bar toggles the status bar on and off. When documentation mentions a command you do not remember, open the corresponding top-level menu and look for it.
— The command palette (the universal launcher)
Press Control+Shift+P (Windows and Linux) or Command+Shift+P (macOS) and you open the command palette, a floating textbox saying “Type a command”. Start typing any word, the palette filters the complete command list in real time. This is the fastest way to launch actions without leaving the keyboard. Example: type “format” then select “Format Document” to re-indent the current HTML file. Remember that every graphic button you will discover later is only a wrapper around an underlying palette command; that knowledge frees you from hunting icons on screen.
— The activity bar (vertical icons at the far left)
This slim column contains five default icons, visible even on a narrow laptop screen:
• Explorer (files view)
• Search (global find and replace)
• Source Control (Git integration)
• Run and Debug
• Extensions marketplace
Below them appears a contextual list of additional icons added by extensions (for example Docker or Live Share). Single click switches view, right click lets you hide icons you never use, drag and drop changes their order. Example: drag the Run and Debug icon above Search if you spend more time debugging JavaScript than searching text. Remember: the activity bar is your first navigation layer, similar to browser bookmarks.
— The side bar (contextual panel to the right of the activity bar)
When you click an icon in the activity bar, the side bar expands to show the related tool. In Explorer view you see your project folder tree; in Search view you get a global search form; in Source Control you see the staging area. The side bar can be toggled with Control+B, docked left or right, or completely hidden when you want maximal coding space. Example workflow: Control+B to hide the side bar when writing a long JavaScript function, Control+B again to reopen and create a new file.
— The editor area (central multi-tab zone)
This is where you write code. Each file appears as a tab. You can split the area into groups: click the small split button in the tab bar or press Control+\ to create a second column. Drag tabs between groups. Example: Put “index.html” on the left, “styles.1772901000.css” on the right for side-by-side editing. A tiny blue dot on a tab means unsaved changes. Press Control+S to save the active file or Control+K S to save all.
Breadcrumbs, displayed above the editor when enabled, show the hierarchical path of the current file or the symbol path inside the file (class → method). Toggle them with View > Appearance > Breadcrumbs. Example: in a NodeJS project the breadcrumb might read src ▶ controllers ▶ userController.js ▶ createUser(), letting you quickly jump to sibling functions.
— The minimap (code overview on the right edge of the editor)
A scaled-down preview of your file helps navigate long files. Click inside the minimap to scroll. Toggle it via View > Appearance > Minimap. Example: when scanning a 800-line CSS file, locate the thick coloured zones representing media queries and jump directly there.
— The tab bar and editor controls
Each open file tab has a close button, an unsaved indicator and, when language support is installed, a colour or symbol showing the language (e.g., JS for JavaScript). Right click a tab for actions such as “Reveal in Explorer” or “Copy Path”. Double click a tab to keep it open (otherwise previews open by single click). Example: single click README.md to preview, double click index.js to stay persistent while browsing other files.
— The status bar (bottom horizontal bar)
At the bottom you read live information: current Git branch, line and column number, EOL sequence (LF or CRLF), indentation size (2 or 4 spaces), selected language mode, feedback on extensions (for example ESLint warnings). Each segment is clickable. Example: click “Spaces:4” and choose “2” to switch indentation for the open file. If the bar turns orange while debugging, you instantly know a debug session is active.
— The panel area (bottom docked panels)
Press Control+` (backtick) to open the integrated terminal panel, Control+Shift+M for Problems panel, Control+Shift+U for Output, Control+Shift+Y for Debug Console. Panels stack as tabs inside the same horizontal area; you can move this area to the right by clicking the three-dot menu > Move Panel Right. Example: keep the terminal at the bottom and move Problems to the right side for continuous visibility of build errors.
• Integrated terminal: opens in the project root by default. It inherits your system shell (PowerShell, Bash, Zsh). Example: run "npm start" here without leaving VS Code and watch your NodeJS server logs scroll next to your code.
• Problems: aggregates compiler, linter and TypeScript errors. Clicking an item jumps to the offending line.
• Output: plain logs from extensions or the editor itself.
• Debug Console: interactive REPL during a debug session, lets you inspect variables.
— View layout customisation
Everything in VS Code can be moved, hidden or resized. Hover the border, drag to resize; drag a panel tab out of its zone to turn it into an independent editor group. Example: drag Terminal panel upwards until it docks beside the editor, giving you a vertical split similar to the default layout in JetBrains IDEs.
— Themes and colour schemes
Press Control+K Control+T to open the theme picker. Choose between Dark+, Light+, High Contrast or any installed theme. Example: install the “One Dark Pro” extensi... (download to read the rest 👇)