Setting up iTerm2, ZSH, and VS Code for optimal performance and aesthetic

Ahad Sheriff

Jul 10, 2019·4 min read

As a developer you spend a ton of time on your computer, you deserve the best experience possible. In this tutorial, I am going to show you how to improve your current setup with tools and themes to make development more fun.

Install iTerm2

iTerm2 provides the best terminal experience on Mac by far. While the built-in Mac OS terminal gets the job done, iTerm2 gives you some really great functionality and impressive 3rd party plugins. If you’re going to be spending a lot of time in a terminal you’re going to want all the little thing this app provides. Please just do yourself a favor and download iTerm2.

Set the iTerm2 tab theme to Dark

Preferences > Appearance > Tabs > Theme > Dark

Install ZSH

What is ZSH

If you’re a developer, you’re probably familiar with using Bash (sh) to run commands in the terminal. ZSH is just an extended version of Bash that uses nearly the same commands while providing modern features and support for plugins and themes. ZSH is so powerful that Apple is actually making it the default shell in the newest version of MacOS!

How to install ZSH

If you have Homebrew installed, getting ZSH is as easy as running

brew install zsh

Oh-My-ZSH

You’re then going to want to install Oh-My-ZSH, a popular plugin framework for ZSH which is going to make installing additional features super easy. Get it by running the following command:

sh -c “$(curl -fsSL https://raw.githubusercontent.com/robbyrussell/oh-my-zsh/master/tools/install.sh)”

Fonts, Colors, and Plugins

Fira Code is a modern font that looks great when writing code or working in the terminal. Get it here.

Set Font

In iTerm2: Preferences > Profiles > Text

• Change the font to 14pt Fira code regular and check the box to Use Ligatures
• Change Non-ASCIIfont to 14pt Fira mono and check the box to Use Ligatures

Download Color Theme

Snazzy is my personal favorite color theme. Download and install Snazzy by going to: Preferences > Profiles > Color Presets > Snazzy

Install Pure Prompt

Pure is a beautiful and minimalist ZSH prompt.

Download it through npmby running the following command:

npm install —global pure-prompt

Next, use your preferred text editor (such as Vim) to open the zsh configuration file at ~/.zshrc. In the configuration file, right after the line source $ZSH/oh-my-zsh.sh, add the following commands:

# .zshrc
ZSH_THEME=""npm install --global pure-prompt# oh-my-zsh overrides the prompt, so Pure must be activated after `source $ZSH/oh-my-zsh.sh`
# .zshrc
autoload -U promptinit; promptinit
prompt pure

Now save and close the config file.

Syntax Highlighting

Install the zsh-syntax-highlighting oh-my-zsh plugin:

git clone https://github.com/zsh-users/zsh-syntax-highlighting.git ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-syntax-highlighting

Autosuggestions

Install the zsh-autosuggestions oh-my-zsh plugin:

git clone https://github.com/zsh-users/zsh-autosuggestions $ZSH_CUSTOM/plugins/zsh-autosuggestions

Trash Plugin

Install the trash command as a safer alternative to rm so that you move unwanted files to trash instead of deleting permanently:

npm install — global trash-cli

Update the Plugins List

Now that you have all your fancy plugins installed, update the list in ~/.zshrcto put them all to work:

# .zshrc
plugins=(
  git
  brew
  common-aliases
  node
  npm
  rand-quote
  sudo
  yarn
  z
  colored-man-pages
  colorize
  cp
  zsh-syntax-highlighting
  zsh-autosuggestions
)

Visual Studio Code

VS Code is by far the best text editor I have ever used. Lightweight, powerful, tons of 3rd-party plugins, features, and themes to customize your editor the way you want. Download it here.

Theme

Remember the Snazzy theme we downloaded for iTerm2? You can get the same theme for VS Code for a consistent design across your terminal and IDE. Just search for Snazzy Operator in the VS Code extensions marketplace. Also, download Material Icon Theme to make your files look more exciting.

Settings

The coolest thing about VS Code is the number of customization options you have. For example, I like bigger text when I code, prefer code wrapping by default and set tabs as 4 spaces. You can easily configure the text editor exactly the way you want. For reference, here is my settings file:

{
    "editor.fontFamily": "Fira Code",
    "extensions.ignoreRecommendations": true,
    "editor.minimap.enabled": false,
    "editor.renderWhitespace": "all",
    "workbench.sideBar.location": "left",
    "workbench.statusBar.visible": true,
    "editor.fontLigatures": true,
    "files.autoSave": "onFocusChange",
    "editor.cursorSmoothCaretAnimation": true,
    "editor.fontSize": 14,
    "editor.formatOnPaste": true,
    "python.pythonPath": "/usr/local/bin/python3",
    "workbench.colorTheme": "Snazzy Operator",
    "workbench.iconTheme": "material-icon-theme"
}

Thanks for reading! If you liked this tutorial and want more content like this, be sure to smash that follow button. ❤️

Also be sure to check out my website, Twitter, LinkedIn, and Github.