A macOS setup guide specific to front-end development.
For a guided setup, open up Terminal.app and run the following command:
- Save repo to
~/Downloads
folder:git clone https://github.com/michaelschwobe/mac-dev-setup.git ~/Downloads/mac-dev-setup && \ cd ~/Downloads/mac-dev-setup/scripts
- Run the installer script.
OR Run the installer scripts individually:
sh install.sh
sh defaults.sh sh tools.sh sh casks.sh sh optimizations.sh sh summary.sh
🔥 The scripts auto-skip prompts for items already installed. Recommended: Rerun as many times as needed.
✨ And thats it! For additional CLI and IDE customizations, refer to the related Manual Setup section below.
For those who prefer à la carte, this section contains everything that the Guided Setup attempts to do including CLI and IDE customizations.
- If you haven’t already, save repo to
~/Downloads
folder:git clone https://github.com/michaelschwobe/mac-dev-setup.git ~/Downloads/mac-dev-setup && \ cd ~/Downloads/mac-dev-setup/scripts
- Continue with setup below.
defaults write com.apple.dock persistent-apps -array-add '{"tile-type"="spacer-tile";}' && \
defaults write com.apple.dock persistent-apps -array-add '{"tile-type"="spacer-tile";}' && \
defaults write com.apple.dock persistent-apps -array-add '{"tile-type"="spacer-tile";}' && \
killall Dock
defaults write com.apple.dock autohide -boolean true && \
killall Dock
Display hidden Finder files/folders:
defaults write com.apple.finder AppleShowAllFiles -boolean true && \
killall Finder
mkdir -p ~/Developer
mkdir -p ~/Sandbox
xcode-select --install
Installing brew (Homebrew):
If: Apple Silicon/ARM Architecture:
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)" && \
echo 'eval "$(/opt/homebrew/bin/brew shellenv)"'>>$HOME/.zprofile && \
eval "$(/opt/homebrew/bin/brew shellenv)" && \
brew doctor
If Intel Architecture:
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)" && \
brew doctor
Install watchman:
brew install watchman
Install trash:
brew install trash
Install git:
brew install git
Install zsh:
brew install zsh
Install oh-my-zsh:
sh -c "$(curl -fsSL https://raw.githubusercontent.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"
Install oh-my-posh (CLI theming):
brew install jandedobbeleer/oh-my-posh/oh-my-posh
echo '# Theme configuration: Oh My Posh' >> ~/.zshrc
echo 'if [ "$TERM_PROGRAM" != "Apple_Terminal" ]; then' >> ~/.zshrc
echo ' if [ -f ~/.moonlight.omp.json ]; then' >> ~/.zshrc
echo ' eval "$(oh-my-posh init zsh --config ~/.moonlight.omp.json)"' >> ~/.zshrc
echo ' else' >> ~/.zshrc
echo ' eval "$(oh-my-posh init zsh --config $(brew --prefix oh-my-posh)/themes/jandedobbeleer.omp.json)"' >> ~/.zshrc
echo ' fi' >> ~/.zshrc
echo 'fi' >> ~/.zshrc
Copy my Oh My Posh settings:
cp ~/Downloads/mac-dev-setup/.moonlight.omp.json ~/.moonlight.omp.json
Restart your CLI for this to take effect.
Install powerlevel10k (CLI theming):
brew install powerlevel10k && \
echo '# Theme configuration: PowerLevel10K' >> ~/.zshrc && \
echo 'source $(brew --prefix)/share/powerlevel10k/powerlevel10k.zsh-theme' >> ~/.zshrc && \
echo '# To customize prompt, run `p10k configure` or edit ~/.p10k.zsh.' >> ~/.zshrc && \
echo '[[ ! -f ~/.p10k.zsh ]] || source ~/.p10k.zsh' >> ~/.zshrc
Copy my PowerLevel10K settings:
cp ~/Downloads/mac-dev-setup/.p10k.zsh ~/.p10k.zsh
Or customize your own settings:
p10k configure
Restart your CLI for this to take effect.
Install zsh-autosuggestions:
brew install zsh-autosuggestions && \
echo "# Fish shell-like fast/unobtrusive autosuggestions for Zsh." >> ~/.zshrc && \
echo "source $(brew --prefix)/share/zsh-autosuggestions/zsh-autosuggestions.zsh" >> ~/.zshrc
Restart your CLI for this to take effect.
Install zsh-syntax-highlighting:
brew install zsh-syntax-highlighting && \
echo "# Fish shell-like syntax highlighting for Zsh." >> ~/.zshrc && \
echo "# Warning: Must be last sourced!" >> ~/.zshrc && \
echo "source $(brew --prefix)/share/zsh-syntax-highlighting/zsh-syntax-highlighting.zsh" >> ~/.zshrc
Restart your CLI for this to take effect.
Note the source
command must be at the end of ~/.zshrc
.
brew install node
Install n (Node via n):
brew install n
Install nvm (Node via nvm):
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash
Install yarn:
brew install yarn
Install pnpm:
brew install pnpm
Upgrade npm (globally via npm):
npm install -g npm@latest
Install/Upgrade serve (globally via npm):
npm install -g serve@latest
brew tap homebrew/cask-fonts # You only need to do this once!
brew install font-jetbrains-mono-nerd-font
brew install --cask 1password
brew install --cask brave-browser
brew install --cask bruno
brew install --cask discord
brew install --cask figma
brew install --cask google-chrome
brew install --cask iterm2
- Copy my iTerm settings:
cp ~/Downloads/mac-dev-setup/.zshrc ~/
- Set the theme by going to:
- "Settings… → Profiles → Colors → Color Presets… → Import…"
- Theme location:
~/Downloads/mac-dev-setup/Moonlight.itermcolors
- Set the font by going to:
- "Settings… → Profiles → Text → Font"
- Font name: "JetBrainsMono NFM" or "JetBrainsMono Nerd Font Mono"
- Restart iTerm and resolve any remaining issues.
brew install --cask rectangle
brew install --cask slack
brew install --cask sourcetree
- Set the font by going to:
- "Settings… → Diff → Internal Diff Visualization → Diff View font"
- Font name: "JetBrainsMono NFM" or "JetBrainsMono Nerd Font Mono"
- Restart Sourcetree and resolve any remaining issues.
brew install --cask spotify
- Set the theme and font by going to:
- "Settings… → Profiles → Import…" (bottom left next to the "+/-" buttons)
- Theme location:
~/Downloads/mac-dev-setup/Moonlight.terminal
- Font name: "JetBrainsMono NFM" or "JetBrainsMono Nerd Font Mono"
- Restart Terminal and resolve any remaining issues.
brew install --cask visual-studio-code
- Install my Extensions:
code --install-extension alefragnani.project-manager code --install-extension atomiks.moonlight code --install-extension bradlc.vscode-tailwindcss code --install-extension christian-kohler.npm-intellisense code --install-extension christian-kohler.path-intellisense code --install-extension codeforge.remix-forge code --install-extension dbaeumer.vscode-eslint code --install-extension eamodio.gitlens code --install-extension editorconfig.editorconfig code --install-extension esbenp.prettier-vscode code --install-extension formulahendry.auto-rename-tag code --install-extension github.copilot code --install-extension github.copilot-chat code --install-extension github.vscode-github-actions code --install-extension gruntfuggly.todo-tree code --install-extension l13rary.l13-diff code --install-extension mikestead.dotenv code --install-extension ms-azuretools.vscode-docker code --install-extension orta.vscode-twoslash-queries code --install-extension prisma.prisma code --install-extension qwtel.sqlite-viewer code --install-extension stylelint.vscode-stylelint code --install-extension tyriar.sort-lines code --install-extension unifiedjs.vscode-mdx code --install-extension vscode-icons-team.vscode-icons code --install-extension yoavbls.pretty-ts-errors code --install-extension zignd.html-css-class-completion
- Copy my Visual Studio Code User settings:
cp ~/Downloads/mac-dev-setup/Code/* ~/Library/Application\ Support/Code/User
- Restart Visual Studio Code and resolve any remaining issues.
brew install --cask warp
- Copy the theme:
mkdir -p ~/.warp/themes/ && \ cp ~/Downloads/mac-dev-setup/Moonlight.warp.yaml ~/.warp/themes/
- Set the theme and font by going to:
- "Settings… → Appearance… → Themes"
- Theme name: "Moonlight"
- Font name: "JetBrainsMono NFM" or "JetBrainsMono Nerd Font Mono"
- Restart Warp and resolve any remaining issues.
brew install --cask zoom
defaults write com.apple.dock ResetLaunchPad -boolean true; killall Dock
Updating oh-my-zsh:
omz update
Optimizing Homebrew:
brew update && brew upgrade && brew doctor && brew cleanup