Here is my new configuration of JaywCJlove/VIm-Web has been polishing, basically ready to use. Pull it out and trick Star into drawing it

The installation

Brew install macvim: brew install macvim: brew install macvim: Brew install macvim: Brew install macvim: Brew install macvim: Brew install macvim

$ git clone https://github.com/jaywcjlove/vim-web.git ~/.vim
$ ln -s ~/.vim/.vimrc ~/.vimrcCopy the code

Note: The necessary front-end plug-ins have been installed by default. .vimrc is a configuration file that controls vim’s behavior. Located in ~/. Vimrc, you can edit this configuration file to make Vim the most suitable editor for you, regardless of vim window appearance, display font, operation mode, shortcut keys, and plug-in properties.

Plug-in management

Vim plug-in management tool VundleVim/ vundle.vim

Installing a plug-in

Add the configuration information between call vundle#begin() and call vundle#end() in ~/.vim/.vimrc. Finally enter vim and press enter to install.

:PluginInstallCopy the code

Update the plugin

Plugins are updated frequently, and you should see which plugins are coming out with new versions every other month or so. Simply execute the following command in Vim.

:PluginUpdateCopy the code

Unload the plugin

Note or delete the plug-in configuration information in. Vimrc, and then run the following command in vim to delete the plug-in.

:PluginCleanCopy the code

Start the Vim

$ vimCopy the code

Common Shortcut keys

The shortcuts here are the ones I configured to work with.

; Fl # Switch out menu list NW # Switch window; Lw # Jump to the window on the right; Hw # Jumps to the left window; Kw # Jump to the upper child window; Jw # Jump to the lower child window # toggle directly between tabs. Gt # Next Tab tag gt # previous Tab tag; Q # Close a tag ctrl-f # Next page F is' forword 'Ctrl-b # Previous page B is' backward'; T # Open files by searching files # high-tech location; B # code location before cursor; E # code location after cursor; F # code location after the cursor < search ego > location information appears; R ~/git/ r s # Import the contents of the file into this file: Which ls # find command not to launch vim run command :! Date # check edit time :r! Date # Import the current edit time into the current text cursor line U # select - change uppercase U # select - change lowercase write ~ # select - change uppercase write small, lowercase change uppercase; Cc # "//"; Cm # code paragraph comment "/**/"; Ci # comment on the contrary, comment uncomment, uncomment comment; Cs # paragraph comment, comment each line with "*"; C $# Comment the position from the beginning of the cursor to the end of the line; CA # add the comment "//" at the end of the line; ZM # Fold left and right code zR # Fold all code; 1,24s/header/ WWW /g # replace the header with WWW <c-z> # exit VimCopy the code

Based on using

  • Inoremap (Insert Mode) only works in Insert Mode

  • Vnoremap (Visual Mode) only takes effect in Visual Mode

  • Nnoremap (Normal Mode) works in Normal Mode (after pressing ESC)

  • Shortcut key < C-Y >, Ctrly,

Shortcut key wildcard

The wildcard

shortcut is a generic command. The default seems to be \. You can change it to any key in.vimrc.

"Define the shortcut prefix, i.e. <Leader> let mapleader=";"Copy the code

Insert command

A # → Insert a # after the cursor character → insert I # at the end of the cursor character → insert I # before the cursor character → insert O # at the beginning of the cursor line → Insert a new line under the cursor O # → Insert a new line over the cursorCopy the code

The delete command

Dd # → delete the line where the cursor is, NDD # → delete n lines dG # → delete the line where the cursor is located to the end of the file D # → delete the line where the cursor is located to the end of the file n1,n2d # → delete the specified range of lines such as: 1,2 DCopy the code

Locate the command

:set number #→ Set nu :set nonu #→ Cancel line number gg #→ go to first line G #→ go to last line nG #→ Go to NTH line :n #→ Go to NTH line S #→ go to the end of line 0 #→ Go to the end of line HJKL #→ W #→ go to the beginning of the next word B #→ Reverse w e #→ go to the end of the next word. Ge #→ reverse e 0 #→ go to the line head ^ #→ go to the first non-blank character $#→ go to the end g_ #→ go to the last non-blank character on the line. Fa #→ goes to the next character of A, or you can fs to the next character of s. T, #→ to the first character before the comma. Commas can change into other characters. 3FA #→ Looks for the third occurrence of a on the current line. F and T → the same thing as F and T, but in the opposite direction. Zz # puts the current line in the middle of the screen. Zt # puts the current line at the top of the screen (not at the bottom)Copy the code

Copy the shear

Yy and P, or DD and P

Yy # → Copy the current line NYy # → Copy n lines below the current line DD # → Cut the current line NDD # → Cut n lines below the current line p, p # → Paste the current cursor on the line or line 2DD # → Delete 2 lines 3p # → Paste text 3 timesCopy the code

Simple layout

:ce(nter) # Center cursor row: RI (GHT) # Right cursor row :le(ft) # Left cursor row J # Merge cursor next row to cursor row >> # Indent cursor row (a TAB) << # Reduce indentation on the line where the cursor is (one TAB) n>> # Increase indentation on n lines where the cursor is << # Reduce indentation on n lines where the cursor isCopy the code

Save the exit

:w new_filename # → Save as specified file :w # → Save changes :wq # → Save changes and push ZZ # → Shortcut keys, save changes and push :q! # → Do not save the change from :wq! # → Save the changes and push (file owner, root user)Copy the code

A full page page

Ctrl-f # Next page F is' forword 'Ctrl-b # Previous page B is' backward'Copy the code

replace

Replace cancel

R # → Replace close the character r # → replace the character from the cursor, press ESC to end u # → cancel the previous operation CTRL + R # → return to the previous stepCopy the code

Quick replacement

Select one of them in visual mode, then type Ctrl-n, you will find that the second string is also selected, keep typing Ctrl-n, you can select all the same strings, combine this function with CTRLSF

Accurate replacement

Vim has powerful content replacement commands. When doing content replacement operations, pay attention to how to specify the range of files to be replaced, whether the whole word matches, and whether to replace after confirming one by one.

:[range]s/{pattern}/{string}/[flags]Copy the code

  • If it is replaced in the current file, [range] does not need to be specified. The default is in the current file.

  • If the current selected area is not specified, vim will automatically generate the following commands when you type the replacement command: :'<,’> S /{pattern}/{string}/[flags]

  • You can also specify line ranges, e.g., lines 3 through 5: :3,5s/{pattern}/{string}/[flags]

  • If you want to replace an open file, you need to explicitly tell vim the range with the bufdo command before performing the replacement.

  • If all files in the project are replaced, first :args **/.cpp */*. H tell VIm the range, and then perform the replacement;

:21,27s/^/#/g Line start replace # replace (add) replace :ab mymail [email protected] Type mymail press the space to automatically replace to [email protected]

Switch the annotation

  • ; Cc, comment the currently selected text, add // at the beginning of each line if the entire line is selected, and add /**/ before and after the selected part if part of the line is selected;

  • ; Cu, uncomment the selected text block.

Project File menu

Customize shortcut keys

; Fl # display file menu file listCopy the code

Built-in shortcut keys

Shift + I # show/hide Hide files t # Open selected files/bookmarks in new Tab and jump to new Tab T # Open selected files/bookmarks in new Tab but not jump to new Tab I # split a new window to open the selected files, Gi # split a new window to open the selected file, but not s # vsplit a new window to open the selected file, gs # vsplit a new window to open the selected file, But do not jump to the window CTRL + W + H # cursor focus left tree directory CTRL + W + L # cursor focus right file display window CTRL + W + W # Cursor automatically switch in the left and right Windows CTRL + W + R # Move the layout position of the current window o # Open a file, directory or bookmark in an existing window, and jump to that window go # Open a file, directory or bookmark in an existing window, but do not jump to that window! X # recursively open all directories under the selected node. X # recursively close all directories under the selected node NERDTree - I, NERDTree-e D # delete bookmark # P # skip to root P # skip to parent K # skip to J # skip to last K # skip to last K # skip to last J # Go to the next node at the same level of the current directory C # set the parent directory of the selected directory or the selected file as the root u # set the parent directory of the current root as the root and become close the original root u # set the parent directory of the current root as the root, R # Recursively refresh select directory R # recursively refresh root m # Show file system menu CD # set CWD to select directory I # toggle whether to show hidden files f # Toggle whether to use file filter f # Toggle whether to show file B # Toggle whether to show bookmarks # q # close NerdTree window? # Toggle whether Quick Help is displayedCopy the code

Cutting window

:new # Split # Split window :split # split window :vsplit # Split window (also available :vs)Copy the code

Tab operation

Multi-tab window splitting

: tabNew [++opt option] [+ CMD] file # Create a new TAB :tabc for the specified file # Close the current TAB :tabo # Close all other tabs :tabs # View all open tabs :tabp # Previous :tabn # NextCopy the code

The TAB to switch

Tnew # New TAB TN # Next TAB TP # Previous TAB # Window toggle nw # Standard mode: gt, gt # There are many more he commands, see the Lord himself, :help table. Ctrl+ WW # to move to the next window # or press Ctrl+ W first, then release both, then move the big oh oh left/up/down/right window by j/ K/H/L (equal to the arrow keys vim moves) Ctrl+ WJ # to move to the bottom window Ctrl+ WK # to move to the top windowCopy the code

HTML operation

Easy to use thanks to the plugin Emmet.vim. Type div>p#foo$*3>a and press the shortcut key

— for < ctrl-y > and then press the comma [Ctrly,].

Press capital V to Enter Vim visual mode, select the above three lines, and then press < c-Y >, then Vim command line will prompt Tags:, type ul> Li *, and then press Enter.

< CTRL + Y >d Select the entire label based on the cursor position. < CTRL + Y >D Select the entire label based on the cursor position. < Ctrl-Y >N Skip to the next editing point. < Ctrl-Y >N Skip to the previous editing point < Ctrl-y >k Removes label pairs < Ctrl-y >j Split/merge labels < Ctrl-y >/ toggle comments < Ctrl-y >a generates anchor from URL address < Ctrl-y >a generates reference text from URL address

Plugin instructions

Not all of these plugins are in my.vimrc configuration file, which I personally like and am used to.

theme

  • Vim-colour-solarized Theme style simple solarized

  • Molokai theme style colorful Molokai

  • PhD theme style retro PhD

Using the interface

  • Mango A nice color scheme

  • VimAirline beautifies status bar preferences

  • Vim-powerline beautifies the status bar

  • Vim-airline beautifies the status bar and configuration

  • Vim – the airline – themes airline theme

Manage the project

  • NERDTree Manage your project files

  • VimFugitive Git integration

  • VimGitGutter Git integration, highly recommended!

  • EditorconfigVim Shared coding conventions

  • Command-t Searches for files

  • Vim – Signature bookmark visualization plugin

  • BOOKMARKS– mark-and-highlight-full-lines This allows BOOKMARKS to be highlighted

  • Tagbar method map navigation

  • Indexer.tar. gz automatically generates and imports labels

    • DfrankUtil add-on, depends on this plugin

    • Vimprj plugin, depends on this plugin

  • Ctrlsf. vim context plugin, such as search to keyword, middle abbreviations, display a context

  • Vim -multiple-cursors multi-cursor editing function

Code written

  • NERDCommenter comments are easier

  • DrawIt ASCII Art-style comments

  • VimTrailingWhitespace highlights trailing Spaces

  • Syntastic syntax check

  • VimEasyAlign adjusts part of the code

  • VimMultipleCursors Write on multiple lines easily

  • VimJsBeautify Reformat JavaScript, HTML and JSON files

  • VimYankStack Iterate over yanked stack on paste

  • VimSurround Quoting and parenthesizing

  • YouCompleteMe key and complete, support fuzzy search, high-speed complete plug-in

  • VimForTern Smart JavaScript autocompletion

  • VimNode Navigate through node.js code/modules

  • VimLint Linter used by syntastic for VimL

  • VimLParser VimL parser (required by VimLint)

  • Emmet-vim improves HTML and CSS workflow

  • Vim-cpp-enhanced -highlight C++ syntax highlighting support

  • Vm-indent-guides are associated with code with the same indentation

  • Vim-fswitch interface file (myclass.h) and implementation file (myclass.cpp) quick switch plug-in

  • MiniBufExplorer displays Windows corresponding to multiple buffers

  • Wildfire. Vim shortcut click between <>, [], and {}

  • Gundo.vim gives you the opportunity to undo the last step or steps

  • Vim – EasyMotion moves fast, twice

    as the prefix key

  • Vim is a powerful autocomplete plugin for Shougo/ NeoComplete

  • Vim-instant-markdown Edit the Markdown document and automatically start Firefox to show you the final markdown effect

  • Fcitx. vim Smooth switching between Chinese and English input

  • Othree /xml.vim/provides the ability to write XML/HTML quickly, such as automatic tag closing

  • Pangloss/ViM-javascript provides intelligent indentation of JS code, using only its Indent functionality

Code reading

  • Syntax highlighting

    • Vim-polyglot supports common syntax highlighting

    • VimJson JSON highlights and hides quotes

    • YaJS JavaScript Syntax (ES5 and ES6)

    • Vim – CSS3 – Syntax CSS3 highlighting, including stylus,Less,Sass

    • Vim-css-color Specifies the CSS highlight color

    • Gko/Vim-Coloresque CSS highlights colors

    • ScssSyntax SCSS syntax

    • HTML5 HTML5 syntax

    • Stylus Stylus code highlights

  • Well-known JS library JavaScriptLibrariesSyntax syntax highlighting

  • Ultisnips template completion plug-in

  • Vim-protodef code framework that automatically generates class implementations based on class declarations

The resources

  • Vim Adventure: Learn Vim in the game

  • Css-color stopped working after updating Vim to 7.4