Take you to understand [Space Control] in vscode

Welcome to the world of vscode. The goal of this article is to popularize some design concepts about [space control] in vscode. Space is limited, but information is unlimited, just like us When writing a page, you must consider the center of the page and the placement of the space. vscode is actually an application, and its interface space is also limited. These are built up by various areas. So what are these areas? How do they work together? [Recommended learning: "vscode tutorial"]

The main content of this article can be said to be tips, but I am a very lazy person, I don’t like to memorize by rote, I like to remember when I need to Looking for internal connections between the contents, and then using logic to string them together, this gives me an indescribable pleasure; this memory method may not be suitable for many industries, but in the computer field, it is really a method that I personally highly recommend. The reason is simple: computers are a world built entirely by humans!

This means that if you can understand the designer's thinking, the design of many things will become logical, and it would feel awkward not to use it this way. Another potential benefit is that we come to think like those good people, which is crucial.

I’ve talked a lot, let’s get down to business, let’s get started!

vscode Area Overview

Taking the above picture as an example, our common and commonly used areas and corresponding functions It is roughly as follows

• Working directory: Directory information of the currently processed project

• Command panel: Provides a panel that supports calling vscode corresponding actions through commands

• Editing area: an area to change the content of the current project, there are concepts such as editing groups

• Terminal area: Provide a way to embed the terminal area in vscode Directly execute terminal commands in win, default power shell; can be configured as bash

  Knowing the existence of these core areas, next, we start to analyze one by one

Edit area

The editor area is the most critical area, because it is the entrance to our direct control of the project, normal file operation design The concept is actually mainly about the operation of the cursor. This has been shared in the article Cursor Operation, so I won’t go into details. Interested friends can take a look;

The focus of this article is Regarding the allocation of space, the editing area is the area that is displayed by default and occupies the largest area. For the processing of this space, the main requirements are as follows

• How to switch between multiple open files
• How to see the corresponding content of multiple files at the same time

For the first question, it can be achieved through a type of shortcut keys; for the second question, the concept of editor group is proposed in vscode. The editing area can be divided into up to five areas, which are independent of each other.

If you have read the article Cursor Operation, you will know that I use the [granularity] perspective to understand the cursor setting. In fact, spatial control can also be understood from this perspective. How to understand it specifically? Do, let’s understand through the questions

How to switch between multiple open files in the editing area: shortcut keys

Let’s take a look first Default shortcut key settings

##Switch to the previous one in the current file | Open Next Editorcmd option →ctrl option →

Select

# in the currently open file list to switch to the previous/next one in the current file

Command execution

In fact, it can also be executed with commands

We Think about it, for the same type of command in mac, why [select in list] is the ctrl key, and [switch to previous/next in the current file] is the cmd key ;In fact, the key is that the system itself in mac also has shortcut keyscmd direction keys, which are used to switch full-screen windows;

This is easy to understand, the system is the largest, and you understand this layer After that, we can use our brains. Can we use the [custom shortcut keys] mentioned in the previous article to unify them?

Of course, we will add a setting: if it conflicts with the system key, we will add the options key; use this [switch to the previous/next one in the current file] For example, we still use ctrl, but in order to avoid conflicts, we change it to ctrl optionskey

After customization, the logic can be understood as, Editor The file granularity inside is ctrl. For example, ctrl ← is to switch windows, then the only way to switch to open files is ctrl option ←; cmd 0 It is Focus into side Bar | Focus on the side bar, then the only way to switch the editor group direction is cmd option 0；

Command	mac	win
Select in the currently open file list	ctrl tab	ctrl tab
Switch to the next in the current file | Open Previous Editor	cmd option ←	ctrl option ←

Command	mac	win
Select	ctrl in the list of currently open files tab	ctrl tab
Switch to the next in the current file | Open Previous Editor	cmd option ← (customized ctrl option ← )
Switch to the previous one in the current file | Open Next Editor	cmd option → (customized ctrl option → )

How to see the corresponding content of multiple files in the editing area at the same time: Editor Group

For such a large piece of content in the editor area, if you want to see multiple processed files at the same time, then split it. This leads to the concept of Editor Group. In fact, It is divided into partitions, and the functions are exactly the same. Just look at the case directly

Regarding the grasp of the editor group space, in the same sentence, The editor group granularity is cmd, the corresponding command overview is as follows;

Command Overview

Command	mac	win
Split Editor | Split Editor	Cmd \	Ctrl \
Split switch | Switch the current editor in the editor group	Cmd [number of groups]	Ctrl [number of groups]
Flip Editor Group Layout | Switch vertical/horizontal editor layout	Cmd Option 0	Shift Alt 0

Switch

Command	mac	win
Split switch | Switch the current editor in the editor group	Cmd [number of groups]	Ctrl [number of groups]

Switch editor group direction

The default editor arrangement between editor groups is horizontal

##Flip Editor Group Layout | Switch Vertical/horizontal editor layoutCmd Option 0Shift Alt 0

Editor group control file

We know the support function of the editor group itself, and the granularity is more To be more specific, what about the editor group’s support for files? The file granularity within the editor group is cmd ctrl

Command	mac	win

##Commandmacwin##Move Editor into Previous Group | Move the current file to the previous editorMove Editor into Next Group | Move the current file to the next editor

cmd ctrl ←	ctrl tab
cmd ctrl ←

Switch the currently processed file

CommandSelect Switch to the next in the current file | Open Previous EditorSwitch to the previous one in the current file | Open Next Editor

mac	win
ctrl tab	ctrl tab	in the currently open file list
cmd option ← (customized ctrl option ←)
cmd option → (customized ctrl option → )

Move the current file to the left and right editing group items in the editor

Command##Move Editor into Previous Group | Move the current file to the previous editorcmd ctrl ←ctrl tabMove Editor into Next Group | Move the current file to the next editorcmd ctrl ←

mac	win

##Command Panel Area

The command panel is actually an input box, using a strategy mode, and behaviors are classified according to the prefix identifier. vscode sets the concept of symbols, which means collections of variables, functions, calls, etc.

In fact, they can be roughly divided into two categories, special logos and special characters. This distinction will make it easier to remember.

Command division: special identification

Special identificationCorresponding strategyemptyFuzzy query based on file nameGet help on what you can docmd shift pLocate the line number (if you don’t specify a file name, it will be the currently opened file)ctrl gctrl g@[:?]Fuzzy query for current file symbols, if not filled in, all will be displayed by default (if added: will be displayed in categories) Cmd Shift O Ctrl Shift O# Fuzzy query for symbols in the currently open file list, if not filled in, the default is emptycmd TCommand division: special characters

Shortcut key for Mac	Shortcut keys for win
cmd p			?
			Execute command
			##[ filename?]:[rowIndex]

Special characters need to add a space to trigger the corresponding policy, there are This setting is also very simple. If you do not add spaces, it will directly match the previous [file name] search strategy

Special characters | Source word

Corresponding strategyDisplay all open files, add active will only display files in the currently active group installYou can search and install the plug-in in the command panel

	##edt [active?] | edit
	ext [install?] | extensionFor help on possible operations, add
	taskPerform the task
debug	Execute debugging
term | terminal	Create and manage terminal instances
view	Open Various UI components of VS Code
Extended Feed Based on the command panel, there is actually a set of sorting out the search function in vscode. Due to space limitations, it will be described in a short article (tool article) in the next article ) appears in the form Terminal area is easier to understand, but it is actually some commands ##Invoke terminal | toggle terminal ctrl Gonectrl GoneCreate a new terminal in the awakened state | create new integrate terminalctrl shift Gonectrl shift GoneFocus into the terminal | Focus into panelCustomized as cmd 3Focus Next Terminal|Focus Next TerminalCustomized as cmd shift → Focus on the previous terminal | Focus Previous Terminal is customized as cmd shift ← Command mac win ## to evoke the terminal Create a new terminal in the awakened state Focus on Terminal Focus on previous/next terminal Sidebar area The sidebar only cares about one very commonly used key shortcut key, which is to show/hide the sidebar Command##Show/hide sidebarCmd BCtrl B mac win ##Summary At this point, we have completed the vscode journey with space control as the main line! Be diligent in thinking, enjoy thinking, come on For more knowledge about VSCode, please visit: vscode Basic Tutorial!

The above is the detailed content of Take you to understand [Space Control] in vscode. For more information, please follow other related articles on the PHP Chinese website!