There are seven icons present in Visual Studio Code Editor's Activity Bar. Activity bar will be present in the left side of Visual Studio Code editor.
We will see the five icons used in Activity Bar in the vscode IDE.
- Explorer
- Search
- Source Control
- Run and Debug
- Extensions
Other Icons present in the Activity bar are,
- Accounts and
- Manage
Shortcuts to access Activity Bar icons are,
Shortcut to Explorer is CTRL+SHIFT+E
Shortcut to Search is CTRL+SHIFT+F
Shortcut to Source Control is CTRL+SHIFT+G
Shortcut to Run and Debug is CTRL+SHIFT+D
Shortcut to Extensions is CTRL+SHIFT+X
Explorer contains the Open Editors, Project, Outline, Timeline, and Npm Scripts.
Open Editors will list all the files opened in the Editor pane.
Project can be opened as a folder and it can be an Angular project, Vue JS project, etc. Explorer shows the project files and folder structure in the Project section. On clicking the Explorer or entering CTRL+SHIFT+E it displays the related files in a folder. For example, if the user is in Explorer view, and clicking on app.component.html will show its associated files like app,component.ts, app.component.scss, app.component.spec.ts, and any other related files like app.module.ts
Outline shows the code outline i.e., displays the element structure of the HTML file and the object structure of the TypeScript component file. It is called Minimap which provides high level view of source code like HTML files, and Typescript Component. From Outline users can quickly navigate to the source code.
Timeline shows the file edit history. It is a local version control system of Visual Studio code.
NPM Scripts lists the script in the package.json.