Bismillahirrahmanirrahim.
VS Code atau Visual Studio Code merupakan alat pemrograman dasar untuk mengedit kode program komputer. Aplikasi ini dikembangkan oleh Microsoft untuk bekerja pada sistem operasi atau yang kita kenal sebagai operating system yaitu Windows, GNU/Linux, dan Mac. VS Code juga merupakan gratisware (gratis software) karena termasuk dalam jenis nonfree software. Khusus untuk GNU/Linux, aplikasi ini dikembangkan oleh Github dan berlisensi MIT yang termasuk dalam lisensi Free Software dengan nama VS Codium. VS Code ini bisa diakses disini https://code.visualstudio.com/download dan VS Codium bisa diakses disini https://github.com/VSCodium/vscodium.
Pada kesempatan kali ini, kami akan berbagi beberapa tips dan trik untuk para developer dalam bekerja pada Software Visual Studio Code. Hal yang kalian harus lakukan terlebih dahulu adalah buka aplikasi Visual Studio Code kemudian menyimpan file tersebut dengan *.html sebagai tipe datanya (untuk pembahasan kali ini kita akan berfokus pada Hyper Text Markup Language). Misalkan namafile.html.
Berikut 5 tips dan trik yang harus kalian ketahui saat bekerja di VS Code beserta penjelasannya.
- Mengetik elements pada text editor
Penulisan element berupa html yang diberikan tanda kutip dua tentu berbeda dengan penulisan html saja. Hal yang membedakannya ialah ketika kita mengetik “html” kemudian menekan enter maka VS Code akan menyadari bahwa ini merupakan file HTML sehingga yang akan muncul seperti gambar berikut.
Sedangkan apabila kita hanya menuliskan html maka yang akan muncul html opening dan closing tag seperti gambar berikut
Tidak hanya html element, tetapi hal ini juga berlaku pada head element, title element, body element, dan yang lainnya dengan catatan tetap sesuai dengan strukturnya. Seperti yang tampak berikut ini.
Untuk element tags yang berisikan atributpun berlaku perintah ini.
- Membuat Emmet Snippets
Jika pembahasan diatas hanya dapat membuat <html></html> atau <body></body> atau apapun itu sebanyak satu pasang tags. Maka di VS Code kita dapat membuat Emmet Snippets yang mampu membuat tags sebanyak yang kita inginkan. Caranya cukup mudah yaitu menuliskan perintah seperti diatas lalu dikali dengan jumlah tags yang akan kita buat. Misal html*3 seperti pada gambar berikut ini
Dengan menekan enter maka hasilnya akan seperti ini
Kalian dapat mencoba sintaks yang lainnya - Mengembangkan Emmet abbreviations dan Snippets
Tidak hanya sampai disitu, Emmet Snippets dapat dikembangkan lebih jauh lagi yaitu dengan cara menuliskan sintaks berikut
Setelah menekan enter maka hasilnya akan seperti pada gambar berikut ini
Tidak hanya itu, apabila kalian masih ingin cara mudah dalam menuliskan sintaks diatas maka cukup menuliskan kode seperti berikut
Setelah menekan enter, maka kode akan otomatis menampilkan seperti pada gambar berikut ini
- Membuat Zen Mode
Zen Mode adalah perintah ketika kita hanya ingin berfokus pada kode tanpa terganggu dengan tampilan lainnya. Caranya cukup mudah, kita tinggal pilih View > Appearance > Toggle Zen Mode
Apabila kalian kurang nyaman dengan Zen Mode maka untuk mengembalikannya seperti tampilan semula adalah dengan cara menekan esc sebanyak dua kali dan tampilan editor kalian akan kembali seperti semula. - Mengganti suatu kata dengan kata yang lain secara otomatis
Tentu kita mengenal perintah replace seperti yang ada di Microsoft word, Microsoft excel dan sebagainya. Hal ini juga bisa dilakukan di VS Code dengan cara mengklik search icon yang ada di bagian sebelah kiri teks editor atau bisa juga dengan menekan Ctrl+Shift+F sehingga akan muncul sebagai berikut.
Kalian bisa mengklik toggle replace yang berbentuk segitiga disamping tempat pencarian kata agar muncul tempat untuk menuliskan kata yang akan kita ubah nantinya. Sehingga akan muncul seperti pada gambar berikut.
Misalkan kata yang kita akan ubah adalah “html” menjadi “hmtl” maka tuliskan html pada search input dan hmtl pada replace input dan jangan lupa untuk menekan replace all yang berada tepat disampingnya. Apabila muncul kotak dialog yang meminta persetujuan kalian untuk replace maka silahkan tekan replace. Sehingga tampak seperti pada gambar berikut.
Sehingga secara otomatis semua tulisan html akan berubah menjadi hmtl.
Itulah 5 tips dan trik yang harus kalian ketahui sebagai para developer agar dapat memanfaatkan waktu dengan baik saat bekerja di VS Code. Semoga bermanfaat!