Setting up Your MacBook for Web Development in 2020

Vinicius De Antoni
Mar 26 · 13 min read

A comprehensive guide on how to have your MacBook ready for web development with recommendation of tools, shortcuts, tips and tricks and more!

Photo by Domenico Loia on Unsplash

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 PC with Windows 10. It was surprisingly pleasant and productive once I got WSL up and running, but I am 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, productivity tips, etc. 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 would be useful to other developers.


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 I 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 dedicating such display real estate to it. Besides, you can easily access it by moving your mouse to the bottom of the screen or by pressing ⌃ F3.

Trackpad
Point & Click > ️️☑️ Tap to click

Once you get used to it, it’s way faster to tap instead of clicking.

Accessibility
Pointer Control > Mouse & Trackpad > Trackpad Options… > ️️☑️ Enable dragging

By enabling Trackpad dragging, you will be able to drag files, select text, etc., by double tapping (and holding the second tap).

Finder

Preferences
Preferences > Advanced > ☑️ Show all filename extensions

View Options
View > Show Path Bar
View > Show Status Bar

Show hidden files
Type on terminal:
defaults write com.apple.Finder AppleShowAllFiles true
or, by pressing: ⇧⌘ .

Screenshot

There was a time when capturing screenshots were not very intuitive. You can still memorize those shortcuts if you want, but I recommend using the Screenshot app, just open Spotlight and type Screenshot or press ⇧⌘ 5.

Change where screenshots are saved
Options > Save to


macOS Shortcuts

These are some the mac shortcuts I use the most (I won’t list the very basic ones like ⌘ C, ⌘ V, ⌘ Tab, etc.). For a more comprehensive list, click here.

System wide
Spotlight Search: ⌘ Space
Character Viewer: ⌃⌘ Space (Quickly find emojis and special characters)
Force quit an app: ⌥⌘ Esc
Screenshot: ⇧⌘ 5
Lock screen: ⌃⌘ Q
Show or hide the Dock: ⌃ F3 or ⌥⌘ D
Show all windows: ⌃ Arrow-Up
Show all windows of the front app: ⌃ Arrow-Down
Forward delete: fn delete
Paste without formatting: ⇧⌘ V

Finder
Open the Home folder: ⇧⌘ H
Open the desktop folder. ⇧⌘ D
Open the parent folder: ⌘ Arrow-Up
Go to the previous folder: ⌘ [
Go to the next folder: ⌘ ]
Show or hide hidden files: ⇧⌘ .


Command Line Tools

Now to the fun part. These are the command line related tools I recommend for any web developer.

Homebrew

It’s the package manager, it allows you to install, uninstall and update command line tools and mac applications.

To install it, open the Terminal and run this command:

/bin/bash -c “$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"

During the installation you might be asked to install the Xcode Command Line Tools if you haven’t already. Just follow the instructions on the screen.

To make sure your system is ready to brew, run
brew doctor

You can now search for packages with brew search and install them with brew install (for command line tools) and brew cask install (for macOS applications).

You can list installed packages with brew list and brew cask list.

To update the packages local registry you can run brew update and to upgrade the installed packages to their latest versions brew upgrade.

I recommend running brew doctor every now and then to make sure things are good, and brew cleanup to remove unused files.

iTerm2

It’s a replacement for the Terminal. It offers a lot of features that are really useful, I’ll list my favorite ones below.

To install it, open the Terminal (this is the last time you’ll need it) and run:

brew cask install iterm2

Now, feel free to replace Terminal from the Dock (if you have it) with iTerm2. Or just open Spotlight and type iTerm2.

Hotkey window
You can show or hide the iTerm2 window via a hotkey from anywhere very quickly.

Preferences > Keys > Hotkey > ☑️ Show/hide all windows with a system-wide hotkey

I recommend using ⌘ ` as the hotkey.

Unixyness
Copy on selection, paste on middle click and focus-follow mouse.

Preferences > General > Selection > ☑️ Copy to pasteboard on selection
Preferences > Pointer > General > ☑️ Three-finger tap emulates middle click
Preferences > General > Pointer > ☑️ Focus follows mouse

Disable native full screen
By disabling native full screen, you can quickly make iTerm2 take the whole screen without the usual full screen animation

Preferences > General > Window > ☐ Native full screen windows

Shortcut for full screen: ⌥ Return

Split panes
You can divide up your tabs into multiple panes with separate sessions and quickly switch between them. This works very nicely with focus-follow mouse.

Right Click > Split Pane Vertically
Right Click > Split Pane Horizontally

I recommend creating new Key Bindings for those actions:
Preferences > Keys > Key Binding > +
I use ⌥ v and ⌥ h.

Shell integration
You can enable better integration between your shell and iTerm2.

iTerm2 > Install Shell Integration

Then, add the following to your .zshrc (more details about zsh in the next sections):
source ~/.iterm2_shell_integration.zsh

See the docs for more information.

Profile settings
Feel free to explore these settings and configure your Profile to your liking. I recommend experimenting with background opacity and blur.

git

The most popular version control system. You should install it with Homebrew before continuing:

brew install git

Visual studio code supports Git (and several other VCS via extensions). But if you want to take you git via CLI to the next level I recommend forgit.

If you want better diffs check out delta.

zsh

MacOS’ default shell since Catalina, zsh is built on top of bash and provides a lot of cool features.

First thing I recommend is having Homebrew manage its installation, open iTerm2 and run:
brew install zsh

To update our default shell to be Homebrew’s zsh, we need to edit the shells whitelist:
sudo vim /etc/shells (If you are not comfortable with vim you can use TextEdit instead by running sudo open /etc/shells)

Add a new line with /usr/local/bin/zsh, save and close.

To change the default shell, run:
chsh -s /usr/local/bin/zsh.

Restart the terminal, and confirm we are on the correct zsh by running:
echo $SHELL, you should see /usr/local/bin/zsh.

Now we have access to many features, my favorites are:

Tab completion
gre<TAB>, as soon as you press Tab right after gre zsh will show you all the available commands that start with gre, if you press Tab again you will be able to navigate between the options by pressing Tab or the Left and Right arrows, confirm the command you want by pressing Space or Return.

cd <TAB>, zsh also completes file and folder names. And, it is smart enough if you type just a substring:
cd ~/w/p/s<TAB> expands to cd ~/workspace/project/src

Globbing (aka Filename Generation)
List only folders in the current directory:
ls *(/)

List only folders in the current directory and its subdirectories:
ls **/*(/)

Remove all .DS_Store files recursively:
rm -rf **/.DS_Store (if you want to be sure which files will be deleted you can press Tab before running the command and zsh will expand the pattern)

There are lots of qualifiers you can use to target files with specific attributes. You can enable the more complex ones by running setopt extended_glob.

Here’s one command to recursively match all normal files which have no uppercase characters or numbers in the name, which are executable for the owner who must have the UID 1002 but not for the rest of the world, have a file size above 30MB and have been modified within the last month:
ls -l **/([^A-Z[:digit:]])##(#q.x^X^u1002Lm+30mM-1)

Credits to Janek Bevendorff

You can find other useful tips here.

oh-my-zsh

Regardless of its odd name, oh-my-zsh it’s a community-driven framework for managing your Zsh configuration. It provides hundreds of plugins and themes, and makes configuring zsh a breeze.

To install oh my zsh, run:

sh -c “$(curl -fsSL https://raw.github.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"

We can configure zsh by running:
vim ~/.zshrc or (open ~/.zshrc if you prefer TextEdit over vim). You’ll see a lot of configuration added by oh my zsh that you can play with. If you ever need to reset your .zshrc you can find the template here.

I’ll list my recommendations below, but I highly recommend you browse the available themes and plugins later.

Theme
powerlevel10k is my theme of choice, it’s fast, it’s really well integrated with git, supports icons, and a lot more.

It has a really nice wizard that walks you through configuring it the first time you run:

powerlevel10k configuration wizard

I highly recommend enabling Transient Prompt.

To install it with Homebrew, run:

brew install romkatv/powerlevel10k/powerlevel10k

And add the following line to your .zshrc.
source /usr/local/opt/powerlevel10k/powerlevel10k.zsh-theme

It will override any value you have set $ZSH_THEME to.

Restart iTerm2, and you should see the configuration wizard. In the future, you can run it again with p10k configure.

Zsh Plugins

zsh-syntax-highlighting: It enables highlighting of commands whilst they are typed. This helps in reviewing commands before running them, particularly in catching syntax errors.

zsh-syntax-highlighting examples

To install it, run:

brew install zsh-syntax-highlighting

And add the following line to your .zshrc:
source /usr/local/share/zsh-syntax-highlighting/zsh-syntax-highlighting.zsh

zsh-autosuggestions: It suggests commands as you type based on history and completions.

zsh-autosuggestions demo

To install it, run:

brew install zsh-autosuggestions

And add the following line to your .zshrc:
source /usr/local/share/zsh-autosuggestions/zsh-autosuggestions.zsh

zsh-history-substring-search: type in any part of any command from history and then press chosen keys, such as the UP and DOWN arrows, to cycle through matches.

zsh-history-substring-search demo

To install it, run:

brew install zsh-history-substring-search

And add the following line to your .zshrc:
source /usr/local/share/zsh-history-substring-search/zsh-history-substring-search.zsh

If you want to use zsh-syntax-highlighting along with this script, then make sure that you load it before you load this script.

Also, you need to map your arrow keys. Add the following after the source command.

# Map up and down arrow correctly
if [ "${machine}" = "Mac" ] then
UPKEY='\e[A'
DOWNKEY='\e[B'
else
UPKEY="^[OA"
DOWNKEY="^[OB"
fi
bindkey "$UPKEY" history-substring-search-up
bindkey "$DOWNKEY" history-substring-search-down

Oh my zsh Plugins
The following plugins are made available by oh my zsh, like any other plugin found here, to install it, just add its name to the plugins array in your .zshrc file.
For example, to install all the recommended plugins:

plugins=(alias-finder brew common-aliases copydir copyfile docker docker-compose dotenv encode64 extract git jira jsontools node npm npx osx urltools vi-mode vscode web-search z)

alias-finder: This plugin searches the defined aliases and outputs any that match the command inputted. This makes learning new aliases easier.
brew
: The plugin adds several aliases for common brew commands.
common-aliases: This plugin creates helpful shortcut aliases for many commonly used commands.
copydir: Copies the path of your current folder to the system clipboard.
copyfile: Puts the contents of a file in your system clipboard so you can paste it anywhere.
docker: This plugin adds auto-completion for docker.
docker-compose: This plugin provides completion for docker-compose as well as some aliases for frequent docker-compose commands.
dotenv: Automatically load your project ENV variables from .env file when you cd into project root directory.
encode64: Alias plugin for encoding or decoding using base64 command.
extract: This plugin defines a function called extract that extracts the archive file you pass it, and it supports a wide variety of archive file types.
git: provides many aliases and a few useful functions.
jira: CLI support for JIRA interaction
jsontools: Handy command line tools for dealing with json data.
node: This plugin adds node-docs function that opens specific section in Node.js documentation
npm: The npm plugin provides completion as well as adding many useful aliases. npx: This plugin automatically registers npx command-not-found handler if npx exists in your $PATH.
osx: This plugin provides a few utilities to make it more enjoyable on macOS
urltools: This plugin provides two aliases to URL-encode and URL-decode strings.
vi-mode: This plugin increase vi-like zsh functionality.
vscode: This plugin makes interaction between the command line and the VS Code editor easier.
web-search: This plugin adds aliases for searching with Google, Wiki, Bing, YouTube and other popular services.
z: This plugin defines the z command that tracks your most visited directories and allows you to access them with very few keystrokes.

Aliases
Often-used commands can be abbreviated with an alias.
alias tf=”tail -f”, makes it so you can run tf instead of typing tail -f

You can add as many aliases as you want to your .zshrc

Plugins like git and common-alias add a lot of aliases that will make you type less. But it can be hard to learn them all. That’s what the alias-finder plugin is for.

If you want to know what aliases exist for git commit:

alias-finder example

You can also set ZSH_ALIAS_FINDER_AUTOMATIC=”true” in your .zshrc to have it run automatically before each command.

There are three types of aliases:

  • command aliases: just like the tf example above
  • global aliases: which are substituted anywhere on a line. For example, the G alias added by the common-aliases plugin gets replaced by | grep.
    ls G foobar => ls | grep foobar
  • suffix aliases: These are special aliases that are triggered when a file name is passed as the command. For example: alias -s pdf=acroread, invokes acroread when you run file.pdf

Command aliases can also access the original command’s arguments by using the array $:

loop() {
for x in {1..$1}; do $@[2,-1]; done
}

This alias runs a given command X times. For example: loop 10 echo ‘hello’ will print hello 10 times.

Node.js

The JavaScript runtime built on Chrome’s V8 JavaScript engine. It’s the most popular framework for running and building web applications.

To install it, run:
brew install node

If you need to manage multiple applications that need different versions of node, I recommend nodenv.

tldr

A collection of simplified and community-driven man pages.

tldr example

To install it, run:
brew install tldr

tree

Tree is a recursive directory listing program that produces a depth indented listing of files.

To install it, run:
brew install tree

htop

It is similar to top, but allows you to scroll vertically and horizontally, so you can see all the processes running on the system, along with their full command lines.

To install it, run:
brew install htop

fzf

A command-line fuzzy finder.

Check out Alexey Samoshkin’s screencast:

fzf examples

To install it, run these two lines:

brew install fzf
$(brew --prefix)/opt/fzf/install

It works really well with fd and bat.

ripgrep

A line-oriented search tool that recursively searches your current directory for a regex pattern. By default, ripgrep will respect your .gitignore and automatically skip hidden files/directories and binary files

To install it, run:
brew install ripgrep

path-extractor

A command line tool that extracts a list of files/paths from stdin.

To install it, run:
brew install path-extractor


MacOS Applications

These are the macOS applications I recommend.

Visual Studio Code

The best IDE/Editor for web development at the moment (In my opinion, of course). It’s fast with tons of extensions and it’s open source.

These are the extensions I recommend:

Debugger for Chrome
EditorConfig for VS Code
ESLint
Markdown All in One
Material Theme and Material Theme Icons
Node.js Modules Intellisense
npm
npm Intellisense
Partial Diff
Path Intellisense
Prettier — Code formatter
Rocketseat ReactJS
Settings Sync
(The VSCode team announced an official feature for syncing settings, it’s not out yet. You should use this one for now.)
TailwindCSS Intellisense
Visual Studio IntelliCode
XML Tools
YAML

There are lots more, for those of you that use other languages and frameworks (angular, vue, react, ember, ruby, etc.)

To install it, run:
brew cask install visual-studio-code

Rectangle

Move and resize windows in macOS using keyboard shortcuts or snap areas.

I use Rectangle a lot, you should master its shortcuts. The main ones I use are:

Left Half: ⌥⌘ Arrow-Left
Right Half: ⌥⌘ Arrow-Right
Top Half: ⌥⌘ Arrow-Up
Bottom Half: ⌥⌘ Arrow-Down
Center window: ⌥⌘ C
Maximize window: ⌥⌘ F

And if you have multiple displays, you’ll find these very handy:

Next Display: ⌃⌥⌘ Arrow-Right
Previous Display: ⌃⌥⌘ Arrow-Left

To install it, run:
brew cask install rectangle

gimp

A feature rich image editor, and it’s FREE.

To install it, run:
brew cask install gimp

LICEcap

LICEcap can capture an area of your desktop and save it directly to .GIF

To install it, run:
brew cask install licecap

Numi

Beautiful calculator app for Mac

To install it, run:
brew cask install numi


Tips and Tricks

Some useful tips.

  • I recommend creating a dotfiles repo to store your dotfiles (.zshrc, .gitconfig, etc.). Although, it’s not a good idea to use someone else’s dotfiles, feel free to check out mine for reference.
  • You can use npx to run commands from npm packages as if they are installed. For example: npx live-server, will run live-server, a development server with livereload capabilities, on the current folder even if you haven’t installed it previously (npm install -f live-server)
  • If you notice your shell is slow when pasting text into it, you might want to uncomment this line (remove #) in your .zshrc:
    # DISABLE_MAGIC_FUNCTIONS=true
  • You can copy/paste directly from/to your terminal by piping (|) to/from clipcopy and clippaste.

Thanks for reading, I hope you learned something new today.

Let me know what would you change about these recommendations, I’d love to learn something new too!

Take care and I’ll see you next time.

Vinicius De Antoni

Written by

Software Engineer @ Riot Games · vdeantoni.com

More From Medium

Top on Medium

Ed Yong
Mar 25 · 22 min read

17.2K

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade