Neovim and Tmux for JavaScript Development

Published

September 2, 2021

Reading time
13 min read

Quick Tour Using Neovim and Tmux

The following is a quick 2 minute tour using Neovim and Tmux to navigate around multiple projects and files. I show off a few handy Neovim plugins that I regularly use along with native LSP features that I've installed for JavaScript and TypeScript development.

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.

frontend masters vim course

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!

most loved collab 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.

Setting Up Neovim for JavaScript

Installing Neovim

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

NOTE: My <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

LSP Hover Docs

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 tsserver.

  • 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.
Common Commands

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

File Management

Neovim Telescope Plugin

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 fzf to override the file sorter
  • nvim-tree.lua - A file explorer for Neovim written in Lua
Common Commands

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 nvim-tree.lua)

NOTE: The above are custom remaps. You can take a peek at my init.vim from my dotfiles repo.

Status Line

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.

Syntax Highlightning

I use 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 styled-components and mdx.

  • 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-treesitter currently doesn't JSX indenting very well, so I use this plugin to help fill that gap.

Tim Pope Plugins

Tim Pope (@tpope) has a vast amount of helpful and vim plugins that he has developed over the years. Here are a few that I use.

  • 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 shiftwidth and expandtab based on the current file's settings or files of the same type.

Misc Plugins

Neovim Dashboard Plugin

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 <C-u>, C-d>, <C-b>, <C-f>, <C-e>, zt, zz, and zb
  • 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 vim.highlight.on_yank!

Theme

I primarily use the Dracula theme because it's available for both vim and tmux and I like the consistency and the color choices.

Vim Learning Resources

There are some great free learning materials online for vim. A few videos that I really enjoyed are listed below:

on his blog!

Helpful Vim Cheatsheets

I've seen numverous Vim cheatsheets, but the following are a list that I found to be helpful.

Social Resources

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!

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.

Installing Tmux

brew install tmux

NOTE: My tmux prefix is mapped to the <ctrl><space> (more accurately set -g prefix C-Space)

Common Tmux Commands

Tmux switching windows

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.conf from 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.

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 tpm.

The preferred way to install the tpm is by cloning the repo onto your machine into the hidden .tmux folder.

git clone https://github.com/tmux-plugins/tpm ~/.tmux/plugins/tpm

Tmux Plugins

tmux dracula

In addition to the dracula theme providing style and colors, it also provides several plugins to show battery, cpu-usage, gpu-usage, ram-usage, network, network-bandwith, weather, and 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 Plugin

  • vim-tmux-navigator - This vim plugin works in conjunction with the vim-tmux-navigator tmux plugin listed above.

Additional Learning Resources

Helpful Bash Program

Instead of manually creating tmux sessions, renaming them, setting up custom windows, etc... I took the tat bash program developed by thoughtbot and made my own tweaks.

When 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 neovim and tmux together.

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.

My Dotfiles

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!

Share on TwitterDiscuss on TwitterFollow @elijahmanor
Web Mentions
0
0

Tweet about this post and have it show up here!