Vimrc

.vimrc Configuration file for vim editor in Unix.

Preview

Vimrc - 图1

Configuration

Package manager

First install Vundle

Fonts & Symbols

  • In OSX, install powerline symbols for Airline plugin
  • In iTerm, set non-ASCII font to Powerline.

Setup .vimrc file

Usually found in ~/.vimrc

Replace your current .vimrc file content with the following blob.

  1. set nocompatible              " be improved, required
  2. filetype off                  " required
  4. " Vundle is the package manager
  6. set rtp+=~/.vim/bundle/Vundle.vim
  7. call vundle#begin()
  9. " alternatively, pass a path where Vundle should install plugins
  10. " call vundle#begin('~/some/path/here')
  12. " let Vundle manage Vundle, required
  13. Plugin 'VundleVim/Vundle.vim'
  15. " Color theme
  16. Plugin 'crusoexia/vim-monokai'
  18. " NERDTREE
  19. Plugin 'scrooloose/nerdtree.git'
  20. " close vim if NERDTREE is the only window left
  21. autocmd bufenter * if (winnr("$") == 1 && exists("b:NERDTree") && b:NERDTree.isTabTree()) | q | endif 
  24. " Ctrl-P to search/open files
  25. Plugin 'ctrlpvim/ctrlp.vim.git'
  26. let g:ctrlp_map = '<leader>p' " Map :CtrlP
  27. let g:ctrlp_cmd = 'CtrlP' " Map :CtrlP
  28. let g:ctrlp_custom_ignore = {
  29.   \ 'dir':  '\v[\/](\.git|node_modules|build)$',
  30.   \ 'file': '\v\.(exe|so|dll)$',
  31.   \ }
  33. " Syntaxis checker
  34. Plugin 'scrooloose/syntastic.git'
  35. set statusline+=%#warningmsg#
  36. set statusline+=%{SyntasticStatuslineFlag()}
  37. set statusline+=%*
  38. let g:syntastic_always_populate_loc_list = 1
  39. let g:syntastic_auto_loc_list = 1
  40. let g:syntastic_check_on_open = 1
  41. let g:syntastic_check_on_wq = 0
  43. " JS syntax highlighting
  44. Plugin 'pangloss/vim-javascript'
  46. " JSX highlighting. Depends on 'pangloss/vim-javascript'
  47. Bundle 'mxw/vim-jsx'
  48. let g:jsx_ext_required = 0 " to enable jsx in .js files
  49. " Use eslint
  50. let g:syntastic_javascript_checkers = ['eslint'] 
  52. " Inserts pairs of quotes, brackets, braces
  53. Plugin 'jiangmiao/auto-pairs.git'
  55. " Cool status bar
  56. Plugin 'vim-airline/vim-airline'
  57. " use powerline symbols
  58. let g:airline_powerline_fonts = 1
  60. " EditorConfig
  61. Plugin 'editorconfig/editorconfig-vim'
  63. " Elm synthax highlight
  64. Plugin 'lambdatoast/elm.vim.git'     
  66. " Highlight html in JS string templates
  67. Plugin 'Quramy/vim-js-pretty-template'    
  69. " All of your Plugins must be added before the following line
  70. call vundle#end()            " required
  71. filetype plugin indent on    " required
  73. " Put your non-Plugin stuff after this line
  75. set number
  76. set tabstop=2
  77. set shiftwidth=2
  78. set expandtab
  79. set autoindent
  80. set smarttab
  81. set colorcolumn=80,100,120
  82. set ruler
  83. let mapleader = "-"
  84. nnoremap <leader>w <c-w>
  85. nnoremap <leader>n :NERDTreeToggle<CR>
  86. syntax on
  87. set t_Co=256
  88. colorscheme monokai

Vundle

Vundle is the plugin/package manager

To ignore plugin indent changes, instead use:
filetype plugin on

commands description
:PluginList lists configured plugins
:PluginInstall installs plugins; append ! to update or just :PluginUpdate
:PluginSearch foo searches for foo; append ! to refresh local cache
:PluginClean confirms removal of unused plugins; append ! to auto-approve removal

See :h vundle for more details or wiki for FAQ

Plugins installed in this .vimrc

name source description
Monokai crusoexia/vim-monokai Color theme like SublimeText
NerdTree scrooloose/nerdtree.git Navigator side-bar
Ctrl-P ctrlpvim/ctrlp.vim.git File opener
Syntastic scrooloose/syntastic.git Syntax highlighting
Vim Javascript pangloss/vim-javascript JS highlighting
Vim JSX mxw/vim-jsx JSX support
Auto Pairs jiangmiao/auto-pairs.git Automatically closes {},[], "", '', etc.
Airline vim-airline/vim-airline Cool status bar
Editor Config editorconfig/editorconfig-vim Enables text editor rules in .editorconfig

Troubleshooting

  1. When copy-pasting this config for the second time, the autopair plugin can insert " where there
    shouldn’t be. That might comment out code that you need.
  2. Also the long command for the NERDTREE might be split by the copy-paste. Make sure it is in one single line.
  3. If tern server fails, make sure you run npm i in the bundle directory.