A structured, mistake-free setup guide to help absolute beginners configure Visual Studio Code, Git, and automated AI coding assistants including Claude AI, OpenAI Codex, and Google Gemini on Windows and macOS.
Installing the standalone desktop application first establishes your identity with Anthropic early on. Once authenticated, the terminal-based Claude Code tool usually detects the existing login, making the sign-in process feel much smoother.
macOS Installation: Download the macOS build, open the downloaded .dmg file, and drag the Claude icon into your system Applications folder. Launch the application and sign in.
Windows Installation: Download the Windows installer (.exe), execute the installer, and complete the on-screen configuration and account login prompts. Leave Claude running in the background.
VS Code is simply the workshop. It is the code editor where you display, organise, and write your project files. Nothing magical happens in it until we load extensions.
macOS Setup: Check your Mac's processor first. For newer Apple Silicon machines (M1/M2/M3/M4), download the Apple Silicon version. For older Intel machines, download the Intel version. Drag the Visual Studio Code application icon into your Applications folder. Launch it once and grant requested permissions.
Windows Setup: Download the Windows User Installer (x64). Run the installer and proceed through the setup prompts.
Make sure the checkbox marked "Add to PATH" is ticked during setup. This allows Windows to recognise VS Code from the command line.
Usually no. If Windows does not recognise the code command line tool later, restart Windows to apply the path settings.
Think of Git as unlimited Undo. Every change is remembered. AI assistants also work much better inside Git repositories as they can track changes and read previous commits for context.
Windows Setup: Download the installer from the official Git for Windows website. Run the setup and accept the default settings. The defaults are excellent nowadays.
macOS Setup: Open your system Terminal and run the version check command. If Git is not installed, macOS will automatically prompt you to install Apple's Command Line Tools. Click Install to proceed.
Open a new Terminal (macOS) or PowerShell window (Windows) and execute the version check command to verify it registers correctly:
git --versiongit version 2.xx.xUsually no. Sometimes you need to restart VS Code or restart your terminal window. In rare cases on Windows, you may need to restart your computer.
Claude Code is Anthropic's official terminal agent. It operates directly inside your command line terminal, allowing it to edit files, run commands, and write code automatically inside your project with your permission.
Open VS Code. Press Cmd+Shift+XCtrl+Shift+X to open the Extensions tab. Search for "Claude Code", ensuring the publisher is explicitly listed as Anthropic. Click Install.
Authentication: Click the new **Spark icon** in your side activity panel tray. Click **Sign In**. Your default browser will open to securely authorise your credentials.
If authentication freezes, restart VS Code. If it still fails, sign out of both the extension and Claude Desktop, then log back in, starting with Claude Desktop first.
Finding this helpful? Subscribe to Business Growth Ready for more.
No single AI model is perfect. Adding alternative assistants lets you switch tools depending on the complexity, scale, or platform requirements of your task.
Features Google's massive token context window, making it excellent for parsing large codebases.
Mounts OpenAI's official ChatGPT model directly into your code sidebar tray for ecosystem compatibility.
The industry standard for real-time autocomplete suggestions as you type out lines of script.
These extensions turn VS Code from a plain text editor into an automated IDE, highlighting errors, completing paths, and formatting documents on the fly.
Displays inline history notes next to code lines so you can see when AI agents edited them.
Highlights syntax mistakes and broken formatting rules directly on the active line.
Catches typos and spelling mistakes inside code comments, strings, and variable names.
Cleans up layout indents, spaces, and character alignments automatically when saving files.
Automatically renames matching closing HTML tags when you edit their opening elements.
Auto-completes file paths as you type out script paths, stylesheets, or media locations.
Replaces default icons with custom colour-coded file type graphics in the explorer tree.
Colour-codes the outer border of VS Code windows based on the active project directory.
Launches a temporary local server that refreshes browser views on document save.
Only install PHP if you plan to build or modify PHP-based websites such as WordPress, Laravel, Craft CMS, or Drupal. If you are creating static HTML/CSS sites or JavaScript applications, you can safely skip this phase entirely.
✔ YES: If you are building WordPress themes, Laravel templates, Craft CMS, or Drupal sites.
✘ NO: If you are coding static HTML pages, vanilla CSS files, React components, Vue layouts, or Astro templates. Skip this phase and jump to Phase 8.
Ideal if you just need to execute PHP scripts, edit core templates, or check PHP syntax without launching full web servers. Note: Installing PHP standalone provides a lightweight command-line interpreter without MySQL/MariaDB database support (see Options 2 & 3 if your project requires a database).
Windows Setup (via Windows Package Manager Winget): Open PowerShell as Administrator and execute the installation command:
winget install PHP.PHPIf winget continues to fail or permissions block setup, you can use Chocolatey, the primary alternative package manager for Windows. It maintains a highly reliable, up-to-date PHP package.
Step 1: Open an Administrator PowerShell window and run the following command to install Chocolatey (if you do not have it already):
Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://community.chocolatey.org/install.ps1'))Step 2: Restart your PowerShell window as Administrator.
Step 3: Run the PHP installation command:
choco install phpmacOS Setup (via Homebrew package manager): Open Terminal and execute the installation command:
brew install phpVerify Installation: Restart your terminal and run the version check:
php -vPHP 8.4.x (or higher)There are three straightforward ways to open PowerShell directly inside a specific folder on Windows:
Method 1: The File Explorer Address Bar (Fastest)
powershell and press Enter.Method 2: The Shift + Right-Click Context Menu
Method 3: Using the cd Command inside PowerShell
If you already have a PowerShell window open, you can navigate to any folder manually using the Change Directory command:
cd followed by a space.cd "C:\Your\Target\Folder\Path"There are three straightforward ways to open Terminal directly inside a specific folder on macOS:
Method 1: Finder Services Menu (Fastest)
Method 2: Drag & Drop into Terminal
cd followed by a space.cd "/path/to/your/project-folder"Method 3: VS Code Integrated Terminal
This method allows you to view your PHP project in a standalone browser session without relying on VS Code extensions to trigger localhost.
Step 1: Start the Built-in PHP Development Server
Open your terminal inside your project folder using any method above, then run:
php -S localhost:8000Step 2: View the Website in Your Browser
Open Google Chrome, Safari, or any web browser and type the following local URL into the address bar at the top, then press Enter:
http://localhost:8000The browser will look inside your folder directory and automatically load the main entry file, typically named index.php or index.html.
Step 3: Monitor Real-Time Terminal Activity
As you click around your website or refresh pages in your browser, switch back to your PowerShell or Terminal window. You will see live development server logs printing every requested asset (images, stylesheets, scripts) along with HTTP status codes (such as 200 OK or 404 Not Found).
Step 4: Stopping the Local Server
When you are finished testing your website and want to shut down the server, click back into your PowerShell or Terminal window and press:
Ctrl + C
(This sends an interrupt signal to terminate the php -S background process cleanly).
Question: If I am using an AI coding assistant (such as Antigravity or VS Code automated extensions) that spins up its own browser runner, can running PHP on localhost:8000 stop other tools from launching?
Yes, it absolutely can!
Why This Happens (Port Conflicts):
When you execute php -S localhost:8000, you instruct your computer to "listen" exclusively on network port 8000 for web traffic. A network port acts like a dedicated telephone line, meaning only one application can hold the line at a time. If an AI testing tool, automated browser subagent, or another development server tries to claim localhost:8000 simultaneously, it will fail to start and trigger a Port Conflict error (such as Address already in use).
How to Manage Port Conflicts:
If you need to run PHP alongside another automated browser runner or local server, choose one of these two options:
Option A: Assign a Different Port to PHP (Recommended)
Simply change the port number when launching your PHP server (e.g. port 8001 or 8080):
php -S localhost:8001You can then access your PHP site in your browser at http://localhost:8001, leaving port 8000 completely open for your AI tools.
Option B: Stop the Active Server First
If you see an error like Failed to listen on localhost:8000 (reason: Address already in use), another application is already holding that port. Switch back to the active PowerShell or Terminal window running PHP and press Ctrl + C to free up the port before launching your next server.
If you're building specifically for WordPress, LocalWP is the modern, beginner-friendly standard. It handles servers, SSL, and database setups with a single click, far outperforming XAMPP.
Recommended if you require a full web server (Apache), database (MySQL/MariaDB), and a visual database administration panel (phpMyAdmin) for general local testing.
AI tools like Claude Code require the context of your entire project folder to read file dependencies and understand how your files relate. If you open files individually, the AI remains blind to the rest of the project.
my-first-ai-app), and click **Select Folder** (Windows) or **Open** (macOS).Before you let an AI write or edit code on your computer, initializing Git creates a safety net. If the assistant makes a mistake, you can inspect the changes and roll them back in seconds.
Initialize your tracking repository directly from the visual interface:
.git repository container inside your folder. All changes are now trackable.Let's put the workspace to the test by prompting the AI assistant to write a simple website and verifying that all tools and paths connect correctly.
Click the **Spark icon** to open the Claude Code panel. Type the following prompt into the input box and press Enter:
Create an HTML page introducing my business. Add inline CSS to make it look modern and responsive.Observe: Watch Claude Code verify the environment, write the code, and save the file index.html directly into your open folder.
Verify that you can launch VS Code directly from your terminal or command line by opening PowerShell or Terminal, navigating to your folder, and running:
code .Visual Studio Code opens with the current folder active.Even smooth installations can hit roadblocks. This guide lists the exact visual steps to recover from common system conflicts without re-installing everything.
1. Open terminal inside VS Code and close it, launching a fresh instance.
2. If it is still not registered, restart the VS Code application.
3. If it remains broken, restart your computer.
4. Check that Git is in your system PATH environment variable, or reinstall the client.
1. Close and restart the Claude Desktop application.
2. In Claude Desktop, click settings, log out of your session, then log back in.
3. Restart VS Code, click the Spark icon, and click **Sign In** to trigger a fresh browser authentication loop.
1. Close all active terminal windows and command shells.
2. Launch a fresh PowerShell (as Admin) or Terminal, and run php -v.
3. If it still fails, restart your PC. Environmental path updates on Windows and macOS often require a system restart to register globally.
Leave this entire section alone. This block is reserved for advanced configurations where the user profile settings file is modified directly via raw configuration parameters.
To override deep operational constraints manually, execute Preferences: Open User Settings (JSON) via the main Command Palette (Cmd+Shift+PCtrl+Shift+P) and inject the following configuration parameters between the root formatting brackets:
{
"editor.fontSize": 14,
"editor.fontFamily": "'IBM Plex Mono', Consolas, monospace",
"editor.cursorSmoothCaretAnimation": "on",
"editor.cursorBlinking": "smooth",
"editor.minimap.enabled": false,
"editor.wordWrap": "on",
"files.autoSave": "afterDelay",
"workbench.colorTheme": "Default Dark Modern"
}