spruce-bruce/js-vim-config.md

## js-vim-config.md

      
    Raw
  

              js-vim-config.md
            
          
    Setting up vim for javascript development

Even though most of this stuff has nothing to do with javascript
Install vim 8

The newest version of vim won't necessarily be the version you have installed. Run vim --version to check your version. brew install vim --override-system-vim is the easiest way to install the latest version on mac.
Plugins

TODO
Colors


Make sure you have colors turned on in your terminal. Add export CLICOLOR=1 to your .bash_profile
In order to have really nice colors, use 256 colors with iterm2. I highly recommend using the base16 project's themes in iterm2.
You also have to do the installation steps for base16-shell. Use the colortest script provided to make sure everything looks right in your shell before configuring in vim.
Once you have 256 colors in your terminal you can install (and configure) the base16-vim plugin. Make sure you have the line syntax on in your .vimrc.

JS and JSX

Simply install these two plugins. They should require little to no configuration.

vim-javascript
vim-jsx

Syntax checking and linting

I like syntastic. Syntastic does not yet make use of vim 8 async features, though, so you'll need to jump through some hoops to get fast linting. If linting doesn't seem to be working debug by running eslint_d /path/to/your/file. Usually any problem with linting is because of the linter on the machine and not becuase of syntastic configuration.

Install eslint_d. It runs eslint as a daemon so it doesn't have overhead every time the eslint command is run.
I configure syntastic like this in my .vimrc:

let g:syntastic_always_populate_loc_list = 1
let g:syntastic_auto_loc_list = 2
let g:syntastic_check_on_open = 1
let g:syntastic_check_on_wq = 0

let g:syntastic_javascript_checkers = ['eslint']
let g:syntastic_javascript_eslint_exec = 'eslint_d'
let g:syntastic_javascript_eslint_args = '--parser=babel-eslint'
let g:syntastic_javascript_eslint_args = "--cache"
let g:jsx_ext_required=0

Nicer UI elements


vim-airline with vim-airline-themes To give a nice status and tab bar.

" AIRLINE
""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""

let g:airline#extensions#tabline#enabled = 1
let g:airline_theme='bubblegum'
set laststatus=2
set ttimeoutlen=50


vim-gitgutter to show file changes. No configuration required.

File navigation


[nerdtree] (https://github.com/scrooloose/nerdtree) is the gold standard plugin that provides a file navigation pane. I also install nerdtree-git-plugin so I can see what files/directories have changes from nerdtree.

" NERDTREE
""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
map <C-n> :NERDTreeToggle<CR>
let g:NERDTreeWinSize=40
let NERDSpaceDelims=1

Code Folding

TODO
Search

Vim uses third party search applications. By default it uses grep which can be quite slow. There are lots of alternatives, like the silver searcher or ripgrep. Ripgrep is the new hotness so I'm using that.
You can install ripgrep with brew install ripgrep. Then configure your .vimrc like this:
" SEARCH - RIPGREP (shamelessly stolen from thoughtbot)
""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""

if executable('rg')
  set grepprg=rg\ --vimgrep\ --no-heading\ --ignore-case .            " tell vim to "grep" with ripgrep
  set grepformat=%f:%l:%c:%m,%f:%l:%m         
  let g:ctrlp_user_command = 'rg %s --files --color=never --glob ""'  " tell ctrlp to use ripgrep
  let g:ctrlp_use_caching = 0
endif

command -nargs=+ -complete=file -bar Rg silent! grep! <args>|cwindow|redraw!    " create a :Rg command that searches
nnoremap \ :Rg<SPACE>                                                           " map :Rg to \