Front end Window Vim to remember

Since I changed to a poker keyboard, MY enthusiasm for Vim has been increasing. Finally, I found a time to calm down and play with Vim. Using Vim in Windows is really a pain, but the front-end development requirements are not high.

1. Download gvim and basic configuration

Download the exe file from gvim and install it directly on Windows

In Windows, the vim configuration file is _vimrc, in the installation of vim directory, after _vimrc open, delete the contents inside, paste the configuration, open vim again can see a more beautiful interface



set tags+ = ~ /.vim/tags
syntax enable
syntax on
set cursorline
hi CursorLine  cterm=NONE   ctermbg=darkred ctermfg=white
hi CursorColumn cterm=NONE ctermbg=darkred ctermfg=white
filetype plugin indent on
set t_Co=256
set background=dark  "dark light "can switch it to find which is look pretty
set nocompatible                 "some plugin need it
set hlsearch                     "highlight the search
set incsearch                    "move to fit position after one char input
set nobackup                     "won't produce the backup file when save file
set nowritebackup                "won't produce the backup file when save file
set noswapfile                   "won't use swapfile
set hidden                       "can open other file when a file is not saved
set ruler                        "show ruler at the right bottom
set nowrap                       "disable auto newline
set laststatus=2                 "status bar will show anytime
set updatetime=200               "tagbar response 800ms
set showmatch matchtime=0        "show the other bracket
set wmnu wildmode=longest:full   "when in command mode can use auto complete same as bash
set expandtab tabstop=4          "expand the tab to 4 space
set si ai ci cinkeys-=0# cinoptions=g0,:0   "some indent rules
set shiftwidth=4                 "make the indent 4 length
set softtabstop=4                "backspace can del 4 space
set lcs=eol:$,tab:\ | \"display tab to green line
set backspace=indent,eol,start   "better backspace
set fileencodings=utf-8,cp936    "auto test the file is uft-8 or cp936
set fileformats=unix,dos,mac     "line feed different in different mode
set completeopt=menuone,longest
set relativenumber

set guifont=Consolas:h14 "Set font
set clipboard=unnamed "Use the Windows clipboard

set foldmethod=syntax "Use syntax highlights to define folds
set foldlevel=100   "Do not collapse code automatically when starting Vim
set foldcolumn=5    "Set the width of the fold barCopy the code

1.1 Topic Recommendation

A theme called GruvBox is recommended and installed as follows:

  1. Download the file gruvbox and name it gruvbox.vim
  2. Copy the files to the vimFiles -> Colors folder in the Vim installation directory
  3. Add a line of configuration on _vimrccolorscheme gruvbox, you can see the effect after the restart

By analogy, installing theme color matching in Windows is the same procedure.

2. Install the Vundle plug-in manager

Installing vundle on Windows is a bit of a hassle. It is divided into three steps. The mechanism of installing vundle plug-in depends on Git and curl

2.1 installation chocolatey

Chocolatey is a useful package manager for Windows, similar to apt-get for Ubuntu. The installation steps are as follows:

Open CMD in Windows, paste the following command, and press Enter to install Chocolatey, using administrator privileges.



 @"%SystemRoot%\System32\WindowsPowerShell\v1. 0\powershell.exe" -NoProfile -InputFormat None -ExecutionPolicy Bypass -Command "iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))" && SET "PATH=%PATH%; %ALLUSERSPROFILE%\chocolatey\bin" Copy the code

2.2 Installing Git and curl

If you have git or curl on your PC, you don’t need to install git or curl again. Chocolatey is a package management tool installed in the previous step. Just run the following command under CMD to install Git or curl



choco install -y git
choco install -y curlCopy the code

Administrator privileges are also required here

2.3 installation Vundle

After completing the steps above, you can finally install Vundle. Go to the Vim installation directory, find VimFiles, create the bundle folder in that directory, go to the Bundler folder, and run the following command



git clone https://github.com/gmarik/vundleCopy the code

Clone the folder vundle, which we renamed to vundle.vim, has the following directory structure:

Vim installation directory



+--- vimfiles
    +--- bundle
        +--- vundle
            +--- autoload
Copy the code

2.4 configuration vimrc

First, add an environment variable VIM to Windows and configure it



VIM= VIM installation directoryCopy the code

After that, configure _vimrc. After opening it, add it to the original configuration



"Plug-in management
set rtp+=$VIM/vimfiles/bundle/Vundle.vim/
call vundle#begin()

"You can install the plug-in this time
Plugin 'VundleVim/Vundle.vim'

call vundle#end()
filetype plugin indent onCopy the code

The reason for configuring the environment variable is that the $VIM variable leads directly to the VIM installation root directory. Note that under Windows, use/instead of \ between paths

In normal mode, run BundleInstall. If the command is successfully executed, vundle is successfully installed

2.5 Common sense of Vundle

Vundle installation plug-ins come in two forms through configuration files

  1. invundle#begin()andvundle#end()Between configuration linesPlugin 'Plugin name'
  2. Configure a row directlyBundle 'Plug-in name'

In normal mode, run



:PluginInstallCopy the code

or



:BundleInstallCopy the code

It’s the same install all the plugins

Common commands:



:BundleInstall // Install the plug-in
:BundleInstall! // Update the plugin
:BundleClean // Uninstall the plug-inCopy the code

3 Common plug-ins and usage

This section will be updated from time to time, what to use what to install

Installing plug-ins under Windows most of the time requires a reboot of Vim, which is awkward!

If you want to know more about vim+ plugins, you can search for them on Github.

3.1 Beautiful bottom status bar

The installed plug-in is called vim-airline and the installation steps are as follows:

  1. Configuration _vimrc, add the following configuration, referring to the common sense of vundle plug-in installation above



    Plugin 'vim-airline/vim-airline'
Plugin 'vim-airline/vim-airline-themes'Copy the code
  2. Run BundleInstall and restart after installation

3.2 nerdTree

Sidebar file management, no more introduction, directly in the configuration of _vimrc, use :BundleInstall



Bundle 'scrooloose/nerdtree'Copy the code

To configure shortcut keys, press F2 switch sidebar to browse files



"NerdTree shortcut key mapping
let NERDTreeWinPos='left'
let NERDTreeWinSize=30
map <F2> :NERDTreeToggle<CR>Copy the code

Emmet/vim 3.3 – closetag

Install and configure _vimrc by using BundleInstall



Bundle 'mattn/emmet-vim'Copy the code

Configure the emmet shortcut key CTRL + TAB and make it work only for certain file types. Setting TAB alone is unscientific. TAB is often used for indentation



"Set up Emmet quickly
let g:user_emmet_expandabbr_key = '<c-tab>'
let g:user_emmet_settings = {'indentation': ' '}
let g:user_emmet_install_global = 0
autocmd FileType html,css EmmetInstallCopy the code

When emmet is not available, you can use vim-closeTag to automatically close HTML and XML tags. This is useful for large HTML files



Plugin 'alvan/vim-closetag'Copy the code

3.4 markdown

Install the MarkDown plugin, which supports markdown syntax, and install additional plugins if previews are required

Configure _vimrc using BundleInstall



"The markdown plug-in
Plugin 'godlygeek/tabular'
Plugin 'plasticboy/vim-markdown'Copy the code

3.5 Js/CSS/HTML/JSON formatting

Install _vIMrc and then PluginInstall. Note that NPM support is required to install the Node environment on your computer



Plugin 'maksimr/vim-jsbeautify'Copy the code

Set the shortcut keys and configure _vIMrc



map <c-f> :call JsBeautify()<cr>Copy the code

Use CTRL + F to format the file

3.6 Quickly Opening files

In vim, quickly find and open the file, use ctrlp.vim, configure _vimrc, use Vundle to install



Plugin 'ctrlpvim/ctrlp.vim'Copy the code

Configure the shortcut key, CTRL + P, open the search bar, you can browse the files in the current folder, you can also quickly open the files



let g:ctrlp_map = '<c-p>'
let g:ctrlp_cmd = 'CtrlP'Copy the code

More than 3.7 window

When separating multiple Windows, i.e. using the: VSP filename command, you can use SZW/vim-Maximizer to maximize and minimize Windows conveniently



Plugin 'szw/vim-maximizer'Copy the code

Set F3 as the shortcut key, as follows



nnoremap <silent><F3> :MaximizerToggle<CR>
vnoremap <silent><F3> :MaximizerToggle<CR>gv
inoremap <silent><F3> <C-o>:MaximizerToggle<CR>Copy the code

3.8 Global Search

Under Windows, global search is a very troublesome thing, here we decided to use vim’s own vimgrep, but this command is more troublesome to use, so we used the plug-in vim-easygrep, also using Vundle for installation



Plugin 'dkprice/vim-easygrep'Copy the code

Vim-easygrep has some default shortcuts, for example



<leader>vvThe word selected by the pointer can be searched globally in the current directoryCopy the code

For example, if we want to search a string str-star globally, we can select the string by cursor movement in visual mode, and then press the shortcut key

vv to complete the search of the string, which is very convenient

Of course, we can also directly global search, using the command



:GrepSearch stringCopy the code

Global substitution also works



:Replace [target] [replacement]Copy the code

3.9 Commenting Code

A quick comment of the implementation code, using the plug-in Scrooloose/NerdCommenter, is configured as follows



Plugin 'scrooloose/nerdcommenter'Copy the code

There are default shortcuts:

  1. Comment the current line:

    cc
  2. Toggle note:

    c

The comment space is configured to print one character



let g:NERDSpaceDelims = 1Copy the code

3.10 javascript library syntax highlighting

The plug-in javascript-libraries-syntax.vim is installed and configured as follows



Bundle 'javascript-libraries-syntax.vim'Copy the code

After installation, you can set the recognized JS library functions for syntax highlighting



let g:used_javascript_libs = 'jquery,requirejs'Copy the code

3.11 Quick cursor movement

Fast moving cursor plugin EasyMotion, installed and configured as follows



Plugin 'easymotion/vim-easymotion'Copy the code

Enable fast moving mode <leader><leader> W

Input highlighted letters can be adjusted to the corresponding position

3.12 Viewing the currently opened file

The plug-in used here is Jlanzarotta/BufExplorer, which is still installed using Vundle and configured as follows



Plugin 'jlanzarotta/bufexplorer'Copy the code

Configure the shortcut key F8 to view the open file list



nnoremap <silent><F8> :BufExplorer<CR>Copy the code

Ensure that the system is in normal mode

subsequent

Welcome to window-Vim, which will continue to be updated after the pit.