Install Visual Studio Code (VS Code)

 

Install Visual Studio Code (VS Code)

 

 

Berikut panduan install Visual Studio Code (VS Code) dengan langkah yang jelas dan langsung bisa dipraktikkan di Windows (sesuai setup Anda pakai XAMPP & desktop):

---

🔧 1. Download VS Code

• Buka situs resmi: Visual Studio Code
• Klik tombol Download for Windows

---

📦 2. Jalankan Installer

Setelah file .exe terdownload:

1.    Double klik file installer

2.    Klik Next

3.    Centang:

o   ✅ I accept the agreement

4.    Klik Next terus sampai bagian opsi tambahan

---

⚙️ 3. Centang Opsi Penting (WAJIB)

Pada bagian Select Additional Tasks, centang:

• ✅ Add to PATH (PENTING → supaya bisa dipanggil dari CMD)
• ✅ Add "Open with Code" (klik kanan folder/file)
• ✅ Create Desktop Icon (opsional)

Klik Next → Install

---

🚀 4. Selesai & Jalankan

• Klik Finish
• VS Code akan terbuka

---

🧪 5. Test Instalasi

Buka CMD / Terminal:

code --version

Kalau muncul versi → berarti sukses ✅

---

🔌 6. Install Extension Penting (Untuk Anda)

Karena Anda fokus PHP + MySQL + Python, langsung install ini:

Untuk PHP

• PHP Intelephense
• PHP Debug

Untuk MySQL

• SQLTools

Untuk Python

• Python (by Microsoft)

Cara install:

1.    Buka VS Code

2.    Tekan Ctrl + Shift + X

3.    Cari nama extension → klik Install

---

📁 7. Setting Workspace (Best Practice)

Supaya rapi seperti project Anda:

C:\xampp\htdocs\project-anda

Lalu buka di VS Code:

• File → Open Folder → pilih folder project

---

⚡ Tips Penting (Level Lebih Tinggi)

• Gunakan Terminal bawaan VS Code (Ctrl + ~)
• Integrasikan dengan:
• XAMPP (PHP)
• MySQL
• Python CLI
• Bisa jadi pengganti Notepad++ / Dreamweaver full

---

🎯 Hasil Akhir

Anda sekarang punya:

• Editor modern
• Support PHP, MySQL, Python
• Bisa lanjut ke:
• CRUD PHP
• CRUD Python + MySQL
• AI integration (target Anda)

---

Kalau mau, saya bisa lanjutkan ke tahap berikutnya yang lebih power:

👉 Setup VS Code khusus untuk PHP + MySQL + Python (auto run, debug, live server, dll)
atau
👉 Langsung buat project CRUD di VS Code (step-by-step seperti PHP Anda)

Setup VS Code khusus untuk PHP + MySQL + Python (auto run, debug, live server, dll)

Berikut setup Visual Studio Code agar siap untuk PHP + MySQL + Python dengan workflow modern: auto run, debugging, dan live preview. Saya buatkan seperti lingkungan “semi-IDE” (mendekati Laravel / PyCharm level ringan, tapi fleksibel).

---

⚙️ 1. Struktur Kerja (Best Practice Anda)

Gunakan pola ini supaya rapi dan scalable:

C:\xampp\htdocs\

 ├── php-project\

 ├── python-project\

 └── shared-api\

---

🔌 2. Extension WAJIB (Core Stack)

Tekan Ctrl + Shift + X, install:

🟦 PHP Stack

• PHP Intelephense → autocomplete + intelligence
• PHP Debug → debugging (Xdebug)

🟩 MySQL

• SQLTools
• SQLTools MySQL Driver

🟨 Python

• Python (Microsoft)
• Pylance

🟥 Tambahan (Power Tools)

• Live Server
• Code Runner
• DotENV
• Prettier

---

🐘 3. Setup PHP (XAMPP Integration)

Pastikan:

• XAMPP aktif (Apache + MySQL)

🔧 Setting VS Code

Buka:

File → Preferences → Settings

Cari: php.validate.executablePath

Isi:

{

  "php.validate.executablePath": "C:\\xampp\\php\\php.exe"

}

---

▶️ Auto Run PHP

Gunakan browser:

http://localhost/php-project

Atau klik kanan file:
→ Open with Live Server (untuk HTML + JS ringan)

---

🐞 4. Debug PHP (Xdebug Setup — penting untuk naik level)

Step 1: Edit php.ini (XAMPP)

File:

C:\xampp\php\php.ini

Tambahkan:

[xdebug]

zend_extension="C:\xampp\php\ext\php_xdebug.dll"

xdebug.mode=debug

xdebug.start_with_request=yes

xdebug.client_port=9003

Restart Apache

---

Step 2: Setting VS Code Debug

Buat folder:

.vscode/launch.json

Isi:

{

  "version": "0.2.0",

  "configurations": [

    {

      "name": "Listen for Xdebug",

      "type": "php",

      "request": "launch",

      "port": 9003

    }

  ]

}

---

▶️ Cara Debug

1.    Klik titik merah (breakpoint)

2.    Tekan F5

3.    Jalankan di browser

🔥 Sekarang bisa step-by-step seperti Delphi dulu

---

🗄️ 5. Setup MySQL (Visual Query di VS Code)

Gunakan:
👉 SQLTools

Tambah koneksi:

• Server: localhost
• Port: 3306
• User: root
• Password: (kosong atau sesuai XAMPP)

---

▶️ Query langsung di VS Code

Buat file:

SELECT * FROM alkitab;

Klik:
→ Run Query

---

🐍 6. Setup Python (Modern CLI + DB)

Pilih Interpreter

Tekan:

Ctrl + Shift + P → Python: Select Interpreter

Pilih Python yang sudah Anda install

---

Install library (penting untuk MySQL)

Di terminal VS Code:

pip install mysql-connector-python

---

▶️ Auto Run Python

Klik kanan file:
→ Run Python File

atau:

python app.py

---

🐞 7. Debug Python

Tambahkan launch.json:

{

  "name": "Python Debug",

  "type": "python",

  "request": "launch",

  "program": "${file}"

}

---

▶️ Jalankan Debug

• Klik breakpoint
• Tekan F5

---

🌐 8. Live Server (Frontend + AJAX)

Extension:
→ Live Server

Klik kanan:
→ Open with Live Server

Cocok untuk:

• HTML
• Bootstrap
• AJAX ke PHP API

---

🔁 9. Workflow Terbaik (Rekomendasi Saya untuk Anda)

Karena Anda dari PHP + MySQL:

Mode 1 (Stabil / Produksi)

• PHP → via XAMPP
• MySQL → phpMyAdmin / SQLTools
• Frontend → browser

Mode 2 (Hybrid Modern)

• PHP → API backend
• Python → data processing / AI
• VS Code → semua dikontrol

---

⚡ 10. Bonus: Integrasi PHP + Python + MySQL

Contoh arsitektur:

Frontend (Bootstrap)

   ↓ AJAX

PHP API (CRUD)

   ↓

MySQL

   ↓

Python Script (AI / Analisis)

---

🎯 Hasil Akhir Setup Anda

Sekarang VS Code Anda sudah:

✅ Auto run PHP & Python
✅ Debugging seperti IDE profesional
✅ Query MySQL langsung
✅ Live preview frontend
✅ Siap upgrade ke AI system

---

🚀 Next Level (Saya sarankan ini)

Kalau Anda mau naik level serius, lanjut ke:

👉 Project nyata:

"CRUD PHP + MySQL + Python (AI Search Engine Alkitab / Quran)"

atau

👉 Setup lebih advanced:

• REST API (PHP)
• Python AI (Flask / FastAPI)
• Integrasi ke frontend

---

 

 

 

 

Sumber:  OpenAI/ChatGPT 5 – Percakapan Tanda Diedit