Vim common plug-in-Front development tool series

As a developer, you should have heard of the editor of God Vim and God's editor Emacs. The details of the editor's battle are interested in children's shoes can be Google's.

The biggest feature of Vim is the fast, powerful, and once mastered command, the programming process does not need to leave the keyboard.

Another advantage of using VIM is that it is easy to use VI to process files under Linux, and of course Emacs can also be the default editor, but not every machine has Emacs installed.

Today, we mainly introduce some of the most commonly used plugins in the front-end areas of vim:

1.mark.vim

The main function of Mark.vim is the highlighting of variables.

Select the words you want to highlight, use \m to highlight them, the highlighting of multiple words will be displayed as different colors, when you do not need to find the time and the code review the use of the effect is very good,

Use \ n to remove the highlighting of the selected word.

More details can be found on the plugin homepage.

PS: Find words can use * This command to do a quick search

2.zencoding.vim

Zencoding.vim later renamed Emmet.vim, the main function is to implement the rapid code writing.

Specific tutorials can be found on the official website

The personal feeling is to do the page reconstruction time to use more, through the command can quickly generate the HTML structure, improves the front-end development productivity.

3.ctrlp.vim

Ctrlp.vim main function is to file and buffer fuzzy query, quickly open the file.

The operation example is as follows:

When you know the file name, use CTRL + p to open the plug-in, enter the file name, but you can quickly open the file with a few letters at the beginning of the filename.

PS: If the current file has been saved well, then it will be replaced directly with the search to the file, if not saved, the window will be separated similar to the SP command.

So in the case of comparing files I usually use VSP to split the window or tabnew a new tab, and then open the new file.

If you need to check other directories or forget the file name, you can use the following plugin Nerd_tree.

4.nerd_tree.vim

Nerd_tree.vim main function is a file browser, you can view the file directory structure to open the appropriate file.

The specific demo looks like this:

I use the binding shortcut key F4 to open the file browser, the cursor in the file browser can be used JK to move, enter can open the file, press Q to exit the file browser.

5.neocomplcache.vim

The main function of Neocomplcache.vim is to complete the code completion,

The advantage is that the context is indexed, the results are saved to the cache, the automatic completion of the efficiency is higher, and the other matching is more accurate.

Full effect as shown:

Im in the code completion plug-in more, the general completion of the intelligence relies on the plugin dictionary, variable caching mechanism.

From this point of view Neocomplcache is also very good, in addition, the function of intelligent read and read path is also very praise.

6.multiple_cursors.vim

The main function of Multiple_cursors.vim is multi-line editing with multiple cursors.

The main effects can be seen in the following picture:

In the absence of this plug-in, the native command is generally a block operation, in the visual mode of the operation of multiple lines. The steps are lengthy and error prone,

This plug-in is really a tool, but it also supports regular operation.

7.commentary.vim

The main function of Commentary.vim is to batch annotate single or multiple lines and remove annotations;

Bind backspace key, select multiple lines to annotate code directly in/**/form

Finally, several plug-ins are often used in the front-end development, there are many features, the original commands can be done,

Another advantage of using Vim is from writing C to writing PHP to write JS, you can use the same editor, or very convenient.

Shortcut key God horse's own in the VIMRC configuration can,

The process of building your own IDE is frustrating, but then the process of using it is pretty cool.

Vim common plug-in-Front development tool series