My MacBook Pro Setup for Web Development

7th May 2026 (Updated on 19th Sep 2026)

A cheerful MacBook Pro character confidently lifts a barbell in a bright, airy gym.

The tools, settings, and terminal configuration I use when setting up a new Mac for web development.

Setting Up a New Mac

I’ve been using a Mac for development for years, and I’ve accumulated a fairly specific way of working. There are tools I install on every machine, settings I change immediately, and a few terminal tweaks I’ve been carrying from one Mac to the next.

When I got my MacBook Pro M5, I decided to document the whole process instead of relying on a collection of old notes, Gists, and things I vaguely remembered doing.

This is my setup. It’s not meant to be a universal “best” configuration — it’s just what works for me and the tools I use.

I’ve also included some context around the choices, because six months from now I’ll probably want to know why I configured something a particular way.

macOS Updates

Apply all updates:

Apple icon > System Settings > Software Update — apply everything before touching anything else.

macOS Settings

Appearance

System Settings > Appearance

  • Appearance > Auto
  • Show scroll bars > Always

System Settings > Menu Bar

  • Check Bluetooth

Notifications

System Settings > Notifications

  • Show previews > Never
  • Application notifications > Turn off all

Privacy & Security

System Settings > Privacy & Security

Screen & System Audio Recording for >

  • Google Chrome
  • Zoom
  • TechSmith Capture

Keyboard

System Settings > Keyboard

Text Input > Edit

  • Capitalize words automatically > Off
  • Double quotes > "abc"
  • Single quotes > 'abc'

Trackpad

System Settings > Trackpad

  • Tap to click > Tap with one finger
  • Look up & data detectors > Off
  • Click > Lightest

Finder

Finder > Settings > General >

  • Check Hard disks
  • New Finder windows show > Macintosh HD

Advanced >

  • Show all filename extensions
  • Remove items from the Trash after 30 days

Dock

  • Remove most of the applications from Dock
  • Automatically hide and show the Dock
  • Show suggested and recent apps in Dock > Off
  • Show indicators for open applications > On
  • Click and drag the Applications folder in Finder to the right side of the Dock

Add to Dock:

  • Evernote
  • Google Chrome
  • iTerm (iTerm2)
  • Visual Studio Code

Prevent Power-On When Opening the Lid

This command will disable power-on when opening the lid

sudo nvram BootPreference=%00

Currently there is no way to disable power-on when any key is pressed

Screenshots

I like my screenshots organized and named cleanly. These terminal commands set that up:

Change screenshot destination: This will create a folder called “Screenshots” in your home directory

defaults write com.apple.screencapture location ~/Screenshots

Remove the default filename:

defaults write com.apple.screencapture name ""

Change screenshot format to JPG:

defaults write com.apple.screencapture type jpg

More info: How to change screenshot location on Mac using Terminal

Developer Tools

Install Command Line Tools for Xcode

Open Terminal and run:

xcode-select --install

Install Homebrew

I use Homebrew to install most of the tools and applications on my Mac.

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

Important: Follow the additional instructions printed by the installer to add Homebrew to your PATH. More info: Homebrew Installation

Install core apps in one command:

brew install --cask \
  affinity \
  evernote \
  figma \
  firefox \
  google-chrome \
  iterm2 \
  local \
  rectangle \
  spotify \
  visual-studio-code \
  zoom

Note: Applications can also be installed one-at-a-time using this format:

  brew install --cask rectangle

Other apps to install as needed:

brew install wp-cli
brew install macos-trash
brew install --cask adobe-creative-cloud
brew install --cask discord
brew install --cask slack

Make VS Code Your Git Editor

git config --global core.editor "code --wait"

Node: Install via nvm

I always install Node through nvm rather than globally — it makes switching versions between projects seamless.

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash

Auto-switch Node versions based on .nvmrc — add this to your ~/.zshrc:

autoload -U add-zsh-hook

load-nvmrc() {
  local nvmrc_path
  nvmrc_path="$(nvm_find_nvmrc)"

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

    if [ "$nvmrc_node_version" = "N/A" ]; then
      nvm install
    elif [ "$nvmrc_node_version" != "$(nvm version)" ]; then
      nvm use
    fi
  elif [ -n "$(PWD=$OLDPWD nvm_find_nvmrc)" ] && [ "$(nvm version)" != "$(nvm version default)" ]; then
    echo "Reverting to nvm default version"
    nvm use default
  fi
}

add-zsh-hook chpwd load-nvmrc
load-nvmrc

SSH Key

Follow GitHub’s official guides:

Terminal

I use iTerm2 over the default Terminal for its customization options.

Install iTerm2:

brew install --cask iterm2

Close the default Terminal app and open iTerm from the Applications folder

More info: iTerm2

iTerm2 Settings I change:

  • General > Window: Uncheck Native full screen windows
  • Appearance > Hide scrollbars
  • Appearance > Unselect Show tab bar in fullscreen
  • Appearance > Dim inactive split panes + Dim background windows
  • Profiles > Window: Transparency 0, Style: Normal

Install Oh My Zsh:

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

Cobalt2 Theme

I’ve been using the Cobalt2 GitHub repository. for years. I like the color scheme, and I haven’t found a reason to change it.

  1. Download files from Wes Bos’ GitHub
  2. Drop cobalt2.zsh-theme into ~/.oh-my-zsh/themes/
  3. Open ~/.zshrc and set: ZSH_THEME="cobalt2"
  4. Install Powerline fonts:
git clone https://github.com/powerline/fonts
cd fonts
./install.sh
  1. In iTerm2: Preferences > Profiles > Colors > Color Presets > Import the Cobalt2 file
  2. Preferences > Profiles > Text > Set font to your installed Powerline font

VS Code

brew install --cask visual-studio-code

Settings I configure:

  1. Set spaces over tabs, tab size 2
  2. Enable Format on Save
  3. Enable Word Wrap: bounded at 80 columns
  4. Disable Compact Folders
  5. Enable Wrapped Tabs

My user settings JSON:

{
  "explorer.compactFolders": false,
  "editor.cursorWidth": 2,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "editor.formatOnPaste": true,
  "editor.insertSpaces": true,
  "editor.tabSize": 2,
  "editor.wordWrap": "bounded",
  "editor.wordWrapColumn": 80,
  "prettier.semi": false,
  "svelte.enable-ts-plugin": true,
  "indentRainbow.colors": [
    "rgba(247, 37, 133,0.15)",
    "rgba(181, 23, 158,0.15)",
    "rgba(114, 9, 183, 0.15)",
    "rgba(86, 11, 173,0.15)",
    "rgba(72, 12, 168,0.15)",
    "rgba(58, 12, 163,0.15)",
    "rgba(63, 55, 201,0.15)",
    "rgba(63, 55, 201,0.1)",
    "rgba(63, 55, 201,0.05)",
    "rgba(63, 55, 201,0.025)"
  ],
  "workbench.editorAssociations": {
    "*.svg": "default"
  }
}

VS Code Extensions

Always install:

  1. Astro — Language support for Astro
  2. Auto Rename Tag — Auto rename paired HTML/XML tags
  3. Code Spell Checker — Catches typos in code and comments
  4. Color Highlight — Visualizes color values inline
  5. ESLint — JavaScript linting
  6. GitHub Copilot Chat — AI-assisted coding
  7. Highlight Matching Tag — Makes tag pairs easy to spot
  8. indent-rainbow — Color-coded indentation levels
  9. MDX — Language support for MDX
  10. Prettier — Code formatting (set as default formatter)
  11. Pretty TypeScript Errors — Makes TS errors actually readable
  12. Svelte for VS Code — Svelte language support

Install as needed:

  1. EJS language support
  2. EJS Snippets
  3. ES7+ React/Redux/React-Native snippets
  4. Live Server
  5. Lorem ipsum
  6. Thunder Client — Lightweight REST API client

Other Applications

A few applications I install outside of Homebrew:

  • Amphetamine — App Store (keeps my Mac awake during deploys, presentations, etc.)
  • Dropbox — dropbox.com/install
  • Toggl Desktop — App Store (time tracking)

A Note on Affinity vs. Adobe

I use the Affinity Suite (Designer, Photo, Publisher) as my primary design tools. They’ve never slowed me down, and I reach for Adobe Creative Cloud only when a project specifically requires it. Both are available via Homebrew.

Done

That’s my Mac setup.

There are probably things here that other developers would configure completely differently, and that’s fine. This isn’t a definitive Mac setup guide. It’s a record of the environment I’ve settled on after using these tools for years.

The main benefit of writing it down is that I won’t have to figure it all out again the next time I get a new Mac.

The full Gist is also available if you just want the commands and configuration without the explanations.

Tags:

macos

vscode

terminal

Adam

Adam facts:

Adam's Favorite Emoji is 😬