Visual Studio Code tidak secara native mengeksekusi file SHTML (Server Side Includes) karena file tersebut membutuhkan server HTTP lokal untuk memproses direktif seperti <!--#include virtual="..." -->. Untuk mengatasinya, Anda wajib menggunakan ekstensi server lokal pihak ketiga seperti Live Server atau melakukan konfigurasi manual menggunakan ekstensi berbasis Node.js yang mendukung SSI.
Langkah Cepat Konfigurasi SHTML di Visual Studio Code
Metode paling stabil dan efisien untuk menangani file SHTML saat pengembangan lokal adalah memanfaatkan ekstensi Live Server dengan sedikit penyesuaian pada pengaturan ruang kerja (workspace).
1. Instalasi Ekstensi Pendukung
Buka Visual Studio Code, masuk ke menu Extensions (Ctrl+Shift+X), lalu cari dan instal ekstensi berikut:
- Live Server (oleh Ritwick Dey)
- HTML CSS Support (opsional untuk autocompletion)
2. Konfigurasi Server Lokal
Agar Live Server mengenali format file .shtml sebagai dokumen yang memerlukan pemrosesan HTML, tambahkan pemetaan MIME type atau gunakan server alternatif berbasis Node.js seperti http-server yang mendukung modul SSI jika Live Server standar mengalami kendala pada direktif include yang kompleks.
| Ekstensi VS Code | Fungsi Utama | Dukungan SSI (SHTML) | Tingkat Kesulitan Setup |
|---|---|---|---|
| Live Server | Auto-reload & local server | Terbatas (Tergantung konfigurasi server) | Sangat Mudah |
| http-server (via Terminal) | CLI static web server | Memerlukan modul tambahan | Sedang |
| PHP Server / Apache Local | Full environment server | Penuh (jika diaktifkan di server) | Kompleks |
Contoh Implementasi Kode SHTML
Pastikan struktur direktori proyek Anda benar sebelum melakukan pengujian melalui server lokal. Berikut adalah contoh struktur file:
/project-root
├── index.shtml
└── includes/
├── header.html
└── footer.htmlGunakan sintaks SSI standar di dalam file index.shtml Anda:
<!--#include virtual="/includes/header.html" -->
<main>
<h1>Selamat Datang di Website Lokal</h1>
<p>Konten utama halaman SHTML.</p>
</main>
<!--#include virtual="/includes/footer.html" -->Troubleshooting Masalah SHTML
Jika teks <!--#include...> muncul sebagai teks biasa di browser alih-alih dirender menjadi konten, artinya server lokal Anda tidak mengeksekusi perintah SSI. Solusinya adalah beralih menggunakan server lokal berbasis Apache (seperti XAMPP) atau Nginx yang modul SSI-nya sudah diaktifkan secara aktif, lalu buka proyek melalui lingkungan server tersebut alih-alih menggunakan preview statis biasa.