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

Cara Setting VS Code untuk File SHTML & Live Server

Visual Studio Code (VS Code) secara default tidak mengenali ekstensi .shtml sebagai file HTML, sehingga fitur syntax highlighting dan pratinjau otomatis tidak langsung berfungsi. Untuk mengatasinya, Anda perlu menambahkan konfigurasi asosiasi file pada pengaturan editor (settings.json) dan memanfaatkan ekstensi tambahan agar perintah Server Side Includes (SSI) dapat disimulasikan secara lokal.

Ekstensi .shtml biasanya digunakan untuk halaman web yang menerapkan Server Side Includes, teknik modularisasi HTML klasik di mana file seperti header atau footer disisipkan ke dalam halaman utama saat server memproses permintaan. Tanpa konfigurasi yang tepat, editor akan memperlakukannya sebagai teks biasa.

Langkah 1: Konfigurasi File Associations di VS Code

Langkah pertama adalah memerintahkan VS Code agar memperlakukan ekstensi .shtml menggunakan juru bahasa (parser) HTML yang sama. Hal ini memastikan warna kode dan fungsi auto-complete berjalan normal.

  1. Buka VS Code.
  2. Tekan kombinasi tombol Ctrl + , (Windows/Linux) atau Cmd + , (macOS) untuk membuka menu Settings.
  3. Klik ikon ikon lembar kertas kecil di pojok kanan atas bertuliskan Open Settings (JSON).
  4. Tambahkan baris kode berikut ke dalam objek JSON yang sudah ada:
{
  "files.associations": {
    "*.shtml": "html"
  }
}

Simpan file konfigurasi tersebut (Ctrl + S atau Cmd + S). Sekarang, setiap kali Anda membuka file berformat .shtml, VS Code akan otomatis mengenali sintaks HTML di dalamnya.

Langkah 2: Menjalankan SHTML dengan Live Server

Ekstensi bawaan seperti Live Server buatan Ritwick Dey sangat populer untuk pengembangan web statis. Namun, server lokal bawaan Live Server berbasis Node.js tidak memproses sintaks SSI secara native. Berikut adalah tabel komparasi metode menjalankan file SHTML di lingkungan lokal:

Metode / Tools Dukungan SSI (SHTML) Kemudahan Setup Cocok Untuk
VS Code Live Server (Default) Tidak (Hanya HTML statis) Sangat Mudah Hanya tampilan markup dasar
Apache HTTP Server (XAMPP/WAMP) Ya (Native via mod_include) Sedang Simulasi server produksi yang akurat
Node.js SSI Server (Ekstensi alternatif) Ya (Emulasi) Mudah Pengembangan cepat tanpa XAMPP

Menggunakan XAMPP untuk Dukungan SSI Penuh

Jika proyek Anda sangat bergantung pada fungsi <!--#include virtual="..." -->, cara paling akurat adalah menggunakan server lokal Apache yang ada di dalam paket XAMPP.

  1. Unduh dan instal XAMPP dari laman resmi Apache Friends (apachefriends.org).
  2. Buka XAMPP Control Panel dan klik Start pada modul Apache.
  3. Buka file konfigurasi Apache bernama httpd.conf (biasanya terletak di C:\xampp\apache\conf\httpd.conf).
  4. Cari baris yang mengatur direktori root Anda (DocumentRoot) atau direktori proyek, lalu pastikan modul include_module aktif (tidak ada tanda pagar di depannya).
  5. Tambahkan direktif berikut agar Apache mengizinkan eksekusi SSI pada file .shtml:
<Directory "C:/xampp/htdocs">
    Options Indexes FollowSymLinks Includes
    AddType text/html .shtml
    AddOutputFilter INCLUDES .shtml
</Directory>

Simpan konfigurasi, restart server Apache melalui XAMPP Control Panel, lalu letakkan folder proyek SHTML Anda di dalam direktori C:\xampp\htdocs\nama-proyek\.

Troubleshooting Masalah Umum SHTML

Jika tag include Anda tidak tampil di browser saat diakses lewat localhost, perhatikan beberapa poin penting berikut:

  • Path Virtual vs File: Pastikan sintaks penulisan sesuai. Contoh penulisan virtual: <!--#include virtual="/includes/header.shtml" --> yang mengacu pada root direktori server.
  • Ekstensi File: Pastikan file yang dipanggil juga memiliki ekstensi yang benar dan terbaca oleh server.
  • Izin Akses: Pastikan software antivirus atau firewall tidak memblokir port lokal Apache (biasanya port 80).

🔍 Orang Lain Juga Mencari Ini