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.
set rtp+=~/.vim/bundle/Vundle.vim
call vundle#begin()
Plugin 'VundleVim/Vundle.vim'
Plugin 'flazz/vim-colorschemes'
Plugin 'elzr/vim-json'
Plugin 'plasticboy/vim-markdown'
Plugin 'severin-lemaignan/vim-minimap'
Plugin 'airblade/vim-gitgutter'
Plugin 'tiagofumo/vim-nerdtree-syntax-highlight'
Plugin 'ryanoasis/vim-devicons'
Plugin 'vim-airline/vim-airline'
Plugin 'vim-airline/vim-airline-themes'
Plugin 'nightsense/office'
Plugin 'fatih/molokai'
Plugin 'nightsense/cosmic_latte'
Plugin 'ErichDonGubler/vim-sublime-monokai'
Plugin 'Nequo/vim-allomancer'
call vundle#end()
try
if strftime('%H') >= 7 && strftime('%H') < 20
colorscheme sublimemonokai
else
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'
Plugin 'scrooloose/nerdcommenter'
Plugin 'majutsushi/tagbar'
Plugin 'ctrlpvim/ctrlp.vim'
Plugin 'mattn/emmet-vim'
Plugin 'kien/tabman.vim'
Plugin 'Townk/vim-autoclose'
Plugin 'fisadev/dragvisuals.vim'
Plugin 't9md/vim-choosewin' 's 'display-pane'
Plugin 'tpope/vim-fugitive'
Plugin 'google/vim-searchindex'
Plugin 'ap/vim-css-color'
Plugin 'tpope/vim-surround'
Plugin 'vim-scripts/matchit.zip'
Plugin 'vim-scripts/YankRing.vim'
Plugin 'pangloss/vim-javascript'
Plugin 'w0rp/ale'
Plugin 'MaxMEllon/vim-jsx-pretty'
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
map <C-b> :NERDTreeToggle<CR>
let g:NERDTreeDirArrowExpandable = '▸'
nmap <leader>t :NERDTreeFind<CR>
let g:NERDTreeDirArrowCollapsible = '▾'
let g:NERDTreeMouseMode = 3
let NERDTreeShowLineNumbers = 1
let NERDTreeShowHidden = 1
let NERDTreeMinimalUI = 1
let NERDTreeIgnore=['\.pyc$', '\~$']
map <F4> :TagbarToggle<CR>
let g:tagbar_autofocus = 1
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"}
if !exists('g:airline_symbols')
let g:airline_symbols = {}
endif
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 = 'Ξ'
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'
let g:ctrlp_map = '<leader>ee'
nmap <leader>g :CtrlPBufTag<CR>
nmap <leader>G :CtrlPBufTagAll<CR>
nmap <leader>f :CtrlPLine<CR>
nmap <leader>m :CtrlPMRUFiles<CR>
nmap <leader>c :CtrlPCmdPalette<CR>
function! CtrlPWithSearchText(search_text, ctrlp_command_end)
execute ':CtrlP' . a:ctrlp_command_end
call feedkeys(a:search_text)
endfunction
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>
let g:ctrlp_working_path_mode = 0
let g:ctrlp_custom_ignore = {
\ 'dir': '\v[\/](\.git|\.hg|\.svn|node_modules|vendor)$',
\ 'file': '\.pyc$\|\.pyo$\|\.sh$\|\.so$',
\ }
let g:user_emmet_leader_key='<C-E>'
let g:tabman_toggle = 'tl'
let g:tabman_focus = 'tf'
let g:AutoClosePumvisible = {"ENTER": "\<C-Y>", "ESC": "\<ESC>"}
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')
vmap <expr> D DVB_Duplicate()
nmap - <Plug>(choosewin)
let g:choosewin_overlay_enable = 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 = "🞅"
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
let g:ale_lint_on_text_changed= "never"
let g:ale_list_window_size = 5
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'],
\}
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.