VS Code’s entire interface is called the Workbench

Sidebar, active sidebar

By default, VS Code’s left pane is called the active pane, and there are five components:

  • File Explorer: Mainly used to browse and manage files and folders.
  • Cross-file search: Used to search across files within the current folder.
  • Source Code Manager: Source Code in the current folder to manage the version of the Code, VS Code support Git version management software
  • Start and debug: Start or debug projects in the current folder
  • Extension Management: Manages plug-ins within VS Code, installing, updating, and uninstalling them.

These components can be shown and hidden by moving the mouse to a blank area of the activity bar and then right-clicking. If you hover the mouse over the build, you can see that there is an additional option to “hide XXX”.

Of course, you can also drag the components with the mouse to reorder them according to personal habits.

There are two options below the activity bar on the left side. One is for logging in to your account, which allows you to synchronize VS Code configuration, including Settings, keyboard shortcuts, Code snippet extensions, UI state, etc., so that you don’t have to reconfigure it the next time you switch computers.

Below the login account is a pinion button that provides access to some common functions. Including command panels, Settings, snippets of user code…

The status bar

At the bottom of the entire software window, there is a small horizontal bar, this is the status bar. It mainly displays basic information about the current folder, editor status, code version and code errors. Information about other plug-ins will also be displayed in the status bar.

panel

On top of the status bar is a hidden area labeled “Component panel” in the image above, which is officially called “panel.” Normally it doesn’t show up here, it will show up when we use a terminal or something.

There are four components by default:

  • Problems panel: Displays all problems and warnings in the code under the current folder, such as syntax errors, formatting problems, spelling errors, etc. We can browse these questions in the questions panel and access the corresponding files
  • Output panel: Displays the running status and results of core commands and plug-ins. For example, when git commands are incorrectly executed, you can find out the problem by reading the output panel.
  • Debug console: Used when debugging code
  • Terminal: is usually used in the system command line, different systems, the terminal tools used here also slightly different.

The command panel

You can open the command panel from the gear button in the activity bar or by right-clicking in the code editor. Shortcuts are also available: F1 or Cmd + Shift + P, Windows shortcuts

At this time, you can see a pop-up box, input box has a greater than sign (>), this is the command panel.

Of course, there are other symbols besides > to start with, and different symbols mean different things.

  • The input box has no characters. The command panel provides access to recently used files, and the input box also has a prompt content.
  • >: Provides all commands. Enter more characters to search for all commands.
  • @Search the current file and you will see different Symbols (node names, method names, etc.).If the@Add a colon after the symbol:, symbols can be grouped into categories.
  • :: Jumps to a line in the current file
  • edt(edit“) : InputedtWith a space, the command panel will display all open files as they look
  • edt active: Displays by recent useCurrently in the active groupThe file
  • edt mru: Displays all open files by recent use
  • Ext (short for Extension)Input:extAnd a space, can be plug-in management.
  • ext install: You can search for and install plug-ins in the command panel
  • task: Running a task
  • debug: Debugging function
  • Term (short for terminal): displays all open terminals. You can also use this command to create and manage terminal instances.
  • view: Opens VS Code UI components

You need to enter a space after the abbreviation.

If you can’t remember these commands, you can clear the input field in the command panel and type hello? , be sure it’s in English! Next, you can see the prompts for various commands.

Commonly used configuration

Through the lower left corner of the pinion, open the configuration, and then in the uppermost input box, enter a configuration name to search for a configuration.

  • workbench.commandPalette.history: The recently executed operation is recorded, and the most recently executed command is displayed at the top. By default, 50 history records are stored, which can be modified through this configuration.
  • workbench.commandPalette.preservelnput: The input box on the command panel saves the command executed last time. The default value isfalse.

reference

  • Lv Peng’s VS Code