Tools Installer — Vibe Coding

🔴 Wajib 🤖 AI Tools 🧩 VS Code Extensions ⚙️ Development 🟡 Optional ⚡ Install Semua 🔐 Login

🔴 Wajib — Mesti Ada

Wajib

🟢

Node.js + npm

JavaScript runtime — diperlukan oleh Claude Code & Codex

# Download dari: https://nodejs.org (pilih LTS) # Atau guna winget: winget install OpenJS.NodeJS.LTS

# Download dari: https://nodejs.org (pilih LTS) # Atau guna brew: brew install node

🔗 nodejs.org

Wajib

🔀

Git

Version control — track perubahan, push ke GitHub

# Download dari: https://git-scm.com/download/win # Atau guna winget: winget install Git.Git

# Download dari: https://git-scm.com/download/mac # Atau guna brew: brew install git

🔗 git-scm.com

Wajib

💻

VS Code

Code editor — ringan, extension lengkap, terminal built-in

# Download dari: https://code.visualstudio.com # Atau guna winget: winget install Microsoft.VisualStudioCode

# Download dari: https://code.visualstudio.com # Atau guna brew: brew install --cask visual-studio-code

🔗 code.visualstudio.com

Wajib

🌐

Browser Moden

Chrome / Edge / Firefox — untuk test & debug website

# Chrome: https://www.google.com/chrome # Edge (built-in Windows): https://www.microsoft.com/edge # Firefox: https://www.mozilla.org/firefox

🔗 Chrome | Firefox

🤖 AI Tools — Jantung Vibe Coding

Wajib

🧠

Claude Code

AI Coding Assistant — reasoning, MCP, Skills, research

# Install via npm: npm install -g @anthropic-ai/claude-code # Verify: claude --version

🔗 Claude Code Docs

Wajib

⚡

Codex (OpenAI)

AI Coding CLI — action-oriented, deployment, IDE integration

# Install via npm: npm install -g @openai/codex # Verify: codex --version

🔗 Codex GitHub

🧩 VS Code Extensions — Wajib untuk Vibe Coding

Wajib

✨

Prettier — Code Formatter

Auto-format HTML, CSS, JS bila save — kod sentiasa kemas

code --install-extension esbenp.prettier-vscode

Wajib

🔄

Live Server

Local dev server — auto-reload bila save, test website real-time

code --install-extension ritwickdey.liveserver

Wajib

📜

GitLens

Git blame, history, compare — faham siapa ubah apa, bila

code --install-extension eamodio.gitlens

Wajib

🏷️

Auto Rename Tag

Auto-rename paired HTML/JSX tags — tukar opening, closing ikut

code --install-extension formulahendry.auto-rename-tag

Wajib

🎨

HTML CSS Support

CSS class name auto-complete — taip class, auto-suggest

code --install-extension ecmel.vscode-html-css

Wajib

❌

Error Lens

Error & warning inline — nampak terus di baris mana error, tak perlu hover

code --install-extension usernamehw.errorlens

Wajib

🧠

Claude Code

Claude Code dalam VS Code — chat, inline edit, terminal

code --install-extension anthropic.claude-code

Wajib

🤖

GitHub Copilot Chat

AI pair programmer — autocomplete, chat, inline suggestions

code --install-extension github.copilot-chat

Optional

📝

Markdown Preview Enhanced

Preview README.md & docs — live preview semasa edit

code --install-extension shd101wyy.markdown-preview-enhanced

Optional

📂

Path Intellisense

Auto-complete file paths — taip ./ dan senarai fail keluar

code --install-extension christian-kohler.path-intellisense

Optional

⚡

Thunder Client

API client dalam VS Code — test Supabase endpoints, REST calls

code --install-extension rangav.vscode-thunder-client

Optional

⚛️

ES7+ React Snippets

React code snippets — untuk Fasa 11 (React + Vibe Coding)

code --install-extension dsznajder.es7-react-js-snippets

Optional

🔐

DotENV

Syntax highlight .env files — nampak mana key, mana value

code --install-extension mikestead.dotenv

Optional

📋

TODO Tree

Track TODOs, FIXMEs — papar sebagai tree view, tak tertinggal task

code --install-extension gruntfuggly.todo-tree

Optional

🎨

VS Code Icons

File icons cantik — senang cam jenis fail dalam explorer

code --install-extension vscode-icons-team.vscode-icons

⚡ Install Semua VS Code Extensions — Sekaligus

Copy-paste dan run di terminal. Install semua extension WAJIB + OPTIONAL.

# === VS CODE EXTENSIONS — INSTALL SEMUA === # Copy dan paste ke terminal (PowerShell / Bash) # WAJIB: code --install-extension esbenp.prettier-vscode code --install-extension ritwickdey.liveserver code --install-extension eamodio.gitlens code --install-extension ecmel.vscode-html-css code --install-extension formulahendry.auto-rename-tag code --install-extension usernamehw.errorlens code --install-extension anthropic.claude-code code --install-extension github.copilot-chat # OPTIONAL (recommended): code --install-extension shd101wyy.markdown-preview-enhanced code --install-extension christian-kohler.path-intellisense code --install-extension rangav.vscode-thunder-client code --install-extension dsznajder.es7-react-js-snippets code --install-extension mikestead.dotenv code --install-extension gruntfuggly.todo-tree code --install-extension vscode-icons-team.vscode-icons echo "DONE! All VS Code extensions installed."

⚙️ Development Tools

Optional

☁️

Wrangler CLI (Cloudflare)

Deploy ke Cloudflare Pages/Workers — static sites, functions

# Install via npm: npm install -g wrangler # Login: wrangler login

🔗 Wrangler Docs

Optional

🟢

Supabase CLI

Local development, migrations, database management

# Install via npm: npm install -g supabase # Login: supabase login

🔗 Supabase CLI Docs

Optional

🐙

GitHub Desktop

GUI untuk Git — kalau tak suka terminal. Beginner-friendly

# Download dari: # Windows/Mac: https://desktop.github.com

🔗 desktop.github.com

Optional

📱

Flutter SDK

Untuk mobile app development (Fasa 12) — optional

# Download dari: https://flutter.dev # Atau guna winget: winget install Google.Flutter

# Download dari: https://flutter.dev # Atau guna brew: brew install --cask flutter

🔗 flutter.dev

🟡 Optional — Bila Perlu

Optional

📦

Postman

Test API endpoints — Supabase, REST, GraphQL

# Download dari: https://www.postman.com/downloads

🔗 postman.com

Optional

🖥️

Windows Terminal

Terminal moden untuk Windows — tab, themes, GPU accelerated

# Windows: winget install Microsoft.WindowsTerminal # Atau download dari Microsoft Store

🔗 Windows Terminal

Optional

📸

Lightshot / Greenshot

Screenshot tool — untuk tunjuk hasil dan bukti belajar

# Lightshot: https://app.prntscr.com # Greenshot: https://getgreenshot.org

🔗 Lightshot | Greenshot

Optional

📋

Notepad++

Text editor lightweight — untuk edit config files

# Download dari: https://notepad-plus-plus.org # Atau guna winget: winget install Notepad++.Notepad++

🔗 notepad-plus-plus.org

⚡ Install Semua Tools Wajib — Sekaligus

Copy-paste dan run di terminal. Pilih ikut OS anda.

# === VIBE CODING — INSTALL SEMUA (Windows) === # Copy dan paste ke PowerShell (Run as Admin) # 1. Node.js LTS winget install OpenJS.NodeJS.LTS # 2. Git winget install Git.Git # 3. VS Code winget install Microsoft.VisualStudioCode # 4. Windows Terminal winget install Microsoft.WindowsTerminal # 5. Browser (optional) winget install Google.Chrome # === RESTART TERMINAL === # Tutup dan buka semula terminal # 6. Claude Code npm install -g @anthropic-ai/claude-code # 7. Codex npm install -g @openai/codex # 8. Wrangler npm install -g wrangler # 9. Supabase CLI npm install -g supabase # === VERIFY === node --version git --version claude --version codex --version echo "DONE! Semua tools wajib dah install."

# === VIBE CODING — INSTALL SEMUA (Mac) === # Copy dan paste ke Terminal # 1. Homebrew (kalau belum ada) /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)" # 2. Node.js LTS brew install node # 3. Git brew install git # 4. VS Code brew install --cask visual-studio-code # 5. Browser brew install --cask google-chrome # === RESTART TERMINAL === # 6. Claude Code npm install -g @anthropic-ai/claude-code # 7. Codex npm install -g @openai/codex # 8. Wrangler npm install -g wrangler # 9. Supabase CLI npm install -g supabase # === VERIFY === node --version git --version claude --version codex --version echo "DONE! Semua tools wajib dah install."