September 2, 2021
Quick Tour Using Neovim and Tmux
FrontEnd Masters VIM Course
Back in May 2021, I completed the VIM Fundamentals (4 hours, 14 minutes) course on FrontEnd Masters by @ThePrimeagen. The energy and the depth of knowledge of the material were great. This course started my journey to use Neovim as my primary editor for both work and personal use.
What is Neovim?
Neovim started as a fork of Vim v7. Some of the interesting differences in Neovim are its built-in LSP (Language Server Protocol) support and Lua as an embedded language, which is an alternative to Vimscript. There are a lot more features you can check out on their website.
Interestingly enough, Neovim came in #1 in the Stackoverflow 2021 Developer Survey for the Most Loved Collaboration Tool!
Why is Neovim so loved? Well, in a recent podcast of The Changlog - Episode #457 called Why Neovim?, TJ DeVries (@TeejDeVries) discusses with hosts Jerod Santo (@jerodsanto) and Nick Nisi (@nicknisi) about the backstory and reasons why Neovim is pretty cool.
I personally use
brew to install most of my apps, but if you don't use macOS (or prefer another method), there are lots of options to install on the main Neovim wiki.
brew install neovim
<leader>key is mapped to the
<space>key (more accurately
let mapleader = " ")
Helpful Vim Plugins
There are several ways to managed vim plugins, but I've been using vim-plug, and it suites my needs just fine. One feature that I learned about recently is that you can type
D after you
PlugUpdate and it'll show a detailed list of commits that were included in each plugin update.
Language Server Protocol
The LSP is what enables Neovim to have strong integration with your languages of choice. I use the
typescript-language-server, which is an implementation for TypeScript wrapping
- nvim-lspconfig - A collection of common configurations for Neovim's built-in Language Server Protocol
- nvim-compe - Auto-completion plugin for Neovim written in Lua
- lspsaga.nvim - A light-weight LSP plugin based on Neovim's LSP with a highly performant UI (code actions, hover docs, signature help, rename, preview definition, floating terminal, etc...)
- trouble.nvim - A pretty list for showing diagnostics, reference, telescope results, quickfix, and location lists to help you solve all the trouble your code is causing.
There are a lot of commands that you can invoke regarding LSP, but the following are some that I regularly use.
gd- Go to definition
gf- Go to file location
K- Show hover documentation
<leader>ca- Launch code actions
If I'm familiar with a code-base then a fuzzy file finder is great, but sometimes I like having a file-tree plugin to understand how files and folders relate to each-other. In addition, telescope provides may other ways to navigate (global grep, git status, etc...).
- telescope.nvim - A highly extendable fuzzy finder over lists. This can find files, live grep, manage buffers, search through git files, a file browser, change themes, and a lot more!
- telescope-fzf-native.nvim - A telescope extension that uses
fzfto override the file sorter
- nvim-tree.lua - A file explorer for Neovim written in Lua
There are many more built-in lists available in telescope (and others you can add via plugs or by yourself), but the following are the ones I use regularly.
<leader>ff- telescope find files across project
<leader>fg- telescope live grep across project
<leader>fc- telescope find by git status changed
<leader>fs- telescope navigate file system
<leader>fb- telescope switch between active buffers
<C-n>- toggle file tree (specific to
NOTE: The above are custom remaps. You can take a peek at my
init.vimfrom my dotfiles repo.
These plugins provide some nice style and additional features to Neovim. There are lots of choices to choose from, but these are the ones I've settled on for the time being.
- lualine.nvim - A blazing fast and easy to configure Neovim statusline written in Lua
- nvim-bufferline.lua - A snazzy buffer line for Neovim built using Lua
- nvim-web-devicons - A Lua port of vim-devicons that adds fancy icons to your plugins
nvim-treesitter for most of my sytnax highlighting needs. I do use
vim-jsx-pretty to fill in some behavior gaps when using JSX, but that's about it. Two areas that I am lacking are support for
- nvim-treesitter - Provide both a simple and easy way to use tree-sitter in Neovim. This provides basic functionality such as highlighting.
- vim-jsx-pretty -
nvim-treesittercurrently doesn't JSX indenting very well, so I use this plugin to help fill that gap.
Tim Pope Plugins
- vim-unimpaired - A handy plugin to provide a suite of mapping pairs for many common actions (navigating buffers, quicklist, and lots more).
- vim-surround - A nice plugin to surround text (with parens, brackets, quotes, tags, etc...) or to replace or delete those delimeters.
- vim-commentary - Easily comment or uncomment code a line of code or the target of a motion.
- vim-repeat - This plugin enables other plugins to use the
.command to repeat the last command.
- vim-sleuth - This plugin automatically adjusts
expandtabbased on the current file's settings or files of the same type.
The above picture shows the dashboard-nvim plugin. It's a friendlier splash-screen verses the one that comes native with Neovim. I've listed several other plugins that I find useful as well.
- dashboard-nvim - A start dashboard for vim with a list of common commands
- gitsigns.nvim - Super fast git decorations shown in the gutter implemented by Lua
- neoscroll.nvim - A smooth scrolling Neovim plugin written in Lua. Scrolling shows up for
- nvim-colorizer.lua - A high-performance color highlighter for Neovim written in Lua
- nvim-autopairs - A powerful autopairs plugin for Neovim
vim-highlightedyank - Briefly highlight the yanged region
NOTE: jdhao (@flying_unclecat) reached out to me on Twitter and let me know that I no longer need the vim-highlightedyank plugin listed above. Neovim can now support that same behavior with
I primarily use the Dracula theme because it's available for both vim and tmux and I like the consistency and the color choices.
- dracula - A dark theme for Vim.
Vim Learning Resources
There are some great free learning materials online for
vim. A few videos that I really enjoyed are listed below:
- Onramp to Vim taught by Ben Orenstein (@r00k) and Chris Toomey (@christoomey) and provided by @thoughtbot
- Dive into Neovim taught by Drew Neil and provided by @thoughtbot
- Vimcasts taught by Drew Neil (@nelstrom)
- Mastering the Vim Language taught by Chris Toomey (@christoomey)
- Learning Vim in a Week taught by Mike Coutermarsh
- How to Do 90% of What Plugins Do (With Just Vim) taught by Max Cantor
- Exploring Vim Series and 5 Minutes Vim Series written by Jaime González García (@Vintharas)
on his blog!
Helpful Vim Cheatsheets
I've seen numverous Vim cheatsheets, but the following are a list that I found to be helpful.
- Vim cheatsheet by devhints
- Dash Vim cheatsheet by Kapeli maker of Dash
- Vim Cheat Sheet by Richard Torruellas (@richardiii)
- Vim cheatsheet by QuickRef.ME
- A searchable cheatsheet plugin for Neovim from within the editor using Telescope
During my process of learning Vim and Neovim, I've followed the following individuals on Twitter, YouTube, and Twitch. They have been a wealth of knowledge and I continue to learn from them. Thank you!
- Christian Chiarulli (@chrisatmachine) - Author of LunarVim
- TJ DeVries (@TeejDeVries) - Neovim Core Member, Streamer
- Jaime González García (@Vintharas) - Goolge Engineer, Vim enthusiast, and blogger
- Greg Hurrell (@wincent) - Great Vim video series on YouTube
- Drew Neil (@nelstrom) - Author of Vimcasts
- ThePrimeagen (@theprimeagen) - Netflix engineer, Streamer
- Chris Toomey (@christoomey) - Great Vim and Tmux learning resources
Learn from the Terminal
And then there is
vimtutor, I would be remiss if I didn't mention it. You can execute the interactive vim tutor from your terminal and there is a surprising amount of information that you can learn about using vim.
Setting up Tmux for Console Management
I found that using
tmux has been a great compliment to
neovim. I typically have a
tmux session per project I'm working on and I have multiple windows per project. I tend to have at least 4 windows per project; a window with
neovim running, a window to run the server for that project, a window to interact with git, and a scratch window to run miscellaneous terminal commands.
brew install tmux
tmuxprefix is mapped to the
set -g prefix C-Space)
Common Tmux Commands
The above picture shows switching between tmux sessions and windows with
<ctrl><space>w. The following are some common commands that I use when coding.
<ctrl><space>w- list all tmux sessions and windows
<ctrl><space>d- detach from tmux to terminal prompt
<ctrl><space>r- reload tmux from configuration file
tmux kill-session- kill the current tmux session that you are in
tmux kill-server- kill the tmux server (kills all open sessions)
tmux attach-session -t blog- attach to an existing tmux session
tmux ls- list all tmux
<ctrl><space>|- create a new horizontal split
<ctrl><space>-- create a new vertical split
<ctrl><space>?- list help commands
NOTE: You can take a look at my custom
.tmux.conffrom my dotfiles repo.
Helpful Tmux Cheatsheets
The following are some tmux specific cheatsheets that I've found heplful as I navigate tmux and try out numerous features.
- Cheatsheet for tmux by devhints
- Tmux Cheat Sheet & Quick Reference
- Dash Tmux cheatsheet by Kapeli maker of Dash
Helpful Tmux Plugins
Much like you can have plugins for
vim, you can also have plugins for
tmux. The plugin manager that I use is called
The preferred way to install the
tpm is by cloning the repo onto your machine into the hidden
git clone https://github.com/tmux-plugins/tpm ~/.tmux/plugins/tpm
In addition to the dracula theme providing style and colors, it also provides
several plugins to show
time. I typically only set
cpu-usage ram-usage time (as seen in other screenshots), but the above picture
shows some of the other settings.
- tmux-sensible - A sensible set of tmux options that you probably should set
- vim-tmux-navigator - Will allow you to navigate seamlessly between vim and tmux splits using a consistent set of hotkeys.
- tmux-vi-navigation - Simplified shortcuts for tmux navigation
- tmux-fzf-url - A tmux plugin for opening urls from browser quickly without mouse.
- dracula - A dark theme for tmux
- vim-tmux-navigator - This
vimplugin works in conjunction with the
vim-tmux-navigatortmux plugin listed above.
Additional Learning Resources
Helpful Bash Program
tat in invoked it will create a tmux session and name it as the current folder's name. Then it will create a set of defined windows and layouts. I rarely ever manually create sessions or windows because of this program.
Kitty or Alacritty
I starting using iTerm2, but found the redraw speed in the terminal wasn't quite what I wanted when using both Tmux and Neovim exclusively.
Thankfully there are 2 GPU-based terminal emulators you can use to help speed up rendering. I currently have both Kitty and Alacritty installed. Each has its pros and cons, but both are good alternatives for a snappier render. I typically stick with Kitty since it has ligature support.
brew install --cask kitty brew install --cask alacritty
Get a Buddy to Join You
There are many different development teams where I work. I lead a small team of 3 developers in my Front-End fire team. We decided to take on the adventure of using
Being on this journey together has made the experience that much more fun. We regularly share things we are learning and when we are on pairing sessions the following questions or statements are common...
As the driver of a pairing session
- I found an awesome plugin/setting, let me show you!
- Let's try to do that again, but more efficiently.
As the viewer of a pairing session
- Whoa, what did you just do?
- How did you just do that?
- What setting/plugin was that?
- Have you considered trying XYZ?
We will also take time to pause and try to figure out a better way to navigate or make a series of edits to push ourselves to become more efficient.
Feel free to take a look at my dotfiles for how I've currently setup my environment.
Comment and Share
If you found this post helpful, please consider sharing the post on Twitter or joining in on the conversation.
How have you setup your environment? Do you have any special plugins or settings that you'd like to share? If so, I'd love to hear about it!
Tweet about this post and have it show up here!