Blogging sambil coding dengan SSG Hugo enaknya di app Visual Studio Code. Editor VS Code sudah auto built in dengan Emmet, plugin snippet untuk mempercepat penulisan sintag html.

Hugo di program dengan bahasa Golang.

Untuk mencampuraduk sintak html dengan sintak template engine Hugo, perlu install sebuah ektensi khusus agar ‘perkawinan’ antara Go dengan HTML akur, sintagnya tidak berantakan.

Sebenarnya biar lebih enak dilihat saja.

Nama extensions-nya: “gotemplate-syntax Language support for go text/template” karya Casualjim.

https://marketplace.visualstudio.com/items?itemName=casualjim.gotemplate

Setelah mengaktifkan ektensi tersebut, file .html template Hugo yang setubuh dengan sintak go di VS Code auto mendeteksi Language Mode ke pilihan bahasa Golang HTML Template.

Coding dalam mode bahasa Golang HTML Template, emmet snippet tidak berfungsi.

Solusinya adalah, dengan menambah emmet.includeLanguages di dalam setting app Visual Code.

Buka Preferences lalu pilih Setting atau tekan Ctrl+Comma. Di macOS tekan tombol Command+Comma.

Di bagian dashboard Setting VS Code, cukup ketik emmet include di kolom search.

Klik tombol Add Item. Di kolom key Item: insert gohtml, di kolom Value insert: html. Ok.

Atau bisa juga melalui edit settings.json VS Code.

"emmet.includeLanguages": {
	"gohtml": "html"
}

Untuk hasil paripurna, pastikan di dalam file settings.json, code lengkapnya seperti berikut ini.

/*	Code "files.associations" biasanya aktif 
	setelah menginstall extensi 'gotemplate-syntax'.
*/ 
"files.associations": {
	"*.html": "gohtml"
},
// ⤷ Copas saja code ini, bila tidak auto aktif.

"emmet.includeLanguages": {
	"gohtml": "html"
}

Utak atik template Hugo jadi lebih asyik, bukan?