Over the years I’ve been modifying vim to work slightly better or use cool new features and plugins and I thought its about time to share the vim stack. This post is largely a look into what I use and I guess I am recommending these things too by writing about them; they’re definitely worth a check.
First thing, let’s install a plugin manager. There’s a few out there, but the one I’ve settled on is: vim-plug, seen in the screenshot below.
It’s a relatively straightforward tool, its quick, you can automate installations from .vimrc
, and just install plugins easily. I like to include this in my .vimrc
to automate installation on new machines:
" Automatic installation of vim-plug (https://github.com/junegunn/vim-plug)
if empty(glob('~/.vim/autoload/plug.vim'))
silent !curl -fLo ~/.vim/autoload/plug.vim --create-dirs
\ https://raw.githubusercontent.com/junegunn/vim-plug/master/plug.vim
autocmd VimEnter * PlugInstall --sync | source $MYVIMRC
endif
Alright, now that we got the plug-in manager, let’s see what packages are my favorite, then lastly we’ll install everything.
This one is just a JavaScript
plugin for vim. It provides syntax highlighting and improved indentation.
Copy-pasted this one straight from Github
, they explain it best in four bullets:
JavaScript
features (decorator, private members, numeric separators, optional chaining, etc.)Flow.js
syntaxJSDoc
syntaxAs you can see in the screenshot of my terminal above, with this plug-in we get JSX/TSX syntax highlighting; Supports React which is key. It also supports highlighting closing tags and is super customizable too.
vim-graphql
is the next plug-in to go over. It’s a vim
plug-in that provides GraphQL
file detection, syntax highlighting, and indentation. In the screenshot above you can see how I query Category Pages in GraphQL
.
Perhaps my favorite vim
plug-in of all, it’s fuzzy search, but for vim
. It allows you to use fzf
within vim
.
I remapped it to ;
:
" Map fzf to ;
map ; :Files<CR>
Also, if you install fzf
somewhere not default or with brew
or something:
" Fix for fzf installed from different places
set rtp+=/usr/local/opt/fzf
In my screenshots of vim
, you may have noticed the bottom bar looks custom. That’s lightline. It’s super configurable and lightweight.
The settings I use for lightline:
" colorscheme for lightline
let g:lightline = {
\ 'active': {
\ 'left': [['mode', 'paste' ], ['readonly', 'filename', 'modified']],
\ 'right': [['lineinfo'], ['percent'], ['gitbranch', 'fileformat', 'fileencoding']]
\ },
\ 'component_function': {
\ 'gitbranch': 'gitbranch#name'
\ },
\ 'colorscheme': 'wombat',
\ }
This plugin makes changing and wrapping text in ‘surroundings’. You can use parentheses, brackets, quotes, XML tags, and more. The plugin provides mappings to easily delete, change and add such surroundings in pairs.
An Example
It’s easiest to explain with examples. Press cs"'
inside:
"Hello world!"
to change it to
'Hello world!'
This plug-in will show changes with visual indicators in the sidebar of vim
of a Git
managed directory; Super useful.
So let’s install all these plug-ins (or the ones you like). Paste the following in your .vimrc
:
How my .vimrc
looks:
" Keep Plug commands between plug#begin() and plug#end().
call plug#begin('~/.vim/bundle')
" Plugins
Plug 'pangloss/vim-javascript' " JavaScript support
Plug 'yuezk/vim-js' " JavaScript support
Plug 'maxmellon/vim-jsx-pretty' " JSX support
Plug 'jparise/vim-graphql' " GraphQL support
Plug 'junegunn/fzf', { 'do': { -> fzf#install() } } " fzf support
Plug 'junegunn/fzf.vim' " fzf support
Plug 'itchyny/lightline.vim' " lightline support
Plug 'tpope/vim-surround' " surround support
Plug 'airblade/vim-gitgutter' " gitgutter support
" All of your Plugins must be added before the following line
call plug#end() " required
filetype plugin indent on " required
Reload your .vimrc
, go into vim
and hit :PlugInstall
to install the plugins. And you’re set! If you wanna dive deeper down the rabbit hole, visit the Github.
If you want to further explore what other plug-ins are out there, VimAwesome is a great site for that. Nerd Tree, fugitive.vim, youcompleteme are some popular choices.
Enjoy!