Sebenarnya saya pengguna baru teks editor satu ini. Dari dulu saya lebih sering pake Notepad++ atau Sublime Text. Pernah coba pakai sekitaran 2017 - 2018 awalnya, tapi karena spesifikasi laptop saya dulu ga kuat imannya, saya mengurungkan niat untuk pindah text editor.
Akhirnya setelah beberapa tahun, barulah saya cukup aktif menggunakan VSCode, walaupun berbarengan dengan Notepad++ dan Sublime Text.
Kelebihan yang saya rasa dari VSCode sama text editor yang saya pakai sebelumnya, mungkin lebih menonjol pada kelengkapan ekstensinya.
Walaupun ada kode editor serupa yang punya fitur mirip, namun saya rasa VSCode lebih stabil ketika digunakan.
Ini pengalaman saya menggunakan berbagai text editor, jika ada yang merasa kurang pas, silahkan beri penjelasan di komentar.
Nah, karena dukungan ekstensi yang berlimpah, VSCode punya banyak ekstensi untuk merapikan kode kita secara otomatis.
Biasanya kita suka menulis atau copas kode orang dari internet, indentasi atau jarak spasinya suka ga rapi, atau ga ngepas istilahnya.
Kita bisa saja melakukannya secara manual, dengan manghapus bagian kosong dan merapikannya sedikit, mungkin sudah cukup.
Tapi, bagaimana jika kode yang kita punya panjang? cukup mager dan menyita waktu bukan?
Nah, untuk itu, ada sebuah ekstensi VSCode yang menurut saya cukup oke untuk membantu kita, terutama untuk web programming yang memiliki struktur HTML yang cukup banyak dan kompleks.
Beautify
Dari namanya aja sudah bisa ditebak. Ekstensi ini berguna untuk merapikan kode kita dengan caranya sendiri.
Selama penggunaan, saya suka, walaupun kadang tidak pas dengan kemauan saya. Ini balik lagi ke pribadi masing-masing, karena setiap programmer punya gaya sendiri dalam menulis kode.
Biar teman-teman bisa liat cara kerjanya, saya coba copas template dasar dari Bootstrap kemudian merapikannya menggunakan Beautify.
Kode yang saya copas dari Bootstrap:
Hasil dari menggunakan Beautify:
Apakah teman-teman bisa melihat perbedaanya? Ada kan?
🐰 : “Ah, ga ada gunanya, ga terlalu beda. Mending rapihin sendiri”
🐔: “Ya, kalo sedikit kaya diatas mah bisalah. Kalo nanti dah banyak sampe 1000 baris lebih, baru tau rasa lu!”
— dan percakapan berakhir..
Okeh, cukup.
Silahkan instal ekstensinya di VSCode, kemudian kita akan coba sedikit menyetel agar bisa digunakan.
Mengatur Beautify di VSCode
Buka VSCode, dan tekan tombol CTRL + SHIFT + P kemudian pilih tanda “gear” disamping kanan beautify selection
Jika sudah, akan menuju tampilan ini :
Langkah selanjutnya, silahkan klik tanda + di samping tulisan Beautify selection
Akan ada sebuah jendela baru seperti ini:
Nah, pada jendela baru itu, kita akan memberi sebuah “shortcut” atau kombinasi tombol agar beautify bekerja.
Misal saya ingin buat kombinasi tombol CTRL + SHIFT + P seperti ini :
Jika ada muncul pesan .. existing commands have this keybinding artinya kombinasi tombol yang itu sudah ada fungsi lain di kombinasi itu. Contoh lain seperti CTRL + B yang sudah dipakai VSCode secara default untuk menutup dan membuka sidebar.
Nah, untuk itu, silahkan coba-coba agar tidak ada pesan seperti begitu.
Misalnya, di VSCode saya pakai kombinasi CTRL + , + CTRL + .
Jika teman-teman juga ingin menggunakan kombinasi yang sama seperti punya saya, silahkan tahan tombol CTRL kemudian tekan tombol , dan .
Setelah itu, tekan tombol Enter untuk menyimpan.
Jika berhasil, kurang lebih tampilannya seperti ini :
Sampai sini, settingan Beautify-nya sudah siap digunakan!
Namun sebelum itu, silahkan pilih menu File kemudian pilih Preferences dan pilih Settings untuk masuk ke pengaturan VSCode. Bisa juga meggunakan shortcut CTRL + ,
Pilih pengaturan Text Editor — pilih menu Formatting — dan ikuti seperti ini :
Untuk mencoba apakah berhasil, lakukan pengujian seperti apa yang saya lakukan diatas dengan copas kode HTML dari template dasar Bootstrap.
Buka file dengan kode HTML yang masih tidak beraturan, kemudian tekan kombinasi yang sudah kita buat tadi yaitu: tahan tombol CTRL diikuti dengan menekan tombol , dan .
— apakah work? semoga yak. wkwkwkwk.
Kalo ada yang mengalami masalah, silahkan tulis di komentar yak 🖐