How to Set Up Your MacBook for Web Development in 2020

A guide to getting your Mac ready for web development — recommending tools, shortcuts, tips and tricks, and more

Photo by Domenico Loia on Unsplash

Click here to check out the 2021 version of this post.

I recently switched jobs, and during the first few days on the new job, I had to setup a MacBook with all the tools required for me to do my job, web development. Although, I’ve used Macs for a long time, at my previous job I was developing on a PC with Windows 10. It was surprisingly pleasant and productive once I got WSL up and running, but I’m really glad to have a Mac as my primary workstation once again.

Every now and then, I look for guides like this one to see what tools people are using and to get productivity tips. And almost always I learn about something new that makes my life as a developer easier. I’ve kept notes of all the things I installed and configured during the first weeks on the new job hoping it’d be useful to other developers.

Table of Contents

· macOS Settings
  ∘ System preferences
  ∘ Finder
  ∘ Screenshot
· macOS Shortcuts
· Command-line Tools
  ∘ Homebrew
  ∘ iTerm2
  ∘ Git
  ∘ Zsh
  ∘ Oh My Zsh
  ∘ Node.js
  ∘ Docker
  ∘ tldr
  ∘ htop
  ∘ fzf
  ∘ ripgrep
  ∘ path-extractor
  ∘ lnav
· MacOS Applications
  ∘ Visual Studio Code
  ∘ Rectangle
  ∘ GIMP
  ∘ LICEcap
  ∘ Alfred
  ∘ Numi
· Tips and Tricks

macOS Settings

Let’s start with a few changes you can make to macOS and the built-in apps.

System preferences

Keyboard
Keyboard > T️️ouch Bar Shows: F1, F2, etc. Keys
Keyboard> Press Fn key to: Show Control Strip

These two settings are about the touch bar. As a developer, I find myself using the F keys more often (a lot of shortcuts rely on them) than the other options — thus I prefer to have them be the default.

Dock
️️☑️ Automatically hide and show the Dock

More often than not, I use Spotlight (⌘ Space) or the terminal to launch applications instead of the dock — it’s hard to justify…