Vscode is a very popular development tool at present, and I believe the number of people using it is very large. So how much do you know about it as a development tool that you usually rely on for programming? This article focuses on the default high frequency shortcut keys of vsocde, how to modify shortcut keys, how to customize code snippets, how to use vscode command tools, vscode emmet function, which plug-ins can be used to double the speed of development efficiency


1. Default shortcut keys of high frequency

Here, the corresponding shortcut keys of MAC Window are sorted out for the convenience of users of the two types of terminals
mac
window
control
window
option
alt
command
ctrl
The above can be seen as the MAC corresponding to the window button, which is true in most scenarios, but not entirely


describe
mac
window
Search contents within files
command + F
ctrl + F
In-file substitution
There is no
ctrl + H
Full text Search content
command + shift + F
ctrl + shift + F
Global search file
command + P
ctrl + P
Current row moves up/down
Option + ↑ / ↓
Alt + ↑ / ↓
Copy the current row above/below
Option + Shift + ↑ / ↓
Alt + Shift + ↑ / ↓
Delete current row
Command + x(cut when unselected
Delete the current row.
ctrl + x
Merge current row
control + J
There is no
Move by word
Option + ← / →
CTRL + ← / →
Move to the beginning/end of the line
Command + ← / →
home / end
Keyboard multi-cursor
Option + ↑ / ↓
Mouse multi-cursor
Option + Left mouse button
Alt + left mouse button
Select the same whole thing
option + shift + L
alt + shift + L
Sidebar switch
command + B
ctrl + B
Console switch
command + J
ctrl + J


Command explanation:

Merge current row:







Use the merge current line function to quickly make figure 1 look like Figure 2. These are two habits, if you like to talk about content on one line. This shortcut is undoubtedly very cool.


Sidebar switch/console switch

The sidebar and console can take up about a third of the computer by default, and a few lines of typing on a laptop feel like the end. But the sidebar and console are still common features, you can use this shortcut to type code across the screen, and quickly control the sidebar and console display is a very controlled shortcut


Global search file

This is the command menu that calls vscode. In this menu you can type Chinese to execute relevant commands, very powerful. He did more than search for files at critical moments. Here are some common operations:


Input? Shows how to execute various commands



The most common ones are term (open command line), view, (adjust to specified line), EDT (view currently open label and offer jump function), none (search file and offer jump function), > (show and run command). It’s incredibly easy to use just the prefix + space and type in the action you want to do for example:




This is the third character to jump to the first line



You can see that there are three terminals in the image above, and I’ve renamed them. The one on the right is the rename function.


2. Split screen function

One of the most common scenarios I encounter when writing code is working between different files, and switching between two files can be very troublesome. In fact, you’ve mastered the split screen of vscode and this is going to make you fly.



As you can see from the figure, not only the editor can split screen, but also the console can split screen. After splitting the screen, you can look at the HTML code on the left and write the CSS code on the right. Never have to look back to see if the format is correct.
To create a split screen shortcut is Command + \ (CTRL + \), and to switch between editors is Command + 1-9 (CGTRL + 1-9).


3. Code snippets

Normally when you type part of the content, press Enter or TAB and it will complete you. This feature is code snippets, which are often used: 
log -> console.log(' ');
switch -> switch (key) {   case value:
      break;   default:     break; }for -> for (letindex = 0; index < array.length; index++) { const element = array[index]; }Copy the code

Wait, it’s very convenient. But this is not enough, like the log snippet provided by default. This is where custom snippets are especially important, and custom snippets are very simple. It is very common to control the cursor position when completing, modify content with multiple cursors at the same time, and the next position after TAB key. See me in three words




1. Command + p (CTRL + P) Opens the command menu

2. Enter “> Code Snippets” with only one optionPreferences: Configure the user code snippet, default is directly selected, press Enter.
3. Select New global snippet and press Enter
4. Enter a file name, such as a JS code snippet, and press Enter to open a new file. The contents are entered in JSON format.
5. Open the examples in the article, remove useless comments, and open useful comments. Get a file that looks like this



You can see that the outermost object is an object with just a property called “Print to console” inside. An attribute represents a snippet of code. Now I’m going to tell you about the code snippet in the article.
  • Scope: set function file, can be extended vUE, HTML
  • Prefix: The prefix that triggers the code snippet
  • Body: Code snippet body. ${1:label} ${1:label} That leaves the default value label. If you want multiple cursors, write placeholders with the same number, such as $1 instead of $2
  • Description: This code snippet is generally not used, the prompt message with the outermost attribute
Now I will change the above, and incidentally add another:





Below is my input prefix prompt, is not very simple.





4. Emmet function

If you haven’t heard of this, follow me. Because this is what makes you type code ten times more efficiently



The code structure shown above is not very common, but it is much more complicated than this. Then I’ll have you print it out in one sentence 

div.parent>div.childern-first+div.children-two>ul>li*$4Copy the code

The above sentence can be changed into the picture. You can copy it into your vscode and delete the last 4 and re-type 4 and hit TAB to see what it looks like.


This is a big use scenario for the first time, where you have your UI on the left and your editor on the right. Looking at a module in a UI diagram and printing out the entire structure in one go, then using the multi-editor function, looking at the UI diagram and HTML structure diagram and putting the style in place at once, is really comfortable. How do you use this amazing thing? The point is simple. Watch me fly you with two words.


1. Know how to generate key symbols of child labels, sibling labels, and parent labels. >(child tag), +(sibling tag), ^ (sibling tag of parent tag). Such as:
Div >p+p^div can be described as a div with a child tag p, p with a sibling tag p, and p with a parent tag div


2. How to set attributes and values for an element. Attributes are in brackets []. Note that the class and id attributes can be used as. And #. Values in {}. Such as:
Div. ABC [title=666 index=1]{123} Title = “666”, index = “1”, 123
Div. ABC. Efg. CCC can be described as div class ABC efg CCC


3. Use asterisks (*) multiple times to repeat a label.Such as:
Div *5 can be described as generating five div tags


4. Iteration values use $. Iteration values allow you to do more with good emMet plugins that are supported.But I won’t introduce it because it’s a little niche. Such as:
Div. ABC $*5 can be described as generating five div tags with class values abc1,abc2… abc5


5. Add parentheses () to traverse a group of labels, such as:
(ul>li*2{$})*2 can be described as generating two groups ul>li*2{$}


More functions can check this article: www.cnblogs.com/summit7ca/p…


5. Abbreviations of the CSS

This article is relatively small, I also found some small skills when typing, but it is really very comfortable to use.


The unit label of a value can be first letter + number + unit (the default unit is PX). Such as: 

p10 -> padding: 10px; pl10 -> padding-left: 10px; Max-width: 100%; clear: both; min-height: 1em; ml10 -> margin-left: 10px; t10 -> top: 10px; f10 -> font: 10px; fw500 ->font-weight: 500; h10px -> height: 10px; w10 -> width: 10px;Copy the code


6. Common plug-ins

There are so many plugins out there that I would die without them


1.Auto Rename Tag Automatically Rename two labels





2.Chinese language localization



3. ESLint

This plugin needs to be used in combination, the project must support ESLint formatting, and then save the code to out-of-focus save, so the code that does not conform to ESLint automatically becomes esLint code


4.Open in Browser

Right-click an HTML file to open it in a browser


5.Path Intellisense

Path matching,


6.vetur

Since I’m a heavy User of VUE, I don’t even have a highlight without it


7.live-server

This is not a vscode plugin and can be installed directly with NPM -g live-server.
Start a service for mobile phone access to static resources


There are many more useful plug-ins, such as SVG viewing, display of imported package sizes, and git submission code prompts. But I feel dispensable in the process of use, that is, universality is not particularly wide. If you have a plugin that won’t work without it, feel free to leave a comment


conclusion

Vscode does a lot more than that, and a lot of fun stuff. But because of the length of this article, and because of its universality, it is not suitable to present it. If you have universal very make point, or that sentence welcome to leave a message, I will be added to the article, let him become your favorite folder in the classic article.