Shell Optimizations for JavaScript Projects

zsh-with-zplug-and-spaceship-theme

I recently moved to a new MacBook Pro at work and I decided to start with a fresh Mac OS install and development environment. I’ve been a diehard Zshell user for years and looked for a different method of extending it’s capabilities than my go to Oh-My-Zsh framework. After some searching I decided to give Zplug a try which offers compatibility with Oh-My-Zsh and other plugin ecosystems.

When working on JavaScript projects it has become standard practice to leverage nvm to manage multiple node installations and Z shell makes it easy to automatically switch between node versions automatically.

I’m using Hyper but this configuration will work with Terminal or iTerm all the same.

I installed zplug with homebrew, and added the following to my ~/.zshrc configuration file:

export ZPLUG_HOME=/usr/local/opt/zplug
source $ZPLUG_HOME/init.zsh

Installing plugins is also quite easy, just add the following for nvm support and some helpful git aliases from oh-my-zsh.

zplug "lukechilds/zsh-nvm"
zplug "plugins/git", from:oh-my-zsh

In order to automatically switch node versions when an .nvmrc file is detected, just add the following near the end of your config:

autoload -U add-zsh-hook
load-nvmrc() {
  local node_version="$(nvm version)"
  local nvmrc_path="$(nvm_find_nvmrc)"

  if [ -n "$nvmrc_path" ]; then
    local nvmrc_node_version=$(nvm version "$(cat "${nvmrc_path}")")

    if [ "$nvmrc_node_version" = "N/A" ]; then
      nvm install
    elif [ "$nvmrc_node_version" != "$node_version" ]; then
      nvm use
    fi
  elif [ "$node_version" != "$(nvm version default)" ]; then
    echo "Reverting to nvm default version"
    nvm use default
  fi
}
add-zsh-hook chpwd load-nvmrc
load-nvmrc

Using themes with Zplug is quite easy as well and can load them directly from GitHub or Oh-My-Zsh I’ve been using the spaceship theme for awhile now and it’s very helpful. Spaceship displays your git branch, node version, and package version out of the box.

Add the following to your configuration which will load the theme from GitHub:

zplug "denysdovhan/spaceship-zsh-theme", use:spaceship.zsh, from:github, as:theme

The GitHub repository for this theme documents all of the available options. I’ve made the following tweaks to my prompt:

# Prompt Order
SPACESHIP_PROMPT_ORDER=(
  time
  user
  host
  dir
  git
  node
  ruby
  package
  exec_time
  line_sep
  char
)

# Prompt
SPACESHIP_PROMPT_SYMBOL="$"

# Package
SPACESHIP_PACKAGE_SHOW=true
SPACESHIP_PACKAGE_PREFIX=""
SPACESHIP_PACKAGE_SYMBOL="🚀"
SPACESHIP_PACKAGE_COLOR="red"

zplug load

zsh-spaceship-theme-preview

There is a known issue when using emoji characters inline which will add extra space around the cursor in certain shells, specifically Hyper. If you break the prompt onto a new line this won’t be an issue.

I’m still a huge fan of the Oh-My-Zsh plugin ecosystem and I think it works well in tandem with Zplug, you should check it out!