[Development tools] vim editor Practical Skills

Summarize some of the practical functions that we use the vim editor at ordinary times, which will be updated in the future.

1. visual plug-in

The visual plug-in is actually equivalent to a bookmarks. For example, in a long source code file, we can mark a line, and then we want to return to this line, you only need a shortcut key to quickly locate this line, which is very convenient and does not need to go up or down constantly.

1.1 Common commands

1. Mark a tag with mm;
2. F2 returns to the marked row;
3. You can cancel the tag by pressing mm twice in a row;
4. shift + F2 can switch back and forth between several labels;

2. emmet. vim plug-in

The emmet. vim plug-in is mainly used to increase the speed of html/css code writing. Now we will mainly talk about the html code and add the Quick Command of css code later.

2.1 Common commands

1. generate code: Ctrl + y and then press the comma after both hands are released;
2. generate tags: for example, <div> </div>. after entering the div in the file, do not switch the vim mode, or press the shortcut key in 1 in normal mode;
3. Generate a tag containing a class, such as <div class = "tuanfe"> </div>. Enter div. tuanfe and press the shortcut key in 1;
4. Generate a tag containing an id, for example, <div id = "j-tuanfe"> </div>. Enter div # tuanfe and press the shortcut key in 1;
5. generate a new html document: html: 5, and press the shortcut key in 1;

6. Generate tags containing content, such as <div> tuanfe </div>, div {tuanfe}, and quick response;
7. Generate nested labels, for example, <div> <a> </div>, div> a + shortcut key;

8. Generate a sibling tag, for example, <div> </div> <p> </p>, div + p, and press the shortcut key in 1;
9. generate multiple tags, such as <ul> <li> </ul>, ul> li * 3, and press the shortcut key in 1;
10. generate tags with sequence classes, for example, <ul> <li class = "item1" </li> <li class = "item2"> </li> </ul>, ul> li. item $ * 3, and then press the shortcut key in 1;

3. File Operations

1.: new file name. suffix. Remember to use w to save the file after the new file is created. Otherwise, the file will not be generated if you close the file. If you enter the content, you will be reminded to save it when you close it;
2. Delete all objects in the file. method 1 uses ggdG; method 2 uses: % d;
3. Copy. Copy the word in yaw. copy in a single row: yy. Copy in multiple rows: Press shift + v on the open row, select the row to be copied, and press ctrl + c;
4. Move G to the end of the file, move gg to the beginning of the file, 0 to the first line of the file, $ to the last line of the file;
5. Multi-line indent, press v to enter the visual state, select multiple rows, use> or <indent or contract out;
6. Undo and recover. press u to undo it. ctrl + r is the action you just undo;
7. comments: Add //: s/^/\/g to lines 1-5, and comment all content: % s/^/\/g.

4. vertical partition window 1.: vsplit divides the current cursor file into two windows for display. When a file is very long, we can change the file in one window and view other parts of the file in another window; 2.: vsplit tuanfe. js opens tuan in a vertical window. js file; 3.: vertical new creates an empty file and opens it in a vertical window; 4. ctrl + w + h: Switch the window to the left; 5. ctrl + w + l: Switch the window to the right.