Everything I use on a Mac for fullstack web development.

New Mac setup

Everything I use on a Mac for fullstack web development.


Inspired by swyx.

OS Settings

  • Disable Spotlight search for all miscellaneous crap except apps and system preferences.
  • Fix trackpad direction: Trackpad -> Scroll & Zoom - Natural off.
  • Disable dictionary lookup: Trackpad -> Point & Click -> Look up & data detectors off.
  • Remap Cmd+Q.
  • Show path bar in Finder footer for easier navigation.
  • Show dotfiles in Finder (Cmd + Shift + .(dot) in a Finder window)

Homebrew installs

Install Homebrew:

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

Copy the text below into a Brewfile, then run `brew bundle` to install.

cask_args appdir: "/Applications"
tap "homebrew/bundle"
tap "homebrew/cask"
tap "homebrew/core"
brew "fnm"
brew "git"
brew "node"
brew "gdal"
brew "z"
brew "python"
brew "imagemagick"
brew "ffmpeg"
brew "imageoptim-cli"
brew "vips"
cask "google-drive"
cask "brave-browser"
cask "microsoft-excel"
cask "google-earth-pro"
cask "visual-studio-code"
cask "adobe-creative-cloud"
cask "imageoptim"
cask "bitwarden"
cask "rocket"
cask "github"
cask "licecap"
cask "spotify"
cask "figma"
cask "whatsapp"

Other Applications

  • Logi Options (for Logitech MX Master 3 mouse)
  • ImageOptim for a suite of image optimisation tools with decent UI.

VS Code extensions

  • PrettierFile > Preferences > Settings > "Default formatter" > "esbenp.prettier-vscode"
  • Enable bracket pair colorization in settings
  • Wattenberger's footsteps
  • auto-rename-tag
  • auto-close-tag
  • Add keyboard shortcuts for wrapping in html tags. Add to keybindings.json:

        {
          "key": "cmd+i",
          "command": "editor.action.insertSnippet",
          "when": "editorTextFocus",
          "args": {
            "snippet": "$TM_SELECTED_TEXT$0"
          }
        }
    

Browser extensions

Final checks

  • Ensure Google Drive client is syncing locally
  • Sync phone