Visual Studio Code (VS Code) tidak menyediakan dukungan bawaan yang mendalam untuk file SHTML (Server Side Includes) out-of-the-box. Agar proses penulisan kode, pratinjau (preview), dan pengelolaan tag SSI seperti <!--#include virtual="..."--> berjalan lancar, Anda memerlukan ekstensi pihak ketiga yang tepat agar editor mengenali sintaksis dan direktif server dengan akurat.
SHTML pada dasarnya adalah file HTML biasa yang diproses oleh server web (seperti Apache atau Nginx) sebelum dikirim ke peramban pengguna untuk mengeksekusi instruksi SSI. Oleh karena itu, ekstensi yang dibutuhkan berkisar pada penyorotan sintaks (syntax highlighting), pelengkapan otomatis (auto-complete), hingga server pengembangan lokal yang mendukung interpretasi SSI.
Daftar Extension VS Code untuk SHTML
Berikut adalah tabel perbandingan ekstensi Visual Studio Code paling andal untuk menangani pengembangan berkas SHTML:
| Nama Ekstensi | Penerbit (Publisher) | Fungsi Utama | Tingkat Kesiapan |
|---|---|---|---|
| HTML CSS Support | RedHat | Memberikan dukungan auto-complete tag HTML standar di dalam file .shtml. | Wajib |
| Live Server | Ritwick Dey | Menjalankan server lokal. Catatan: Memerlukan konfigurasi tambahan untuk mengurai direktif SSI secara native. | Sangat Direkomendasikan |
| Apache Conf | mkloubert | Membantu membaca konfigurasi server yang berkaitan dengan pemrosesan SHTML (.htaccess). | Opsional |
| Files Snippets | Penerbit Komunitas | Menyediakan potongan kode (snippets) cepat untuk tag SSI seperti include dan echo. |
Pendukung |
Langkah Konfigurasi VS Code untuk Berkas SHTML
Agar VS Code memperlakukan ekstensi .shtml sebagai file HTML dan mengaktifkan fitur bantuan penulisan kode secara maksimal, lakukan langkah-langkah teknis berikut:
- Buka pengaturan (Settings) di VS Code dengan menekan kombinasi tombol
Ctrl + ,(Windows/Linux) atauCmd + ,(macOS). - Ketik Files: Association pada kolom pencarian pengaturan.
- Klik Add Item di bawah bagian
files.associations. - Masukkan
*.shtmlpada kolom key danhtmlpada kolom value, lalu klik OK. Pengaturan ini memaksa editor menggunakan parser HTML bawaan untuk berkas SHTML. - Instal ekstensi Live Server dari marketplace untuk mempermudah melihat perubahan kode secara langsung di peramban.
Tips Troubleshooting & Keterbatasan Server Lokal
Kendala utama saat mengembangkan halaman SHTML secara lokal di VS Code adalah ekstensi server pengembangan standar (seperti Live Server berbasis Node.js) tidak secara otomatis mengeksekusi perintah Server Side Includes layaknya server web Apache atau Nginx yang sebenarnya.
Jika direktif <!--#include file="header.html" --> tidak muncul saat pratinjau lokal:
- Pastikan Anda menguji halaman melalui server web yang mendukung SSI aktif (seperti XAMPP dengan Apache yang telah mengaktifkan modul
include_module). - Atur konfigurasi
Options +Includesdi dalam file.htaccesspada direktori proyek lokal Anda. - Gunakan ekstensi berbasis Docker atau integrasi server lokal berbasis PHP/Apache di dalam lingkungan pengembangan lokal Anda demi hasil render SSI yang 100% akurat menyerupai server produksi.