Now, in this article i'll continue to setup Vim based on the article part 1. The first thing to do is to add a plugin managers, there are a few plugin manager that you can choose, you can search on google and pick which one do you want to use, but for me, i'm gonna use Vundle. Please see the installation instructions for the plugin manager that you choose.
Theming
Okay, let's assume that you've already installed the plugin manager, then we'll add the following setup inside .vimrc file.
" PLUGINS
" ************************************************************************
" set the runtime path to include VUndle and initialize
set rtp+=~/.vim/bundle/Vundle.vim
call vundle#begin()
" let Vundle manage Vundle, required
Plugin 'VundleVim/Vundle.vim'
" Brief help
" :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
Plugin 'flazz/vim-colorschemes'
Plugin 'elzr/vim-json'
Plugin 'plasticboy/vim-markdown'
Plugin 'severin-lemaignan/vim-minimap'
Plugin 'airblade/vim-gitgutter'
" Icon files
Plugin 'tiagofumo/vim-nerdtree-syntax-highlight'
Plugin 'ryanoasis/vim-devicons'
" Airline
Plugin 'vim-airline/vim-airline'
Plugin 'vim-airline/vim-airline-themes'
" theme plugins
Plugin 'nightsense/office'
Plugin 'fatih/molokai'
Plugin 'nightsense/cosmic_latte'
Plugin 'ErichDonGubler/vim-sublime-monokai'
Plugin 'Nequo/vim-allomancer'
" All of your Plugins must be added before the following line
call vundle#end()
try
" Choose colorscheme
" *********************************************
if strftime('%H') >= 7 && strftime('%H') < 20
colorscheme sublimemonokai
else
" colorscheme office-dark
colorscheme allomancer
let g:airline_theme='cosmic_latte_dark'
endif
catch
endtry
After you add those setup in you .vimrc file, try to open your Vim and then install all the plugins we've set by using vundle command :PluginInstall. It'll take a few seconds then re-open your Vim and you'll see a theme (color scheme) has been applied on our Vim. Okay, it's cool, but there's one more thing you need to do before going further, since i use vim-devicons, this plugin will adds file type icons for our files inside Vim, so you need to follow the instructions here to make it work.
Let's add some more plugins for our Vim. NOTES: the following plugins are just for my own used, you might not need it, so you can uninstall it later. Please put the following plugin list right above call vundle#end().
Plugin 'scrooloose/nerdtree' " Better file browser
Plugin 'scrooloose/nerdcommenter' " Code commenter
Plugin 'majutsushi/tagbar' " Class/module browser
Plugin 'ctrlpvim/ctrlp.vim' " Code and files fuzzy finder
Plugin 'mattn/emmet-vim' " emmet, you know what it is
Plugin 'kien/tabman.vim' " Tab list panel
Plugin 'Townk/vim-autoclose' " Autoclose chars
Plugin 'fisadev/dragvisuals.vim' " Drag visual blocks arround (it is like Ctrl+d arrow up/down on sublime)
Plugin 't9md/vim-choosewin' " Land on window like tmux's 'display-pane'
Plugin 'tpope/vim-fugitive' " Git integration
Plugin 'google/vim-searchindex' " display number of search matches & index of a current match
Plugin 'ap/vim-css-color' " Paint css colors with the real color
Plugin 'tpope/vim-surround' " Surround
Plugin 'vim-scripts/matchit.zip' " XML/HTML tags navigation
Plugin 'vim-scripts/YankRing.vim' " Yank history navigation
Plugin 'pangloss/vim-javascript' " Javascript indentation and syntax support
Plugin 'w0rp/ale' " Check syntax in Vim asynchronously and fix files
Plugin 'MaxMEllon/vim-jsx-pretty' " JSX syntax pretty highlighting
Plugin 'styled-components/vim-styled-components'
Save it, and install again by using vundle command :PluginInstall. Cool, we're are done with the plugins setup. But we're not done yet, we need to configure our installed plugins. All the plugins are configurable, which mean you can configure it base on your needs, that's why Vim is powerful. So here is my plugins setup, just put it in the very bottom of .vimrc file:
Plugin Tweak
" PLUGINS SETUP
" ********************************************************************************
" NERDTree -----------------------------
map <C-b> :NERDTreeToggle<CR>
let g:NERDTreeDirArrowExpandable = '▸'" Prettier
" open nerdtree with the current file selected
nmap <leader>t :NERDTreeFind<CR>
let g:NERDTreeDirArrowCollapsible = '▾'
let g:NERDTreeMouseMode = 3
let NERDTreeShowLineNumbers = 1
let NERDTreeShowHidden = 1
let NERDTreeMinimalUI = 1
let NERDTreeIgnore=['\.pyc$', '\~$'] "ignore files in NERDTree
" Tagbar -----------------------------
" toggle tagbar display
map <F4> :TagbarToggle<CR>
" autofocus on tagbar open
let g:tagbar_autofocus = 1
" Airline -----------------------------
let g:airline_powerline_fonts = 1
let g:airline_theme = 'distinguished'
let g:airline#extensions#ale#enabled = 1
let g:airline#extensions#tabline#enabled = 1
let g:airline#extensions#whitespace#enabled = 0
let g:Powerline_symbols = "fancy"
let g:Powerline_dividers_override = ["\Ue0b0","\Ue0b1","\Ue0b2","\Ue0b3"]
let g:Powerline_symbols_override = {'BRANCH': "\Ue0a0", 'LINE': "\Ue0a1", 'RO': "\Ue0a2"}
" to use fancy symbols for airline
if !exists('g:airline_symbols')
let g:airline_symbols = {}
endif
" Airline unicode symbols
let g:airline_left_sep = '»'
let g:airline_right_sep = '«'
let g:airline_left_alt_sep = ''
let g:airline_right_alt_sep = ''
let g:airline_symbols.branch = ''
let g:airline_symbols.readonly = ''
let g:airline_symbols.linenr = ''
let g:airline_symbols.paste = 'ρ'
let g:airline_symbols.whitespace = 'Ξ'
" vim-minimap -----------------------------
let g:minimap_highlight='Visual'
let g:minimap_show='<leader>ms'
let g:minimap_update='<leader>mu'
let g:minimap_close='<leader>gc'
let g:minimap_toggle='<leader>gt'
" CtrlP -----------------------------
" file finder mapping
let g:ctrlp_map = '<leader>ee'
" tags (symbols) in current file finder mapping
nmap <leader>g :CtrlPBufTag<CR>
" tags (symbols) in all files finder mapping
nmap <leader>G :CtrlPBufTagAll<CR>
" general code finder in all files mapping
nmap <leader>f :CtrlPLine<CR>
" recent files finder mapping
nmap <leader>m :CtrlPMRUFiles<CR>
" commands finder mapping
nmap <leader>c :CtrlPCmdPalette<CR>
" to be able to call CtrlP with default search text
function! CtrlPWithSearchText(search_text, ctrlp_command_end)
execute ':CtrlP' . a:ctrlp_command_end
call feedkeys(a:search_text)
endfunction
" same as previous mappings, but calling with current word as default text
nmap <leader>wg :call CtrlPWithSearchText(expand('<cword>'), 'BufTag')<CR>
nmap <leader>wG :call CtrlPWithSearchText(expand('<cword>'), 'BufTagAll')<CR>
nmap <leader>wf :call CtrlPWithSearchText(expand('<cword>'), 'Line')<CR>
nmap <leader>we :call CtrlPWithSearchText(expand('<cword>'), '')<CR>
nmap <leader>pe :call CtrlPWithSearchText(expand('<cfile>'), '')<CR>
nmap <leader>wm :call CtrlPWithSearchText(expand('<cword>'), 'MRUFiles')<CR>
nmap <leader>wc :call CtrlPWithSearchText(expand('<cword>'), 'CmdPalette')<CR>
" don't change working directory
let g:ctrlp_working_path_mode = 0
" ignore these files and folders on file finder
let g:ctrlp_custom_ignore = {
\ 'dir': '\v[\/](\.git|\.hg|\.svn|node_modules|vendor)$',
\ 'file': '\.pyc$\|\.pyo$\|\.sh$\|\.so$',
\ }
" vim emmet trigger key, prest ctrl + e + comma -----------------------------
let g:user_emmet_leader_key='<C-E>'
" TabMan ------------------------------
" mappings to toggle display, and to focus on it
let g:tabman_toggle = 'tl'
let g:tabman_focus = 'tf'
" Autoclose ------------------------------
" Fix to let ESC work as espected with Autoclose plugin
let g:AutoClosePumvisible = {"ENTER": "\<C-Y>", "ESC": "\<ESC>"}
" DragVisuals ------------------------------
" mappings to move blocks in 4 directions
vmap <expr> <S-M-LEFT> DVB_Drag('left')
vmap <expr> <S-M-RIGHT> DVB_Drag('right')
vmap <expr> <S-M-DOWN> DVB_Drag('down')
vmap <expr> <S-M-UP> DVB_Drag('up')
" mapping to duplicate block
vmap <expr> D DVB_Duplicate()
" choosewin ------------------------------
" mapping
nmap - <Plug>(choosewin)
" show big letters
let g:choosewin_overlay_enable = 1
" vim-javascript --------------------------
" set conceallevel=1
map <leader>co :exec &conceallevel ? "set conceallevel=0" : "set conceallevel=1"<CR>
let g:javascript_conceal_function = "ƒ"
let g:javascript_conceal_null = "ø"
let g:javascript_conceal_this = "@"
let g:javascript_conceal_return = "⇚"
let g:javascript_conceal_undefined = "¿"
let g:javascript_conceal_NaN = "ℕ"
let g:javascript_conceal_prototype = "¶"
let g:javascript_conceal_static = "•"
let g:javascript_conceal_super = "Ω"
let g:javascript_conceal_arrow_function = "⇒"
let g:javascript_conceal_noarg_arrow_function = "🞅"
let g:javascript_conceal_underscore_arrow_function = "🞅"
" ALE (eslint) -------------------------
map <C-t> :ALEDetail<CR>
let g:ale_fix_on_save = 1
let g:ale_sign_error = '✗'
let g:ale_sign_warning = '⚠'
let g:ale_open_list = 1
let g:ale_set_loclist = 0
let g:ale_lint_on_enter = 0
let g:ale_set_quickfix = 1
let g:ale_keep_list_window_open = 0
let g:ale_lint_delay = 960000 " 16 minutes
let g:ale_lint_on_text_changed= "never"
let g:ale_list_window_size = 5 " Show 5 lines of errors (default: 10)
nmap <silent> <Leader>k <Plug>(ale_previous_wrap)
nmap <silent> <Leader>j <Plug>(ale_next_wrap)
let g:ale_linters = {
\ 'sh': ['shell'],
\ 'javascript': ['eslint'],
\}
let g:ale_fixers = {
\ 'sh': ['shfmt'],
\ 'javascript': ['prettier', 'eslint'],
\ 'json': ['prettier'],
\ 'markdown': ['prettier'],
\ 'yaml': ['prettier'],
\ 'css': ['prettier'],
\}
" vim jsx pretty -----------------------
let g:vim_jsx_pretty_colorful_config = 1
let g:coc_node_path = '/home/your_username/.nvm/versions/node/v12.13.0/bin/node'
After you added it, you need to install some javascript packages globally like eslint and prettier because i want my Vim to automatically detect syntax error and format my code. To install it, run this command through your terminal npm install -g eslint prettier.
Cool, we're almost done. The last thing you need to do is to install Intellisense engine for Vim. I'm gonna use coc.nvim so please follow the instructions here to install it. After you install it, re-open again your Vim and install the following coc extensions:
- coc-tsserver
- coc-yank
- coc-styled-components
- coc-sql
- coc-snippets
- coc-python
- coc-pairs
- coc-markdownlint
- coc-json
- coc-import-cost
- coc-html
- coc-highlight
- coc-docker
- coc-css
To install it, use this command through you Vim: :CocInstall coc-tsserver coc-yank etc. Oh i forgot to mention that you need to change your_username inside the config to your user, please change it now and save it again :D.
Okay, we're done with the setup, let's try to edit a javascript file, if it works, it should behave like an IDE, automatically detect built-in functions.
This setup is mean to be use for Javascript environment, i know it's not the good or even best setup for javascript environment but it's quite useful for me. By the way, coc it's not just for javascript, you can even use it for another programming languages, just read on coc.nvim documentations for more details.
Okay our setup is completed. You might be ask, why do i need Vim and set it up to be like an IDE? Why don't just use a modern text editor like VSCode, Sublime or even a powerfull IDE like Netbeans or WebStorm. Well, these tools are not quite suitable for low-end laptop/PC, that's why Vim is the best choice.
I actually not use Vim regularily, but it is fun to use it and get a new exprience for trying a cool stuff with it. Just try it by yourself, i'm sure you will love it.
For the complete setup, you can grab it here or from my github for the updated config.