Visual Studio Code (VS Code) tidak secara default mengenali file berformat .shtml (Server Side Includes) sebagai dokumen HTML aktif yang mendukung fitur pratinjau langsung secara bawaan. Untuk mengedit dan melihat hasilnya secara instan, Anda memerlukan ekstensi tambahan dan sedikit konfigurasi pada pengaturan editor agar tag SSI seperti #include dapat diproses dengan benar.
Langkah-Langkah Mengedit File SHTML di VS Code
- Buka aplikasi Visual Studio Code di komputer Anda.
- Tekan kombinasi tombol
Ctrl + Shift + X(Windows/Linux) atauCmd + Shift + X(Mac) untuk membuka menu Extensions. - Ketikkan Live Server pada kolom pencarian, lalu klik tombol Install pada ekstensi yang dibuat oleh Ritwick Dey.
- Ketikkan SHTML pada kolom pencarian extensions untuk menginstal dukungan syntax highlighting tambahan jika diperlukan (opsional).
- Buka folder project web Anda melalui menu File > Open Folder.
- Pilih file berformat
.shtmlyang ingin diedit, lakukan perubahan kode, lalu klik kanan di dalam editor dan pilih Open with Live Server untuk melihat pratinjau di browser.
Konfigurasi Ekstensi File SHTML ke HTML
Agar VS Code memperlakukan file SHTML persis seperti file HTML standar (mendapatkan bantuan autocomplete tag, emmet, dan coloring yang akurat), Anda perlu mendaftarkan asosiasi file di dalam pengaturan settings.json.
{
"files.associations": {
"*.shtml": "html"
}
}Tabel Komparasi Ekstensi Pendukung SHTML di VS Code
| Nama Ekstensi | Fungsi Utama | Tingkat Kinerja |
|---|---|---|
| Live Server | Menjalankan local development server untuk file HTML/SHTML | Sangat Cepat |
| HTML CSS Support | Memberikan autocomplete untuk kelas CSS dan atribut HTML | Cepat |
| Prettier | Auto-formatter untuk menjaga kerapian struktur kode SHTML | Sedang |
Troubleshooting SHTML di Localhost
File SHTML menggunakan teknologi Server Side Includes yang membutuhkan web server aktif (seperti Apache atau Nginx) agar perintah <!--#include virtual="header.shtml" --> dapat dirender dengan sempurna. Jika Anda menggunakan ekstensi Live Server di VS Code, file SHTML akan terbuka sebagai teks statis biasa di browser, sehingga baris kode include tidak akan tampil kecuali Anda menjalankan server lokal berbasis backend seperti PHP, Node.js, atau Apache (XAMPP/WAMP) yang mendukung parsing SSI.