Setting up Vim for JS Development

I switched to Vim about 2 years ago and haven't looked back since. At first, it was hard. However, once you get a hang of it and start to work on it, you'll realize that it's the best thing ever. There are plenty of articles on this subject, but many of those are too verbose for my liking.

To keep things short, I will only list out the steps, .vimrc file, and necessary comments for setting up Vim successfully.

Setting Up Vim

Plugin Manager for Vim

• Vundle

1. $ git clone https://github.com/VundleVim/Vundle.vim.git ~/.vim/bundle/Vundle.vim
2. Set up neocomplete (a code completion tool you need to run the following) and Ack (search)

For Mac

brew install vim --with-lua

For Ubuntu

Refer to: https://github.com/Shougo/neocomplete.vim

Install Ack: https://beyondgrep.com/install/

(Needed for file searching)

3. Install powerline fonts : https://github.com/powerline/fonts

4. Install the awesome solarized theme : http://ethanschoonover.com/solarized

Make sure you set up the font in terminal preferences to a powerline font.

.vimrc

Update the.vimrc file for plugins setup. (This is the minimal basic setup code, if you are using Java, Python, or any other language, you can skip the rest of the article)

set nocompatible “ be iMproved, required
filetype off “ required
“ set the runtime path to include Vundle and initialize
set rtp+=~/.vim/bundle/Vundle.vim

call vundle#begin()
Plugin ‘VundleVim/Vundle.vim’

“Basic Plugins
Plugin ‘scrooloose/nerdtree’
Plugin ‘Xuyuanp/nerdtree-git-plugin’
Plugin ‘vim-airline/vim-airline’
Plugin ‘vim-airline/vim-airline-themes’
Plugin ‘kien/ctrlp.vim’
Plugin ‘vim-syntastic/syntastic’
Plugin ‘tpope/vim-fugitive’
Plugin ‘easymotion/vim-easymotion’
Plugin ‘tpope/vim-repeat’
Plugin ‘Shougo/neocomplete.vim’
Plugin ‘airblade/vim-gitgutter’Plugin ‘mileszs/ack.vim’

call vundle#end() “ required

“remap the switching between split windows
nmap <c-j> <c-w>j
nmap <c-k> <c-w>k
nmap <c-l> <c-w>l
nmap <c-h> <c-w>h

“NERD Tree commands
“open NERDTree automatically when vim starts up
autocmd vimenter * NERDTree
“close vim if NERDTree is the only window left open
autocmd bufenter * if (winnr(“$”) == 1 && exists(“b:NERDTree”) && b:NERDTree.isTabTree()) | q | endif

“vim-airline setup solarized dark theme
let g:airline#extensions#tabline#enabled = 1
let g:airline_powerline_fonts = 1

“Syntastic setup
set statusline+=%#warningmsg#
set statusline+=%{SyntasticStatuslineFlag()}
set statusline+=%*

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

“common setup
syntax enable
set relativenumber

“ easy motion 
“ `s{char}{char}{label}` 
“ Need one more keystroke, but on average, it may be more comfortable. 
nmap s <Plug>(easymotion-s2) 

“ Turn on case insensitive feature 
let g:EasyMotion_smartcase = 1 
“ JK motions: Line motions 
map <Leader>j <Plug>(easymotion-j) 
map <Leader>k <Plug>(easymotion-k)

“Neocomplete
let g:neocomplete#enable_at_startup = 1

“ Only required for mac users to preven the terminal flash issueset noerrorbells visualbell t_vb=autocmd GUIEnter * set visualbell t_vb=

Special plugins for JavaScript development

1. Install prettier globally yarn global add prettier

Add the following plugins.

Plugin 'prettier/vim-prettier'
Plugin 'pangloss/vim-javascript'

Add the following code after the plugin ends.

"prettier
"run prettier before saving
let g:prettier#autoformat = 0autocmd BufWritePre *.jsx,*.js,*.json,*.css,*.scss,*.less,*.graphql Prettier
"ctrlp filterlet g:ctrlp_custom_ignore = 'node_modules\|DS_Store\|git'

That's it! Short and sweet — if you have any questions of comments, feel free to comment below!