Setting Up a New Macbook for Web Development

I’ve just started using a MacBook Pro as my main development machine at work. As this is the first time I’ve used a Mac for web development, I’m documenting all the settings, installs, tips and tricks on how to get up and running with an awesome development machine.


Before you install anything, it’s best to install all your apps through Homebrew which is a package manager for macOS. This makes updating much easier.

To install run the following in your terminal:

/usr/bin/ruby -e "$(curl -fsSL"

To update all your apps installed by Homebrew, run brew update followed by brew upgrade.

Now that we’ve got brew installed let’s start installing apps.


First let’s replace the default terminal. ITerm2 is probably the most widely used and most recommended. I’ve also heard good things about Hyper but I’ve also heard it can be heavy on performance and it’s still missing a few features. It’s definitely one to look out for in the future though.

brew cask install iterm2

Now that we’ve got ITerm2 installed let’s set it up.

sh -c "$(curl -fsSL"
git clone ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-autosuggestions

Add to zshrc plugins - plugins=(zsh-autosuggestions)

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

Add to zshrc plugins - plugins=(zsh-syntax-highlighting)

Here is my current .zshrc with aliases etc.

There is an enourmous amount of customising that you can do with ITerm2, here are a few links I’ve found useful.

Terminal Themes

I’m currently using Wes Bos’ Cobalt2 theme which is great.

If you’re keen to install it you’ll need to do these 2 steps first.

A few of my own tweaks that i prefer

  • Profile>text>cursor: Set to underline
  • I like to set up my view as 4 windows in a grid.
  • To make sure it stays this way when you open it each time, you need to save it as the Default workspace by going to Window>Save window arrangement and saving it as Default. Then in preferences: General>Startup: In the dropdown select Open Default Window Arrangement.

Visual Studio Code

Easily the best text editor right now. Updates every month. Heaps of great extensions. I have another blog post on how I’ve got it all set up.

brew cask install visual-studio-code


brew install git

Here is my current .gitconfig with aliases etc.

Some resources around setting up your own .gitconfig:


brew install node

NVM (Node version manager)

curl -o- | bash

After installing NVM, also run the following script. The script clones the nvm repository to ~/.nvm and adds the source line to your profile (~/.bash_profile, ~/.zshrc, ~/.profile, or ~/.bashrc).

export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/" ] && \. "$NVM_DIR/" # This loads nvm


Use the trash command instead of rm to send things to the trash.

npm install --global trash-cli


Tree allows you to pretty print a directory in the console.

npm install -g tree-cli

Use Wes Bos’ tree function in your .zshrc

AWS Command Line Interface

brew install awscli


brew cask install docker

Install instructions


Mac Utilities


Productivity app for hotkeys, keywords, text expanding and more.

brew cask install alfred


Provided by work so I can run a Windows VM, we have a few .NET codebases that require maintenance.


Simple tool that prevents your Mac from going to sleep, good for long installs or presentations.


Allows you to use hotkeys to control windows. Similar to the built in functionality in Windows.


Makes the color of your computer’s display adapt to the time of day, warm at night and like sunlight during the day.


Add emojis just like in Slack.


Create gifs from your screen.

brew cask install kap


Download YouTube videos using the command line.

brew install youtube-dl


Shows you the shortcuts available for the current app you’re using just by holding down ⌘.

brew cask install cheatsheet


Note taking app that I’ve just started using, kind of like Trello and Evernote combined.

brew cask install notion


Great markdown editor, I mostly use this for draft blog posts. Offline only.


Command-line system information tool.

brew install neofetchcreenfetch

Firefox Developer Edition

brew cask install firefox-developer-edition


Static site generator. It’s what this blog is using.

brew install hugo

Git Kraken

git gui client.

brew cask install gitkraken


Use the Apple tv screensaver on your mac.

brew cask install aerial

General Mac Settings

Enable tabbing through dialog windows - Source: Wes Bos
  • In Keyboard > Shortcuts: Select All controls under Full Keyboard Access.
Mission Control
  • Untick Automatically rearrange Spaces based on most recent use. This prevents your workspaces from jumping around. This really annoyed me until I realised it was doing this.
Hot corners
  • I’ve got this setup to show mission control on all my corners as most of the other options don’t really do it anything for me. This also makes it easy to access mission control when I’m using an external mouse.
  • Tick all the boxes here.
  • Move Key Repeat and Delay Until Repeat all the way to the right.
  • Touch Bar Show F1, F2 etc. Keys.
  • Press Fn key to Expand Control Strip.
  • In customise control strip replace Siri with Screen lock
Mouse & Trackpad
  • Tick all the things
  • Tick Show volume in menu bar
  • Open Finder, in the top bar go to Finder>Preferences.
  • Under General, New finder windows show: Home directory.
  • Under Sidebar, tick all folders you want to see by default.
  • Under Advanced, tick Show all filename extensions.
  • In the top bar go to View, and show all the things.
Show hidden files and folders:
defaults write AppleShowAllFiles -bool true
killall Finder

To hide them again:

defaults write AppleShowAllFiles -bool false
killall Finder

1096 Words

2018-10-12 00:38 +0000