Development Environment Setup¶

Complete setup guide for your development machine.

Pre-boarding Checklist¶

Before you start, ensure you have:

MacBook or development machine
GitHub account (Sign up)
Slack invitation (ask your team lead)
Access to GitHub repositories and projects
Code editor installed (see below)

Required Software¶

1. Code Editor¶

VS Code (Recommended)

Download: https://code.visualstudio.com/
Lightweight, fast, excellent extensions
Great for JavaScript, PHP, HTML, CSS

Recommended Extensions:

PHP Development¶

PHP Debug (xdebug.php-debug) - Debug PHP code with Xdebug
PHP Intelephense (bmewburn.vscode-intelephense-client) - PHP language support
PHP DocBlocker (neilbrayfield.php-docblocker) - Generate PHP docblocks
PHP Sniffer (wongjn.php-sniffer) - PHP code sniffer integration
PHPUnit (recca0120.vscode-phpunit) - PHPUnit test runner

WordPress Development¶

WordPress Hooks IntelliSense (johnbillion.vscode-wordpress-hooks) - WordPress hooks autocomplete
WordPress Toolbox (wordpresstoolbox.wordpress-toolbox) - WordPress development tools
WooCommerce Snippets (claudiosanches.woocommerce) - WooCommerce code snippets

JavaScript/Frontend¶

ESLint (dbaeumer.vscode-eslint) - JavaScript linting
Prettier (esbenp.prettier-vscode) - Code formatter
Prettier ESLint (rvest.vs-code-prettier-eslint) - Prettier + ESLint integration
Tailwind CSS IntelliSense (bradlc.vscode-tailwindcss) - Tailwind CSS support
Auto Close Tag (formulahendry.auto-close-tag) - Auto close HTML/XML tags
Auto Rename Tag (formulahendry.auto-rename-tag) - Auto rename paired tags

Testing & Debugging¶

Playwright Test (ms-playwright.playwright) - End-to-end testing

Utilities¶

Code Spell Checker (streetsidesoftware.code-spell-checker) - Spell checking
Markdown Mermaid (bierner.markdown-mermaid) - Mermaid diagrams in markdown
YAML (redhat.vscode-yaml) - YAML language support
Live Share (ms-vsliveshare.vsliveshare) - Real-time collaboration

Installation: Open VS Code, press Cmd+Shift+X (Mac) or Ctrl+Shift+X (Windows), search for extension names, and click Install.

Also checkout Visual Studio Code Editor for WordPress development

2. PHP Development¶

Laravel Herd (All-in-one PHP environment)

Download: https://herd.laravel.com/
Includes PHP, Nginx, dnsmasq
Easy local site management
Perfect for WordPress development

# After installation, verify:
php --version

Composer (PHP Package Manager)

Download: https://getcomposer.org/
Required for modern PHP development

composer --version

3. Database¶

MySQL or MariaDB

MySQL: https://dev.mysql.com/downloads/mysql/
MariaDB: https://mariadb.org/download/

Database Management Tools (choose one):

PHPMyAdmin - https://www.phpmyadmin.net/ Web-based, included with Herd
TablePlus - https://tableplus.com/ (Recommended for Mac)
MySQL Workbench - https://dev.mysql.com/downloads/workbench/
Sequel Ace - https://sequel-ace.com/ (Mac only, free)

# Verify installation:
mysql --version

4. JavaScript/Node.js¶

Node.js - JavaScript runtime

Download: https://nodejs.org/ (LTS version)

npm - Comes with Node.js

nvm (Node Version Manager) - Manage multiple Node versions - Install: https://github.com/nvm-sh/nvm

# Verify installations:
node --version
npm --version
nvm --version

# Using nvm:
nvm install 18        # Install Node 18
nvm use 18           # Use Node 18
nvm list             # List installed versions

5. Version Control¶

Git - Already installed on Mac, or:

Download: https://git-scm.com/downloads

git --version

# Configure Git:
git config --global user.name "Your Name"
git config --global user.email "your.email@example.com"

Oh My Zsh (Optional but recommended)

Enhances terminal experience
Install: https://ohmyz.sh/

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

🔧 Quick Setup Commands¶

Run these commands to verify everything is installed:

# Check all installations at once:
echo "=== Development Environment Check ==="
echo "PHP: $(php --version | head -n 1)"
echo "Composer: $(composer --version)"
echo "MySQL: $(mysql --version)"
echo "Node: $(node --version)"
echo "npm: $(npm --version)"
echo "Git: $(git --version)"
echo "=== Setup Complete! ==="

📦 Installation Order¶

Follow this order for smoothest setup:

✅ VS Code - Install first
✅ Laravel Herd - PHP environment
✅ Composer - PHP packages
✅ Node.js - JavaScript runtime
✅ nvm - Node version manager
✅ Database tool - Choose your preferred GUI
✅ Oh My Zsh - Terminal enhancement (optional)
✅ Git config - Set up your identity

🎓 Next Steps¶

After setup is complete:

See debuging.md for debugging configuration
Start learning HTML & CSS
Then move to JavaScript
Finally learn PHP & MySQL

Troubleshooting¶

Common Issues¶

PHP not found after Herd installation:

# Add Herd to PATH (already done by installer usually)
export PATH="$HOME/.config/herd/bin:$PATH"

MySQL connection issues:

Check if MySQL service is running
Verify credentials (default: root / no password)
Check port (default: 3306)

Node/npm permission errors:

Use nvm instead of system Node.js
Never use sudo with npm

Getting Help¶

Check official documentation
Ask in team Slack channel
Contact your mentor
Search Stack Overflow

Setup Time: 1-2 hours
Next: HTML & CSS