See > record vscode shortcut key

Time:2020-11-28

1. Cursor movement for words

All you have to do is press option and the left arrow. Instead, to move the cursor to the end of a word, just press option and the right arrow key. You can move the cursor in a document in units of words.

Move the cursor to the beginning or end of the line.

Fn+Home/End

Cursor movement of code block

Press CMD + Shift + (Ctrl + Shift + on Windows)

Move to the first or last line of the document

You can move the cursor to the first column of the line by pressing and holding the CMD + left arrow (CTR + home on Windows), and if you hold down the CMD and right arrow (CTR + end on Windows)

3. Delete operation

All text before the cursor in the current line is deleted,

Home + Shift (fn+shift) +delete,macOS: Cmd + Left + Shift +delete

2. Text selection

For cursor operations based on words, lines, and entire documents, you only

You need to press one more shift key to select the text as you move the cursor. CTR + direction select CTR + Shift + delete to delete

Delete single line

"Ctrl + Shift + k" on Windows

Cut this line of code

"Ctrl + X" is OK.

Move a piece of code

Option + up and down arrow keys "(in windows, it is" Alt + up and down arrow keys "

Copy these lines and paste them above or below the current line.

"Option + Shift + up and down arrow keys" (in windows, "Alt + Shift + up and down arrow keys")

Add comments

"CMD + /" (Ctrl + / "on Windows)

Format code

Option + Shift + F "(ALT + Shift + F on Windows)

Transpose character position

There is no shortcut key bound on windows. You can open the command panel and search for the characters at the transposed cursor

Case characters

Run "convert to uppercase" or "convert to lowercase" in the command panel

Merge lines of code

"Ctrl + J" (there is no shortcut key bound on windows. You can open the command panel, search "merge rows, sort" command panel, and then search "arrange rows in ascending order" or "arrange lines in descending order" command

View all the selected words in the current file

ctr + d

close current file

ctr + w

Open history of recently opened files
Return to the previous open code section

ctr + t  

Undo cursor movement and selection

"Ctrl + U" on windows

Start a new line above the current line

"CMD + Shift + enter"

Start a new line below the current line

"Ctrl + enter" on Windows

Multi cursor

Using the mouse

Option (ALT on Windows) press and hold the next desired position

Using the keyboard

"Ctrl + Alt + down arrow" on Windows

You can add PZ to CSS by moving to the end of each line

perhaps

CMD + D "(on windows, it is Ctrl + D) to realize the same text multi selection and multi cursor operation

ESC exit multiple selection

perhaps

Option + Shift + I "(ALT + Shift + I on Windows) a new cursor is created at the end of each line.

Jump

“Ctrl+Tab”

perhaps

"CMD + P" (Ctrl + P on Windows) pops up a list of recently opened files with a search box at the top of the list.

After you find the target file, you can press the "CMD + enter" (Ctrl + enter on Windows), and the file opens in a new editor window

Line jump

Ctrl + g”

Move to definition

ctr + f12

Jump to a line in a file

First press "CMD + P", enter the file name, and then add ": and specify the line number after it.

Symbols jump(vs Code provides a set of API for language service plug-ins, which can analyze the code and tell the vs Code Project or file which classes, functions or identifiers are in (we call these symbols collectively)

You can see all the symbols in the current file

Use the arrow keys, or search, find the symbol you want and press enter to jump to that symbol immediately

After "CMD + Shift + O", there is a "@" sign in the input box

Enter ":" to classify all symbols of the current file

Symbol jump in multiple files

"CMD + T" (Ctrl + T on Windows) to search for symbols in these files.

Jump to the implementation of the function.

"CMD + F12" (Ctrl + F12 on Windows)

Jump to defined code file return

ctr + -

File directory switch

ctr + r

perhaps

After pressing Ctrl + R to bring up the list of recently opened folders, you can also press the CMD (CTR) + Enter key to open it in a new window.

display

Enlarge the code for the current page

ctr +

narrow

ctr -

Sidebar show hide

ctr + B

Full screen

F11

Display console

ctr + shift + u

Reference jump


Start a new line below the current line

"Ctrl + enter" on Windows

A function is exported in a JS file and referenced in another file, but shift + F12 cannot find it

You can add one under this project jsconfig.json File. This file will let vscode know that the files in the current folder belong to the same project, so as to index them.


{

"compilerOptions": {

"target": "ES6"

},

"exclude": [

"node_modules",

"**/node_modules/*"

]

}

If the path alias is configured in webpack, vscode cannot find the definition

{

"compilerOptions": {

"baseUrl": ".",

"paths": {

"ClientApp/*": ["./ClientApp/*"]

}

}

}

Mouse operation

Press the mouse three times in a row to select the current code
Four times, the entire code is selected

Hover prompt window

You can directly see the implementation of 'foo' in the hover prompt window by pressing the CMD key (ctrl on Windows).
 Click to jump

Operate the resource management directory on the left

ctr + shift + E

Left cross file search

ctr + shift + F

Managing your own git repository

ctr + shift + G

Synchronize your vs code settings

Plug in settings sync

Start up and commissioning

ctr + shift + D

Management extension

ctr + shift + X

Find and run all commands

ctr + shift + p

restructure

Modify the same function or variable name of the current page

Place the cursor over the function or variable name, and then press F2, so that the function or variable will be modified where it appears.

The long code is extracted into a single function

We just need to select that code, click on the yellow light bulb icon, and then select the corresponding refactoring operation.

code snippet

1 open the command panel, search for configure user snippets and execute
2 select JavaScript
3. After selecting the language, we can see that a JSON file has been opened, and the contents of this file have been commented out. We can select lines 7 through 14 and press "CMD + /" to uncomment.
{
    "Print to console": {
        "prefix": "log",
        "body": [
            "console.log('$1');",
            "$2"
        ],
        "description": "Log output to console"
    }
}

This code fragment is called “print to console”. The value of the code fragment object, that is, the code in curly brackets, must contain the prefix “prefix” and the “body” content. At the same time, the value can also contain “description” to describe the attribute, but this attribute is not required.
The function of “prefix” is that when we type the same characters as “prefix” in the editor, we can see the options of this code fragment in the suggestion list, and then we can press the tab key to insert the contents of the “body” of this code fragment into the editor. If the code fragment has the attribute “description”, then we can also see the “description” in the quick view window of the suggestion list
Tab Stop

When the "body" content is inserted into the editor, you will find that the '$1' and '$2' in the content are missing and replaced by two vertical lines. These '$1' and '$2' are tab stop, which means that when we press the tab key, the cursor moves to the position. When this code fragment is inserted into the editor, the editor will move the cursor to the location of '$1'. If you press the tab key again, the cursor will immediately move to the position of '$2'.
Shortcut key to move the cursor to the position of the previous tab stop
“Shift + Tab”

placeholder
*When we insert tab stop, except for$1$2We can also fill in this kind of grammar${1:label}In this format, when the code fragment is inserted into the editor, the position of $1 will be pre filledlabelThis value, andlabelWill be selected.
For this value, we call it a placeholder, which, as the name suggests, is pre-set in the code snippet. If we think this value is available, we don’t need to modify it. Just press the tab key to jump to the next tab stop to continue editing. If you feel that you want to change it to a new value, you can replace it by typing directly, because the placeholder is already selected by the cursor.
Here we make a little change to the above code fragment *:

 "Print to console": {
        "prefix": "log",
        "body": [
            "console.log(${1:i});",
            "$2"
        ],
        "description": "Log output to console"
    }

*We will$1Changed to${1:i}When the code fragment log is inserted, we will seeconsole.log(i);At the same timeichecked
Press the escape key directly to jump out of code snippet editing mode, and then continue with our other editing operations. *
Multi cursor
You can use ${1: label} to specify tab stop and placeholder
You can also use the same tab stop at multiple locations in the code fragment.
Insert $1 at three different locations in the code snippet, so the editor will create a cursor for each of these three different locations, and they will be modified together as we type.

   "Print to console": {
        "prefix": "log",
        "body": [
            "console.log(${1:i});",
            "console.log(${1:i} + 1); // ${1:i} + 1",
            "$2"
        ],
        "description": "Log output to console"
    }

Preset variable
Preset some values and variables in advance.

https://code.visualstudio.com/docs/editor/userdefinedsnippets#_variables
Code folding
On windows, it's Ctrl + Shift + left bracket

From the current cursor position to the outermost layer, all parts that can be folded recursively

"CMD + k" "CMD + 0"

Expand all

"CMD + k" "CMD + J"

Code expansion

CMD + option + right bracket "(on windows, it's Ctrl + Shift + right bracket)

Code folding based on language definition
Code fold. The method of judging is realized by the detection of curly brackets or code indentation. But if you encounter code that doesn’t use curly braces or is indented incorrectly, you may not be able to do so.
Vs Code provides an interface for language services, which can dynamically detect code and then tell vs code which code can be folded.
You can state which line is the beginning of the collapsible code and which paragraph is the end of the collapsible code block by writing a special keyword in the code comment.

public class Main {
  // region Main
  public static void main(String[] args) {
  }
  // endregion
}

// region MainDeclare the beginning of a collapsible block of code, and// endregionThe end of the collapsible code is declared. When we move the mouse pointer near the line number, we can see three plus signs, indicating that the code contains three collapsible code blocks, two controlled by curly braces, and one based on a special language definition.
Keywords to control code folding, please refer toOfficial document of vs Code

search

Single file search

"CMD + F" (Ctrl + F on Windows)
When the search window is called up, the editor will automatically fill in the search box with the word at the current cursor position.
First select a piece of text, and then press "Ctrl + F" to call up the search box. After that, click this button to set the scope of this text as the next search area.

Jump from bottom to top in search results

CMD + Shift + G "(Shift + F3 on Windows)

Call up the replace window

CMD + option + F "(Ctrl + H on Windows)

Multi file search and replace

CMD + Shift + F "(on windows, it's Ctrl + Shift + F)

Basic configuration of vscode

*Editor cursor is the settings related to cursor rendering and multi cursor;
*Editor find, which is related to the search in the editor;
*Font is related to the editor;
*Editor format is the code format;
*Editor suggest is a configuration related to auto completion and suggestion window.

Command panel symbols

1. '>' (greater than sign) is used to display all commands.
2 @, used to display and jump the "symbols" in the file, and add a colon after the @ symbol to classify the symbols by category.
3. The "ා" sign is used to display and jump to "symbols" in the workspace.
4.: (colon) to jump to a line in the current file.