Set Up VIM as An IDE - Part 203 November, 2019written by Bill

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.


Okay, let's assume that you've already installed the plugin manager, then we'll add the following setup inside .vimrc file.

  " ************************************************************************
  " 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()

    " Choose colorscheme
    " *********************************************
    if strftime('%H') >= 7 && strftime('%H') < 20
        colorscheme sublimemonokai
        " colorscheme office-dark
        colorscheme allomancer
        let g:airline_theme='cosmic_latte_dark'

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/'                                            " 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

  " ********************************************************************************

  " 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 = {}

  " 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)
  " 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.

vimtext editor

Reading Time8 min