1️⃣ Download & Install Node.js
-
Buka website resmi https://nodejs.org/
👉 https://tailwindui.com/preview
2️⃣ Tailwind Components (Gratis & Open Source)
👉 https://tailwindcomponents.com/
-
Kumpulan komponen dari komunitas
-
Ada navbar, button, card, modal, dll.
3️⃣ Flowbite (Gratis + Premium)
👉 https://flowbite.com/
-
Komponen gratis cukup banyak: tombol, form, modal, dll.
-
Bisa pakai tanpa registrasi
4️⃣ DaisyUI (Framework UI di atas Tailwind, Gratis!)
👉 https://daisyui.com/
-
Komponen seperti button, card, alert, modal semua gratis
5️⃣ Tailblocks (Template Siap Pakai)
👉 https://tailblocks.cc/
-
Drag & drop layout siap pakai
-
Full gratis dan open-source
✅ Ekstensi Wajib untuk Laravel di VS Code
1️⃣ PHP Intelephense 🟢 (Wajib untuk PHP Auto-Complete & IntelliSense!)
🔹 Nama: PHP Intelephense
🔹 Pasang dari marketplace:
👉 https://marketplace.visualstudio.com/items?itemName=bmewburn.vscode-intelephense-client
🔹 Fitur:
✅ Auto-complete untuk kode PHP
✅ Highlight syntax & IntelliSense
✅ Bisa dipakai untuk Laravel dan framework PHP lainnya
2️⃣ Laravel Blade Snippets 🎨 (Auto-Complete untuk Blade Templates!)
🔹 Nama: Laravel Blade Snippets
🔹 Pasang dari marketplace:
👉 https://marketplace.visualstudio.com/items?itemName=onecentlin.laravel-blade
🔹 Fitur:
✅ Highlight syntax untuk Blade (.blade.php
)
✅ Auto-complete directive Blade (@foreach
, @if
, @csrf
, dll.)
✅ Support untuk Tailwind & Bootstrap
3️⃣ Laravel Artisan ⚡ (Jalankan Artisan Command dari VS Code!)
🔹 Nama: Laravel Artisan
🔹 Pasang dari marketplace:
👉 https://marketplace.visualstudio.com/items?itemName=ryannaddy.laravel-artisan
🔹 Fitur:
✅ Jalankan Artisan langsung dari VS Code
✅ Bisa buat model, controller, migration dengan cepat
✅ Tidak perlu buka terminal manual
4️⃣ Laravel Extra Intellisense 🧠 (Auto-Complete untuk Laravel Methods!)
🔹 Nama: Laravel Extra Intellisense
🔹 Pasang dari marketplace:
👉 https://marketplace.visualstudio.com/items?itemName=amiralizadeh9480.laravel-extra-intellisense
🔹 Fitur:
✅ Auto-complete untuk metode Eloquent (User::where()
, Post::find()
, dll.)
✅ IntelliSense untuk routing, middleware, config Laravel
5️⃣ PHP Debug 🐞 (Debugging Laravel di VS Code!)
🔹 Nama: PHP Debug
🔹 Pasang dari marketplace:
👉 https://marketplace.visualstudio.com/items?itemName=xdebug.php-debug
🔹 Fitur:
✅ Bisa debugging langsung di VS Code
✅ Set breakpoint & inspect variabel
✅ Membantu tracing error dengan mudah
6️⃣ Tailwind CSS IntelliSense 🌈 (Auto-Complete Tailwind di Blade!)
🔹 Nama: Tailwind CSS IntelliSense
🔹 Pasang dari marketplace:
👉 https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss
🔹 Fitur:
✅ Auto-complete class Tailwind
✅ Highlight Tailwind CSS di Blade
✅ Untuk merapikan kode di VS Code, kamu bisa install ekstensi berikut:
🔥 1️⃣ PHP Intelephense (Sudah Direkomendasikan Sebelumnya)
🔹 Nama: PHP Intelephense
🔹 Pasang:
👉 https://marketplace.visualstudio.com/items?itemName=bmewburn.vscode-intelephense-client
🔹 Fitur:
✅ Auto-format kode PHP secara otomatis
✅ Bisa digunakan untuk Laravel
Cara pakai:
Tekan Shift + Alt + F
untuk langsung merapikan kode PHP
🎨 2️⃣ Laravel Blade Formatter (Untuk File .blade.php
)
🔹 Nama: Laravel Blade Formatter
🔹 Pasang:
👉 https://marketplace.visualstudio.com/items?itemName=shufo.vscode-blade-formatter
🔹 Fitur:
✅ Auto-format kode di file Blade (.blade.php
)
✅ Menata indentasi dan struktur Blade agar lebih rapi
Cara pakai:
Tekan Shift + Alt + F
saat berada di file Blade
- - -
0 Reviews:
Posting Komentar