The easiest vscode the Getting Started tutorial

This paper describes vscode commonly used shortcuts in their work and plug-ins, the goal is to improve efficiency
Shortcuts This article is based on the mac, the windows shortcuts in brackets Cmd + Shift + P (win Ctrl + Shift + P)

Zero, Quick Start

Experienced can skip 快速入门 or skim over

1. Command Panel

The command panel is the main interface vscode shortcut keys, you can use f1 or Cmd+Shift+P (win Ctrl + Shift + P) opens.

In the command panel you can enter commands to search (in English can be), and then executed.

Naming panel may execute various commands, built-in editor includes functions and 插件features provided.

So be sure to remember its shortcutsCmd+Shift+P

2. Interface Introduction

Just get up and running vscode, we first recommended it as a file editor (you can type and save), when there are some experience to go to those familiar keyboard shortcuts

First to familiarize yourself with the interface and shortcut commands (do not mind)

3. Use the command line vscode

If you are a Windows user, installation and 重启系统after, you can use the command line code or code-insidersthe, if you want to use immediately, rather than waiting for the restart, you can add VS Code installation directory to the system environment variables PATHin

If you are a mac user, named after installation open the panel Cmd+Shift+P, the search shellcommand, click 在PAth中安装code命令, and then restart the terminal on ok

The most basic use is to use the code command to open a file or folder

code 文件夹地址, Vscode will open that folder in a new window

If you want to open the file in the open windows, you can use -rparameters

vscode command there are other features, such as file compare, open the file jump to a specific row and column, if necessary, their own Baidu: bowing_woman:

note:

Before you continue to see articles Remember Remember panel to open the command shortcut key Cmd+shift+P(next win is Ctrl + shift + p)

First, the code editor

Shortcuts in windows in parentheses

Cursor movement

basis

Move to the beginning of the line Cmd + left arrow key (win Home)
Move to the end of the line Cmd + right arrow key (win End)
Move to the beginning and end of the document Cmd + down arrow keys (win Ctrl + Home / End)
In curly braces {} to jump between the right to the left Cmd + Shift + (win Ctrl + Shift +)

Advanced

Back to the position of a cursor, Cmd + U (win Ctrl + U) is very useful, and sometimes vue file, you change the html, js need to change, complete the following js change and need to go back, this time directly back to Cmd + U
Back between different files on a position of the cursor Control + - after (win did not test, do not know), you change a file, change the file b want to return to continue editing a file, mac usecontrols+-

Text selection

You only need to press a shift key to select the text when the cursor moves
Select the word Cmd+D under the cursor will talk about multi-mentioned Cmd + D
The choice of code blocks no shortcuts, you can use the cmd+shift+pOpen command panel, enter 选择括号所有内容, how to add shortcuts to be under would say

delete

Then you can select and then delete the code, press the Backpack (backpack it is) or delete deleted, but to do that too low a
So, delete Geek is the best way Cmd+Shift+K (win Ctrl+Shift+K), how many want to delete to delete the number, you can use the current ctrl+xcut, the same effect

Code Mobile

Option + down arrow keys (win Alt + bottom)

Mobile code while holding down the shift can be achieved copy the code down Option + Shift +

add notes

Note there are two forms, single-line and block comments (in the js, single-line comment // block comment / * /)

Single line comment Cmd+/ (win Ctrl + /)
Block comments Option+Shift+A

Different languages use different Note: Note

Second, the code format

Code Formatter

The entire document formatting: Option+Shift+F (win Alt+Shift+F), VSCode will be based on the language you use, the use of different plug-in format, remember to download the appropriate format plug-ins
For the selected code format: Cmd+K Cmk+F win ( Ctrl+K Ctrl+F)

Code indentation

True documents indented adjusted using Cmd + Shift + P command panel open, enter 缩进, and then select the appropriate command
Adjusting the selected code indentation: Cmd +] Cmd + [indent decrease and increase, respectively (without knowing win, self Baidu)

Third, some tips

Adjust the character of the case, select it, then enter the command panel 转化为大写or转化为小写
The combined line, multiple lines as a single line, Cmd+J(not bound to the win)
Sorting line, the line for sorted alphabetically, no shortcut keys, call command panel, input 按升序排序or按降序排序

Fourth, multi-cursor properties

Using the mouse:

Press and hold the Option(win Alt), and then use the mouse, the mouse will appear where where a cursor

Note: On some mac computer is to hold down Cmdbefore you can use the mouse to point

Shortcut command

Cmd+D (win Ctrl+Dwhen) the first time you press, it will select the word near the cursor; second press, it will find the location of the second occurrence of the word, create a new cursor, and select it. (Note: cmd-k cmd-d skip the current selection)
Option+Shift+i (win Alt + Shift + i) First you have to select multiple lines of code, then press Option+Shift+i, the result of this is: each line will be more out of a cursor back

Withdraw multiple cursors

Use Esc withdraw multiple cursors
Mouse click revoked

Fifth, the quick jump (file, line, symbol)

Quickly open files

Cmd+P (Win Ctrl + P) Enter the name you want to open the file, press Enter to open

Here is a tip, after you select the file you want to open and press Cmd+Enter, will open (window manager, see below) in a new editor window

Files between different switching tab, cmd + shift + []

Line Jump

Join browser reported a mistake, an error in line 53, how to quickly jump to the line 53

Ctrl+g Enter the line number

If you want to jump to a line in a file, you simply must first press "Cmd + P", enter the file name, and then after that to add ":" and specify the line number to.

Symbol Jump

Symbols can be a file name, function name, can be a css class name

Cmd+Shift+O(Win Ctrl + Shift + o) enter the symbol you want to jump, jump Enter

win the next input Ctrl+T, you can search symbol jump between different files

Define (Definition) and implement (Implementation) at

f12Jump to the function defined at

Cmd+f12(Win Ctrl + f12) of the function to jump to achieve

Jump quote

In many cases, in addition to the definition and implementation to know a function or class, you may also want to know whom they are cited, as well as being cited where. Then you only need to move the cursor to the upper class or function, then press Shift + F12, VS Code will open a list of references and a built-in editor. In this reference list, you select a reference, VS Code will be referenced in the vicinity of this code is displayed in the built-in editor.

Sixth, code refactoring

When we want to modify a function or variable name, we just put the cursor on a function or variable name, then press F2, so this place function or variable appears on will be modified.