How I Setup My Mac

How I Setup My Mac

Having spent several years with the MacBook Pro 2015, I recently made the leap to a MacBook Pro 2022. My time with the previous model was nothing short of fantastic, and now, with the upgraded MacBook Pro, I find myself seamlessly navigating my freelance web development projects. My aim is to ensure that my MacOS setup remains current and optimised for web development. Here's what I've acquired in 2024:

MacBook Pro Specification

  • 16-inch
  • Apple M1 Pro mit 10‑Core CPU, 16‑Core GPU und 16‑Core Neural Engine
  • 16 GB RAM
  • 512 GB SSD
  • QWERTY = English (International)
  • macOS Sonoma (formerly Ventura)

System Preferences

  • Appearance
    • Dark Mode
    • Show Scroll Bars -> "Always"
      • Ugly, but better for web development
  • Dock
    • Remove most applications from Dock
    • Automatic Hide
    • Smaller Dock
    • "Show recent applications in Dock" -> off
    • "Show indicators for open applications" -> on
    • Battery -> "Show Percentage"
  • Display
    • Nightshift
  • Security
    • Touch ID
  • Notifications
    • Off, except for Calendar
  • Siri
    • Disabled
  • Trackpad
    • Tap to Click
    • Point & Click -> Look up & data detectors off
    • More Gestures -> Notification Centre off
  • Keyboard
    • Text
      • disable "Capitalise word automatically"
      • disable "Add full stop with double-space"
      • disable "Use smart quotes and dashes"
      • use " for double quotes
      • use ' for single quotes
    • Keyboard -> Mission Control -> disable all
    • Press FN to -> "Do Nothing"
    • Keyboard Shortcuts -> Spotlight -> CMD + Space disable
      • We will be using Raycast instead
  • Mission Control
    • Hot Corners: disable all
  • Finder
    • General
      • New Finder windows show: [Downloads]
      • Show these items on the desktop: disable all
    • Sidebar:
      • activate all Favorites
      • move Library to Favorites
    • Show only:
      • Desktop
      • Downloads
      • Documents
      • [User]
      • Library
    • Tags
      • disable all
    • Advanced
      • Show all Filename Extensions
      • Remove Items from Bin after 30 Days
      • View -> Show Preview (e.g. image files)
  • Sharing
    • "Change computer name"
      • Also terminal:
        • sudo scutil --set ComputerName "newname"
        • sudo scutil --set LocalHostName "newname"
        • sudo scutil --set HostName "newname"
    • "Make sure all file sharing is disabled"
  • Security and Privacy
    • Turn on FileVault
    • Add Browser to "Screen Recording"
  • Storage
    • Remove Garage Band & Sound Library
    • Remove iMovie
  • Trackpad
    • Speed: Max
  • Accessibility
    • Scroll Speed: Max

System Preferences (Terminal)

Override more system preferences from the terminal ...

COMPUTER_NAME="HP-LaserJet-M604"
 
# Set computer name (as done via System Preferences → Sharing)
sudo scutil --set ComputerName "$COMPUTER_NAME"
sudo scutil --set HostName "$COMPUTER_NAME"
sudo scutil --set LocalHostName "$COMPUTER_NAME"
sudo defaults write /Library/Preferences/SystemConfiguration/com.apple.smb.server NetBIOSName -string "$COMPUTER_NAME"
 
# Take screenshots as jpg (usually smaller size) and not png
defaults write com.apple.screencapture type jpg
 
# Do not open previous previewed files (e.g. PDFs) when opening a new one
defaults write com.apple.Preview ApplePersistenceIgnoreState YES
 
# Show Library folder
chflags nohidden ~/Library
 
# Show hidden files
defaults write com.apple.finder AppleShowAllFiles YES
 
# Show path bar
defaults write com.apple.finder ShowPathbar -bool true
 
# Show status bar
defaults write com.apple.finder ShowStatusBar -bool true
 
# Restart Finder
killall Finder;

Homebrew

Install Homebrew (opens in a new tab) as package manager for macOS:

# Paste in terminal and follow the instructions
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

Update everything in Homebrew to recent version:

brew update

Install GUI applications (read more about these in GUI Applications):

brew install --cask \
  1password \
  android-studio \
  arq \
  azure-data-studio \
  bartender \
  cloudflare-warp \
  discord \
  docker \
  firefox \
  font-hack-nerd-font \
  google-chrome \
  insomnia \
  intellij-idea-ce \
  iterm2 \
  maccy \
  microsoft-office \
  notion \
  raycast \
  rectangle \
  signal \
  slack \
  spotify \
  telegram \
  tor-browser \
  transmission \
  typora \
  visual-studio-code \
  vlc \
  whatsapp \
  wireshark \
  yubico-authenticator \
  zoom

Install terminal applications (read more about these in Terminal Applications):

brew install \
  awscli \
  azure-cli \
  commitizen \
  difftastic \
  direnv \
  dive \
  dotnet \
  eza \
  git \
  git-delta \
  go \
  golangci-lint \
  gotestsum \
  gnupg \
  graphicsmagick \
  hashcat \
  helm \
  jenv \
  jq \
  k6 \
  kubectl \
  minikube \
  mkcert \
  ngrok/ngrok/ngrok \
  nmap \
  openssl@3 \
  pnpm \
  podman \
  pyenv \
  redis \
  ripgrep \
  rustup-init \
  starship \
  tfenv \
  tgenv \
  volta \
  wget \
  yarn \
  ykman

GUI Applications

Terminal Applications

iTerm2

iTerm2 (opens in a new tab) is a replacement for Terminal (opens in a new tab)

The look and feel we want to achieve from our terminal:

iTerm2

  • Make iterm2 Default Term
  • Preferences ->
    • General -> Window
      • unselect "Native full screen windows"
      • select "close windows when closing an app"
    • Appearance ->
      • Windows
        • select "Hide scrollbars"
      • Tabs
        • unselect "Show tab bar in fullscreen"
      • Dimming
        • Unselect all dimming
    • Profiles -> Window
      • Transparency: 30
      • Style: Full Screen
      • Screen: Main Screen
    • Profiles -> Advanced
      • Semantic History -> Open with editor ... -> VS Code
    • Open new split pane with current directory
    • Natural Text Editing
  • Bring it to fullscreen Command + Enters

Oh My Zsh

When you open iTerm2, you see that MacOS already comes with zsh as default shell. Install Oh My Zsh for an improved (plugins, themes, ...) terminal (here: iTerm2) experience:

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

Update everything (e.g. plugins) in Oh My Zsh to recent version:

omz update

Important: If you change something in your Zsh configuration (.zshrc), force a reload:

source ~/.zshrc

Oh My Zsh Theme + Fonts:

Install Starship as your new terminal theme. We will use Homebrew, but you can use an alternative from the website too:

brew install starship

Make it the default theme for Oh My ZSH from the terminal:

echo 'eval "$(starship init zsh)"' >> ~/.zshrc

As font we will be using Hack Nerd Font in iTerm2 and VS Code. Install it via:

brew tap homebrew/cask-fonts
brew install --cask font-hack-nerd-font

Use the new font in iTerm2: Preferences -> Profile -> Text -> Font: font-hack-nerd-font.

If the theme and font changes do not apply, reload your zsh configuration (.zshrc) or close/open iTerm2.

Oh My Zsh Plugins

  • zsh-completions
  • zsh-autosuggestions
  • zsh-syntax-highlighting

ZSH Configuration File (.zshrc):

# Path to your oh-my-zsh installation.
export ZSH="$HOME/.oh-my-zsh"
 
# Which plugins would you like to load?
# Standard plugins can be found in $ZSH/plugins/
# Custom plugins may be added to $ZSH_CUSTOM/plugins/
# Example format: plugins=(rails git textmate ruby lighthouse)
# Add wisely, as too many plugins slow down shell startup.
plugins=(
  git
  zsh-completions
  zsh-autosuggestions
  zsh-syntax-highlighting
)
 
# get machine's ip address
alias ip="ipconfig getifaddr en0"
 
# edit global zsh configuration
alias zshconfig="vim ~/.zshrc"
# reload zsh configuration
alias zshsource="source ~/.zshrc"
# reload zsh configuration
alias ohmyzsh="cd ~/.oh-my-zsh"
 
# navigate to global ssh directory
alias sshhome="cd ~/.ssh"
# edit global ssh configuration
alias sshconfig="vim ~/.ssh/config"
 
# edit global git configuration
alias gitconfig="vim ~/.gitconfig"
 
# git aliases
alias gits="git status"
alias gitd="git diff"
alias gitl="git lg"
alias gita="git add ."
alias gitc="cz commit"
 
alias loc="npx sloc --format cli-table --format-option head --exclude 'build|\.svg$\.xml' ./"
 
# load zsh-completions
autoload -U compinit && compinit
 
# use nvm
source /opt/homebrew/opt/nvm/nvm.sh
 
# use starship theme (needs to be at the end)
eval "$(starship init zsh)"

Visual Studio Code

The look and feel we want to achieve from our IDE:

Visual Studio Code

Extensions:

Manual:

  • Move search feature from Activity Bar to Panel

JSON Settings:

{
  "editor.cursorBlinking": "solid",
  "editor.cursorStyle": "block",
  "window.titleBarStyle": "native",
  "window.customTitleBarVisibility": "never",
  "window.title": "${rootName}${separator}${activeEditorShort}",
  "files.trimTrailingWhitespace": true,
  "explorer.confirmDelete": false,
  "explorer.compactFolders": false,
  "workbench.colorTheme": "GitHub Dark Default",
  "workbench.sideBar.location": "right",
  "workbench.startupEditor": "none",
  "workbench.statusBar.visible": true,
  "workbench.editor.enablePreview": false,
  "workbench.editor.restoreViewState": true,
  "terminal.integrated.fontFamily": "Hack Nerd Font Mono",
  "editor.find.addExtraSpaceOnTop": true,
  "editor.padding.top": 36,
  "editor.stickyScroll.enabled": false,
  "editor.fontFamily": "Hack Nerd Font Mono",
  "editor.fontSize": 14,
  "editor.tabSize": 2,
  "editor.lineHeight": 0,
  "editor.insertSpaces": true,
  "editor.detectIndentation": false,
  "editor.renderWhitespace": "none",
  "editor.scrollBeyondLastLine": true,
  "editor.minimap.enabled": false,
  "editor.lineNumbers": "on",
  "editor.find.seedSearchStringFromSelection": "never",
  "breadcrumbs.enabled": false,
  "security.workspace.trust.emptyWindow": false,
	"security.workspace.trust.enabled": false,
	"security.workspace.trust.startupPrompt": "always",
	"security.workspace.trust.banner": "never",
	"extensions.ignoreRecommendations": true,
  "workbench.iconTheme": "vscode-icons",
  "vsicons.dontShowNewVersionMessage": true,
  "redhat.telemetry.enabled": false,
  // line highlight
  "editor.renderLineHighlight": "all",
  "workbench.colorCustomizations": {
    "editor.lineHighlightBackground": "#223851"
  },
  // syntax highlighting
  "files.associations": {
    ".env*": "makefile"
  },
  // prettier
  "prettier.singleQuote": true,
  "prettier.printWidth": 70,
  "editor.formatOnSave": true,
  "[markdown]": {
    "editor.formatOnSave": false
  },
  "[javascript]": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascriptreact]": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescriptreact]": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "prettier.documentSelectors": ["**/*.astro"],
  "[astro]": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  // eslint
  "editor.codeActionsOnSave": {
    "source.fixAll": "explicit",
    "source.fixAll.eslint": "explicit",
    "source.fixAll.tslint": "explicit",
    "source.addMissingImports": "explicit"
  },
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact"
  ],
  "javascript.validate.enable": false,
  "javascript.updateImportsOnFileMove.enabled": "prompt",
  "typescript.updateImportsOnFileMove.enabled": "never",
  "explorer.confirmDragAndDrop": false,
  "js/ts.implicitProjectConfig.checkJs": true,
  "editor.formatOnPaste": true,
  "editor.formatOnType": true,
  "editor.inlineSuggest.enabled": true,
  "mui-snippets.importPaths": "second level",
  "gitlens.advanced.messages": {
    "suppressCommitHasNoPreviousCommitWarning": true
  },
  "github.copilot.enable": {
    "*": true,
    "plaintext": false,
    "markdown": true,
    "scminput": false
  },
  "git.openRepositoryInParentFolders": "never",
  "workbench.activityBar.location": "hidden",
  "typescript.preferences.autoImportFileExcludePatterns": [
    "@radix-ui"
  ],
  "cSpell.enableFiletypes": [
    "!asciidoc",
    "!c",
    "!cpp",
    "!csharp",
    "!css",
    "!elixir",
    "!erlang",
    "!git-commit",
    "!go",
    "!graphql",
    "!handlebars",
    "!haskell",
    "!html",
    "!jade",
    "!java",
    "!javascript",
    "!javascriptreact",
    "!json",
    "!jsonc",
    "!jupyter",
    "!less",
    "!php",
    "!pug",
    "!python",
    "!restructuredtext",
    "!rust",
    "!scala",
    "!scminput",
    "!scss",
    "!swift",
    "!typescript",
    "!typescriptreact",
    "!vue",
    "!yaml",
    "!yml",
    "mdx"
  ]
}

JSON keybindings (keybindings.json):

[
  {
    "key": "ctrl+up",
    "command": "cursorMove",
    "args": {
      "to": "up",
      "by": "line",
      "value": 10
    },
    "when": "editorTextFocus"
  },
  {
    "key": "ctrl+down",
    "command": "cursorMove",
    "args": {
      "to": "down",
      "by": "line",
      "value": 10
    },
    "when": "editorTextFocus"
  }
]

Git

From terminal, set global name and email:

git config --global user.name "Your Name"
git config --global user.email "you@your-domain.com"

Improved git log:

git config --global alias.lg "log --color --graph --pretty=format:'%Cred%h%Creset -%C(yellow)%d%Creset %s %Cgreen(%cr) %C(bold blue)<%an>%Creset' --abbrev-commit"

Now use:

git lg

Set the default branch to main instead of master:

git config --global init.defaultBranch main

Print global git configuration:

git config --list
# or alias
# gitconfig

SSH

There are two common strategies for SSH keys: one SSH key to rule them all or one SSH key per service. I use the latter one and will here run you through it by connecting to GitHub via SSH.

First, create a new SSH key in the ~/.ssh folder:

# in case the folder is not there yet
mkdir ~/.ssh
 
cd ~/.ssh
# or alias
# sshhome
 
ssh-keygen -t ed25519 -C "github"
# follow instructions
# use file name: github
# use passphrase and store it somewhere secure

Confirm whether passphrase was used properly by accessing private key:

ssh-keygen -y -f gitHub
# confirm with passphrase

Create the SSH configuration file if it doesn't exist yet:

# in case the file is not there yet
touch ~/.ssh/config

In your ~/.ssh/config file, add the new SSH key, so that it can get picked up for every terminal session automatically:

Host *
  AddKeysToAgent yes
  UseKeychain yes
  IdentityFile ~/.ssh/github

Add SSH key to MacOS' keychain:

ssh-add --apple-use-keychain ~/.ssh/github

Add the public key to your GitHub settings via the website or via the GitHub CLI (via brew install gh):

# copy public key and add it to https://github.com/
cat ~/.ssh/id_rsa.pub | pbcopy
 
# or use GitHub's CLI
gh auth login
# for the first login I think the SSH key gets added
# without the next command, but if not:
 
gh ssh-key add ~/.ssh/id_rsa.pub -t github

That's it. You have created an SSH key locally for one specific service, secured it via a passphrase, made it automatically available for every terminal session, and applied it to GitHub. In the case of GitHub, you are now able to interact with GitHub via SSH.

NVM for Node/NPM

The node version manager (NVM) (opens in a new tab) is used to install and manage multiple Node versions. After you have installed it via Homebrew in a previous step, type the following commands to complete the installation:

echo "source $(brew --prefix nvm)/nvm.sh" >> ~/.zshrc
 
source ~/.zshrc
# or alias
# zshsource

Now install the latest LTS version on the command line:

nvm install --lts

Afterward, check whether the installation was successful and whether the node package manager (npm) got installed along the way:

node -v && npm -v

Update npm to its latest version:

npm install -g npm@latest

And set defaults for npm:

npm set init-author-name="your name"
npm set init-author-email="you@example.com"
npm set init-author-url="example.com"

If you are a library author, log in to npm too:

npm adduser

That's it. If you want to list all your Node.js installation, type the following:

nvm list

If you want to install a newer Node.js version, then type:

nvm install <version> --reinstall-packages-from=$(nvm current)
nvm use <version>
nvm alias default <version>

If you want to list all globally installed packages, run this command:

npm list -g --depth=0

That's it. You have a running version of Node.js and its package manager.

I hope my setup can assist fellow developers in getting their Macs up and running smoothly. If you have any extra ideas or would like to share your own setup, feel free to reach out!

Acknowledgements

Thanks to all the open-source contributors whose work inspired these configurations. Special thanks to @rwieruch (opens in a new tab) for his valuable resources and guides.

How I Built My BlogHow to Set Up Arq 7 with B2 Cloud Storage for Secure Backups