DEV Community

Cover image for Setting up a professional macOS dev environment in 2026
Sami Bashraheel
Sami Bashraheel

Posted on

Setting up a professional macOS dev environment in 2026

#macos #webdev #productivity #beginners

Who this is for

You want a clean, repeatable dev setup on macOS. You want fast installs, predictable updates, and a workflow for shipping real projects. By the end, you will have a working pipeline from your laptop to a live URL.

What you will set up

  • iTerm2 for a better terminal
  • Oh My Zsh for shell productivity
  • Homebrew for tool management
  • Git (latest, via Homebrew) for version control
  • SSH keys for secure GitHub access
  • nvm for Node.js version management
  • VS Code with 9 extensions and a tuned settings file
  • A deploy pipeline from GitHub to Vercel, with preview URLs on every PR

Before you start

Update macOS and restart. Open Terminal once to clear first-run prompts.

1. iTerm2

iTerm2 replaces the default Terminal with split panes, search, profiles, and deep customisation. You spend hours in a terminal each week. A better terminal pays off fast.

Install with Homebrew (section 3 below):

brew install --cask iterm2
Enter fullscreen mode Exit fullscreen mode

Set iTerm2 as your default terminal app.

2. Oh My Zsh

macOS ships with Zsh. Oh My Zsh adds a plugin system and better defaults.

Install:

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

Open ~/.zshrc:

open ~/.zshrc
Enter fullscreen mode Exit fullscreen mode

Set plugins:

plugins=(git node npm macos vscode)
Enter fullscreen mode Exit fullscreen mode
Plugin Purpose
git 150+ aliases: gst for git status, gco for git checkout
node Completions for Node.js commands
npm Aliases and completions for npm
macos macOS helpers: ofd opens Finder in the current directory
vscode vsc alias to open files in VS Code

Reload:

source ~/.zshrc
Enter fullscreen mode Exit fullscreen mode

Small efficiencies compound. gst instead of git status saves seconds you reclaim thousands of times.

3. Homebrew

Homebrew makes your macOS setup repeatable. Install, update, and remove tools with one command. No random .dmg downloads. No version guessing.

Install:

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

Add Homebrew to your PATH.

Apple Silicon (M1/M2/M3/M4):

eval "$(/opt/homebrew/bin/brew shellenv)"
Enter fullscreen mode Exit fullscreen mode

Intel:

eval "$(/usr/local/bin/brew shellenv)"
Enter fullscreen mode Exit fullscreen mode

Reload and verify:

source ~/.zshrc
brew --version
Enter fullscreen mode Exit fullscreen mode

From this point, check Homebrew for a package before downloading anything manually.

4. Git

Every deploy starts with a commit. Install Git via Homebrew. The macOS default ships an older release through Xcode Command Line Tools.

brew install git
Enter fullscreen mode Exit fullscreen mode

Verify:

git --version
which git
# Apple Silicon: /opt/homebrew/bin/git
Enter fullscreen mode Exit fullscreen mode

Set your identity and defaults:

git config --global user.name "Your Name"
git config --global user.email "you@example.com"
git config --global init.defaultBranch main
git config --global core.editor "code --wait"
git config --global pull.rebase false
git config --global push.autoSetupRemote true
git config --global rerere.enabled true
Enter fullscreen mode Exit fullscreen mode
Setting What you get
init.defaultBranch main Every new repo starts on main, the modern default
core.editor "code --wait" Git opens VS Code for commit messages and waits for you to save
pull.rebase false Merges on pull, keeps history straightforward
push.autoSetupRemote true First push on a new branch works without --set-upstream
rerere.enabled true Git remembers conflict resolutions and reapplies them

Verify:

git config --global --list
Enter fullscreen mode Exit fullscreen mode

5. SSH keys for GitHub

SSH gives you secure, token-free Git operations. One setup, zero password prompts.

Generate an ed25519 key:

ssh-keygen -t ed25519 -C "you@example.com"
Enter fullscreen mode Exit fullscreen mode

Accept the default path. Set a strong passphrase.

Create the SSH config:

mkdir -p ~/.ssh
touch ~/.ssh/config
open ~/.ssh/config
Enter fullscreen mode Exit fullscreen mode

Add:

Host github.com
  AddKeysToAgent yes
  UseKeychain yes
  IdentityFile ~/.ssh/id_ed25519
Enter fullscreen mode Exit fullscreen mode

Add the key to Keychain:

ssh-add --apple-use-keychain ~/.ssh/id_ed25519
Enter fullscreen mode Exit fullscreen mode

Copy the public key:

pbcopy < ~/.ssh/id_ed25519.pub
Enter fullscreen mode Exit fullscreen mode

Paste at github.com/settings/keys > New SSH key.

Test:

ssh -T git@github.com
# Expected: "Hi username! You've successfully authenticated..."
Enter fullscreen mode Exit fullscreen mode

6. Node.js with nvm

Different projects need different Node versions. nvm lets you install and switch between them instantly.

Install nvm:

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.1/install.sh | bash
Enter fullscreen mode Exit fullscreen mode

Reload and verify:

source ~/.zshrc
nvm --version
Enter fullscreen mode Exit fullscreen mode

Install Node LTS (Long-Term Support) and set the default:

nvm install --lts
nvm alias default node
Enter fullscreen mode Exit fullscreen mode

Verify:

node --version
npm --version
Enter fullscreen mode Exit fullscreen mode

Enable Corepack for pnpm later:

corepack enable
Enter fullscreen mode Exit fullscreen mode

Node.js runs your code. npm manages your dependencies. Both install together, but they serve different roles.

7. VS Code

A tight edit-format-lint-commit loop makes you faster. VS Code with a focused config gets you there.

Install the code CLI:

  1. Open VS Code
  2. Press Cmd + Shift + P
  3. Run "Shell Command: Install 'code' command in PATH"

Test:

code --version
code .
Enter fullscreen mode Exit fullscreen mode

Install 9 extensions from the terminal:

code --install-extension dbaeumer.vscode-eslint
code --install-extension esbenp.prettier-vscode
code --install-extension bradlc.vscode-tailwindcss
code --install-extension formulahendry.auto-rename-tag
code --install-extension christian-kohler.path-intellisense
code --install-extension usernamehw.errorlens
code --install-extension eamodio.gitlens
code --install-extension GitHub.copilot
code --install-extension astro-build.astro-vscode
Enter fullscreen mode Exit fullscreen mode
Extension Purpose
ESLint Catches code errors in real time
Prettier Auto-formats on save
Tailwind CSS IntelliSense Autocomplete for Tailwind classes
Auto Rename Tag Renames closing tags when you edit opening tags
Path Intellisense Autocompletes file paths in imports
Error Lens Shows errors inline, next to the code
GitLens Shows who changed each line and when
GitHub Copilot AI pair programmer
Astro Syntax highlighting and IntelliSense for .astro files

Open User Settings (JSON) with Cmd + Shift + P > "Preferences: Open User Settings (JSON)":

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.tabSize": 2,
  "editor.insertSpaces": true,
  "editor.detectIndentation": false,
  "files.autoSave": "onFocusChange",
  "editor.stickyScroll.enabled": true,
  "editor.bracketPairColorization.enabled": true,
  "editor.guides.bracketPairs": "active",
  "editor.minimap.enabled": false,
  "editor.wordWrap": "on",
  "terminal.integrated.defaultProfile.osx": "zsh",
  "terminal.integrated.fontFamily": "MesloLGS NF",
  "files.associations": { "*.astro": "astro" },
  "emmet.includeLanguages": { "astro": "html" },
  "eslint.validate": ["javascript", "typescript", "astro"],
  "[astro]": { "editor.defaultFormatter": "astro-build.astro-vscode" },
  "[json]": { "editor.defaultFormatter": "esbenp.prettier-vscode" },
  "[markdown]": { "editor.defaultFormatter": "esbenp.prettier-vscode" },
  "git.confirmSync": false,
  "git.autofetch": true,
  "git.enableSmartCommit": true,
  "explorer.confirmDelete": false,
  "explorer.confirmDragAndDrop": false,
  "telemetry.telemetryLevel": "off"
}
Enter fullscreen mode Exit fullscreen mode

Key settings:

  • formatOnSave formats code every time you save
  • autoSave: onFocusChange saves files when you click away
  • stickyScroll pins parent scopes as you scroll
  • bracketPairColorization colour-codes matching brackets
  • git.autofetch checks GitHub for updates in the background

8. GitHub organisation

A GitHub organisation separates professional repos from personal experiments.

Create one at github.com/settings/organizations:

  1. Pick the free plan
  2. Choose a clean, lowercase name (e.g. madebysami)
  3. Set a contact email

Your repos live under one namespace. Clients, collaborators, and employers see a structured body of work.

9. First deploy: Astro to Vercel

This section proves the entire pipeline works end to end.

Create a workspace folder:

mkdir -p ~/Developer/madebysami
cd ~/Developer/madebysami
Enter fullscreen mode Exit fullscreen mode

Scaffold an Astro project:

npm create astro@latest hello-world
cd hello-world
Enter fullscreen mode Exit fullscreen mode

Choose: empty starter, TypeScript strict, install dependencies, init Git.

Run locally:

npm run dev
# Open http://localhost:4321
# Ctrl + C to stop
Enter fullscreen mode Exit fullscreen mode

Create a hello-world repo on GitHub under your org. Do not add a README.

Commit and push:

git add .
git commit -m "feat: initial hello world project"
git remote add origin git@github.com:madebysami/hello-world.git
git push -u origin main
Enter fullscreen mode Exit fullscreen mode

Deploy on Vercel:

  1. Sign up at vercel.com with GitHub
  2. Import your repo at vercel.com/new
  3. Vercel detects Astro and deploys

You get a live URL within 30 seconds. Your pipeline works.

10. Preview deploys with feature branches

All changes go through branches and PRs. Never commit to main directly.

git checkout -b feat/add-styling
# Make changes
git add .
git commit -m "style: add gradient heading"
git push
Enter fullscreen mode Exit fullscreen mode

Open a pull request on GitHub. Vercel posts a preview URL on the PR. Review the preview. Merge. Vercel redeploys main.

Every PR gets a free staging environment. Professional teams pay for this workflow. You get the same at zero cost.

11. Config files to copy

~/.ssh/config:

Host github.com
  AddKeysToAgent yes
  UseKeychain yes
  IdentityFile ~/.ssh/id_ed25519
Enter fullscreen mode Exit fullscreen mode

.gitignore:

node_modules/
dist/
.env
.env.*
.DS_Store
.vscode/settings.json
.vercel
npm-debug.log*
yarn-debug.log*
yarn-error.log*
Enter fullscreen mode Exit fullscreen mode

.prettierrc:

{
  "semi": false,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "all",
  "printWidth": 100
}
Enter fullscreen mode Exit fullscreen mode

eslint.config.js:

import eslintPluginAstro from 'eslint-plugin-astro'

export default [
  ...eslintPluginAstro.configs.recommended,
  { rules: {} },
]
Enter fullscreen mode Exit fullscreen mode

12. Screenshots to include

Add screenshots to prove the pipeline works and make the post shareable:

  • iTerm2 with split panes and your devstats output
  • git config --global --list showing your full setup
  • ssh -T git@github.com success output
  • node --version and npm --version
  • Your GitHub repo with commits and a PR
  • Your Vercel dashboard with the deployment
  • The live URL in a browser

13. Final checklist

  • [ ] Homebrew installs and updates tools
  • [ ] which git points to Homebrew Git
  • [ ] ssh -T git@github.com authenticates
  • [ ] nvm --version and node --version work
  • [ ] VS Code formats on save
  • [ ] Astro dev server runs at localhost:4321
  • [ ] git push reaches GitHub
  • [ ] Vercel deploys on push to main
  • [ ] PRs get Vercel preview URLs

Your environment is ready. Your pipeline is proven. Go ship something.

Top comments (0)