💡 ULASAN & REFERENSI • DIPERBARUI: 23 October 2026 • REDAKSI AZWINN

Cara Menjalankan File SHTML di Live Server VS Code

Ekstensi Live Server bawaan di Visual Studio Code (VS Code) secara default hanya dirancang untuk melayani dokumen HTML statis. Ketika Anda mencoba membuka file dengan ekstensi .shtml (Server Side Includes), server lokal bawaan ekstensi ini tidak akan memproses tag SSI seperti <!--#include virtual="..." -->, sehingga file akan tampil mentah atau gagal dimuat.

Untuk mengatasi kendala ini, Anda memerlukan penyesuaian konfigurasi pada pengaturan VS Code (settings.json) agar ekstensi Live Server mengenali MIME type .shtml atau beralih menggunakan server lokal alternatif berbasis Node.js yang mendukung SSI secara native seperti http-server atau ekstensi server Apache/Nginx lokal.

Langkah Konfigurasi Live Server untuk File SHTML

Berikut adalah langkah-langkah teknis untuk memastikan ekstensi Live Server (oleh Ritwick Dey) dapat mendeteksi dan melayani file SHTML di workspace Anda:

  1. Buka Visual Studio Code dan pastikan ekstensi Live Server sudah terinstal.
  2. Tekan kombinasi tombol Ctrl + Shift + P (Windows/Linux) atau Cmd + Shift + P (macOS) untuk membuka Command Palette.
  3. Ketik Preferences: Open User Settings (JSON) lalu tekan Enter.
  4. Tambahkan baris kode konfigurasi MIME mapping di dalam objek JSON utama untuk menginstruksikan server agar membaca ekstensi .shtml sebagai teks HTML.
{
  "liveServer.settings.root": "/",
  "liveServer.settings.port": 5500,
  "files.associations": {
    "*.shtml": "html"
  }
}

Tabel Perbandingan Metode Menjalankan SHTML di VS Code

Metode / ToolsDukungan SSI (Server Side Includes)KelebihanKekurangan
Live Server (Ritwick Dey) + MappingTerbatas (Hanya melayani teks, tag SSI tidak diproses server)Ringan, praktis, auto-refresh instanTag #include tidak akan merender file eksternal secara lokal
Ekstensi PHP Server / http-serverPenuh (tergantung konfigurasi modul server)Mendukung eksekusi server-side secara nyataMembutuhkan instalasi runtime tambahan (Node.js/PHP)
XAMPP / Laragon (Apache Lokal)Penuh (Mod_include aktif)Simulasi lingkungan production yang akuratKonfigurasi awal lebih rumit dibanding ekstensi VS Code

Solusi Alternatif Menggunakan Node.js http-server

Karena ekstensi Live Server standar pada VS Code tidak memiliki modul interpreter untuk memproses Server Side Includes (SSI), cara paling akurat untuk mengetes file .shtml secara lokal adalah menggunakan modul http-server dari Node.js yang mendukung flag SSI.

  1. Pastikan Node.js sudah terinstal di sistem operasi Anda.
  2. Buka terminal di dalam VS Code (Ctrl + ~).
  3. Instal utilitas server secara global dengan perintah: npm install -g http-server
  4. Jalankan server dengan mengaktifkan flag SSI pada direktori proyek Anda: http-server --ssi
  5. Buka tautan lokal yang diberikan (biasanya http://localhost:8080) di peramban web Anda.

Troubleshooting Masalah Umum

Jika file SHTML Anda tetap menampilkan teks kode tag include mentah di browser, perhatikan beberapa hal berikut: Pastikan server lokal yang Anda gunakan benar-benar mendukung modul parsing SSI, karena server web statis murni tidak akan mengeksekusi perintah di dalam komentar HTML. Selain itu, periksa kembali jalur (path) pada atribut virtual atau file di dalam tag #include Anda. Jalur yang salah akan menyebabkan error [an error occurred while processing this directive] pada halaman web.

🔍 Orang Lain Juga Mencari Ini