Vim/Vi is a powerful text editor that is installed on every Unix style operating system. The beauty of Vim is that you do not have to take your hands off the keyboard to navigate. Everything you could ever want to do can be accomplished by key strokes. This speeds up text editing, but the real power of Vim is how customizable it is.
Out of the box, Vim is nothing more than a powerful text editor. To really get the most out of Vim when writing any sort of code, you need to install plugins and optimize your .vimrc file settings. Vim has been a top editor of choice for decades. This is because just about everything you could want to customize can be customized. This is similar to how Linux and Unix are preferred by many computer users due to their power and customizable nature.
There’s a lot of great JavaScript IDEs. VS Code seems to be the most popular frontend IDE, and also has many plugins. However, none of these modern IDEs compare to the speed of Vim. I used VS Code for a while, and it had some nice features, but it just seemed slow compared to Vim. And there really wasn’t much that I can do in VS Code that I am unable to do in Vim.
My JavaScript .Vimrc File
The main customization and configuration of Vim lives in a ~/.vimrc file. Mine looks like this:
" for opening files
map <silent> <F3> :NERDTreeToggle<CR>
map <silent> <F2> :Files<CR>
map <silent> <F4> :syntax sync fromstart<CR>
imap cll console.log()<Esc>==f(a
set expandtab
" show existing tab with 2 spaces width
set tabstop=2
set softtabstop=2
" when indenting with '>', use 2 spaces width
set shiftwidth=2
autocmd Filetype go setlocal noexpandtab
:set cursorcolumn
:set cursorline
:set ignorecase
:set smartcase
set incsearch
set statusline="%f%m%r%h%w [%Y] [0x%02.2B]%< %F%=%4v,%4l %3p%% of %L"
set laststatus=2
set number
color desert
" set mouse=a
let g:fzf_layout = { 'down': '~60%' }
" autocmd vimenter * NERDTree
let g:ackprg = 'ag --nogroup --nocolor --column'
let g:ale_fixers = {'vue': ['remove_trailing_lines', 'trim_whitespace']}
let g:ale_fix_on_save = 1
let g:ale_linter_aliases = {'vue': ['javascript', 'html', 'scss']}
call plug#begin('~/.vim/plugged')
Plug 'posva/vim-vue'
Plug 'junegunn/fzf', { 'dir': '~/.fzf', 'do': './install --all' }
Plug 'junegunn/fzf.vim'
Plug 'mileszs/ack.vim'
Plug 'scrooloose/nerdtree'
Plug 'w0rp/ale'
" be sure to read full install instructions. this still needs
" you to cd ~/.vim/plugged/YouCompleteMe
" python ./install.py --js-completer
Plug 'Valloric/YouCompleteMe'
Plug 'ap/vim-css-color'
Plug 'leafgarland/typescript-vim'
call plug#end()
JavaScript Vim Shortcuts
First I define shortcuts:
map <silent> <F3> :NERDTreeToggle<CR>
map <silent> <F2> :Files<CR>
map <silent> <F4> :syntax sync fromstart<CR>
imap cll console.log()<Esc>==f(a
The first three lines allow me to use my F2-F4 keys to quickly run commands. Vim uses a lot of keyboard shortcuts and I don’t want to override any of the default key bindings so I use the F# keys for these commands.
NerdTree is a plugin for navigating the file system. I actually almost never use NerdTree because my F2 binding allows me to use fzf for fuzzy file searching. It brings up a prompt and I start typing a file name, and it recursively searches the current directory for any matches. I don’t ever have to think about where a file lives or bother moving around directories.
The F4 key binding just re-colors the file I am working with. There are times when working with large Vue.js files where Vim’s syntax highlighting turns off or takes a few seconds to turn back on. This is due to an optimization in the syntax highlighting, but it’s nice to be able to manually quickly turn syntax highlighting back on.
The last line is a bit complex. This says that when I am in ‘input’ mode and typing text if I type ‘cll’ then Vim automatically inserts ‘console.log()’ and places my cursor within the brackets. I find myself typing console.log all the time when debugging, so this is a huge help. I actually keep meaning to add more of these imap shortcuts into my .vimrc. It took me a few days to get used to typing ‘cll’ instead of ‘console.log()’, but now it just comes naturally to me.
Setting Vim Tab Indentation
set expandtab
" show existing tab with 2 spaces width
set tabstop=2
set softtabstop=2
" when indenting with '>', use 2 spaces width
set shiftwidth=2
autocmd Filetype go setlocal noexpandtab
I use two spaces for tabs, so these lines set tabs to be two spaces wide.
The only time I don’t use two space tabs is when working on Go files. The last line checks to see if a file is a Go file, and if it is, it turns off my default two space tabs. This is great when working with different lint styles for different file types.
JavaScript Vim Plugins
Lets move on to the plugins I use to help me speed up my JavaScript development.
Note that I use Plug to install and manage these plugins. It is lightweight and powerful. You can see where all the plugins live because the directory path after the word Plug in my vimrc is the github directory where the plugin can be found.
I also work with Vue.js a lot, so some of my settings are specifically meant to optimize Vue files, specifically single file templates.
posva/vim-vue
is a great Vue.js syntax highlighter. It allows Vim to correctly highlight single file components. The HTML, JavaScript and CSS all get the correct syntax.
junegunn/fzf
is a fuzzy file finder. This is the reason I rarely use NerdTree. It allows me to quickly search for files without perfectly knowing the file name or location.
mileszs/ack.vim
allows me to run Ag. This is a fuzzy searcher for lines rather than filenames. It’s faster than any other multi-file line searching I have seen in any other IDE. My setup is to type ‘:Ag’ in Vim to get the search prompt. From there I start typing a variable name or value and I almost instantly get a result of all the lines in all the files that contain a match to my inpute. The search is done recursivly on the current directory. This is the fastest way to find text in multiple files.
w0rp/ale
lints my code as I type. The best thing about it is it automatically detects ESlint files in the parent directory and uses those to lint the code. So if I have my ESlint file set to allow only single quote text, I get a lint warning if I try to use a double quote in my JavaScript. This plugin works great with my Vue plugins to only warn me about the JavaScript in my single file components, and not to try to lint my HTML or CSS using JavaScript rules.
Valloric/YouCompeteMe
As mentioned before, my Vim autocomplete is faster and more intuitive than the autocomplete features I saw in VS Code. This is the plugin that makes the autocomplete magic happen. Because of this plugin I rarely mistype variable names, instead I start to type a variable and then am able to quickly press ‘tab’ to complete the name.
ap/vim-css-color
is simple and great for anyone who ever works with CSS. Whenever it detects a CSS color, it changes the background of that text to match the CSS color.
leafgarland/typescript-vim
is a TypeScript syntax plugin.
A couple of these plugins take a little bit of time to setup, but in the end they are well worth the effort. Like I said, I have tried VS Code and other modern IDEs, but I keep coming back to Vim for by JavaScript. It’s the fastest IDE I have experienced