Code Editor

Fitur Code Editor Untuk Mempercepat Pekerjaan Koding.

Pinterest LinkedIn Tumblr

Sebagai seorang frontend developer atau pengembang website yang sebagian besar waktunya digunakan untuk menulis ratusan atau ribuan baris kode, code editor adalah tools utama untuk menunjang kegiatan ngoding sehari-hari.

Code editor sangat berperan penting bagi programmer terlepas apapun bahasa pemrograman yang digunakan, dan software code editor tertentu memang sudah dirancang sedemikian rupa untuk digunakan menulis kode program dengan segudang fiturnya.

Salah satu software code editor yang paling populer digunakan yaitu Visual Studio Code/VS Code dan pada artikel kali ini saya ingin membagikan beberapa trik shortcut yang biasa saya gunakan untuk mempercepat pengerjaan ngoding. Sebenarnya pada VS Code sendiri ada banyak sekali fungsi shortcut yang bisa kita gunakan, namun saya akan menjelaskan beberapa saja yang paling sering digunakan beserta manfaatnya. 

1. Find and Replace

Fitur find and replace ini sama seperti artian judulnya, yaitu untuk mencari dan mengganti sebuah karakter yang terdapat pada halaman kerja code editor. Shortcut yang digunakan (Cmd + F/ Ctrl F).

Fitur Code Editor Untuk Mempercepat Pekerjaan Koding.
Tampilan fitur Find and Replace

Fitur ini lumayan sering digunakan untuk mencari text atau karakter yang ada pada halaman kerja editor dan merubahnya dengan karakter lain sesuai yang kita inginkan (Cmd + Option + F/ Ctrl + H).

Untuk penggunaan yang lebih powerfull kamu juga bisa masuk ke menu search pada bagian sidebar VS Code atau bisa menggunakan (Shift+Cmd+F/ Shift+Ctrl+F).  Dengan menggunakan fitur search ini kamu bisa melakukan pencarian karakter tertentu dalam lingkup project yang kamu buka, misalkan kamu ingin merubah semua konten yang berada dalam satu elemen <footer>….</footer> dan menggantinya secara bersamaan dengan semua file yang memiliki elemen serupa. 

Fitur Code Editor Untuk Mempercepat Pekerjaan Koding.
Fitur Search untuk melakukan Multiple Replace dalam satu project files

2. Find Line

Fitur find line paling sering digunakan ketika melakukan debuging, jadi ketika kamu ingin menemukan salah satu baris kode yang ingin kamu temukan pada file projectmu, kamu akan dapat menemukan baris code tersebut dengan cepat tanpa perlu repot scroll pada file project yang dituju.

Contohnya ketika kamu sedang inspect element pada browser saat mengerjakan project website dan ingin mengidentifikasi baris css tertentu di dalamnya, lalu cari keterangan baris  pada properti tersebut.

Fitur Code Editor Untuk Mempercepat Pekerjaan Koding.
Tampilan inspect element browser

Selanjutnya kamu bisa langsung masuk pada file projectmu dan tekan shortcut (Ctrl+G) pada code editor dan ketikan baris line yang sudah kamu dapatkan sebelumnya pada browser, dan kamu akan langsung diarahkan pada line tersebut.

Fitur ini dapat berjalan pada berbagai tipe file (CSS, JS, PHP, dll), asalkan kamu tahu line berapa yang akan kamu tuju.

3. Shrink atau Expand selection

Pernahkah kamu dengan sengaja ingin menseleksi keseluruhan konten dalam elemen tertentu? jika ya, maka dengan shortcut satu ini kamu akan semakin terbantu. Shrink atau Expand selection memungkinkan kita untuk menseleksi sebuah elemen dalam urutan terdalam pada sebuah komponen elemen dan naik satu tingkat secara berurutan sesuai hiraki elemen tersebut.

Shortcut yang digunakan yaitu (Ctrl + Shift + ←) dan (Ctrl + Shift + →). Namun dalam penggunaanya sendiri saya memodifikasi kombinasi shortcut tersebut agar lebih nyaman digunakan (Cmd+Shift+a), kamu tidak harus mengganti format bawaan shortcut ini, karena ini hanya preferensi saya pribadi.

Sebagai catatan, saya pernah mengalami bugs pada penggunaan shortcut ini dikarenakan penggunaan salah satu custom theme plugin yang saya terapkan pada VS Code. Biasanya jika kamu menginstal theme plugin, maka warna dari tiap elemen koding pada code editormu akan ikut berubah menyesuaikan dengan tema yang dipilih, ternyata hal tersebut dapat menyebabkan fungsi shorcut ini tidak bekerja dengan semestinya.

Hal tersebut sempat membuat pekerjaan ngoding saya menjadi sedikit terhambat karena tanpa menggunakan shortcut tersebut, saya terpaksa menseleksi secara manual ketika melakukan proses editing konten dan seleksi element tertentu pada dokumen HTML dan itu memakan waktu lebih lama ketimbang menggunakan shortcut ini. Maka berhati-hatilah dalam memilih plugin theme yang akan kamu gunakan.

4. Custom Shortcut

Pada dasarnya semua fungsi pada VS Code itu sudah terdapat built-in shortcut di dalamnya yang jumlahnya cukup banyak. Namun diantara semua shortcut tersebut mungkin hanya 10-20% saja yang paling sering kamu gunakan, dan fungsi shortcut tersebut bisa kamu rubah dari settingan defaultnya agar lebih mudah kamu ingat dan lebih sederhana penggunaannya.

Seperti contoh untuk shortcut Shrink atau Expand Selection pada VS Code saya rubah menjadi (Cmd+Shit+a) dari default, karena lebih simpel dan mudah digunakan. Untuk merubah setting shortcut kamu bisa mengkasesnya menggunakan IntelliSense (Cmd + Shift + P/ Ctrl + Shift + P), lalu ketikan saja keyboard shortcuts.

intellisense visual studio
Tampilan fitur IntelliSense pada VS Code

Setelah menu keyboard shortcut terbuka maka kamu bisa melihat semua shortcut function yang terdapat pada VS Code.  Untuk dapat merubah setting shortcut tertentu kamu tinggal pilih saja shortcut mana yang ingin kamu customize, lalau arahkan kursor pada bagian kiri nama shortcut tersebut dan akan keluar popup, kemudian kamu bisa langsung ketikan shortcut baru yang kamu inginkan.

Fitur Code Editor Untuk Mempercepat Pekerjaan Koding.
Tampilan keyboard shortcut menu pada VS Code

5. Close Workspace

Ada kalanya kamu ingin menutup satu project workspace yang kamu buka dan menggantinya dengan satu file project yang baru. Kamu bisa menggunakan fitur Close Folder untuk menutup file project yang sedang kamu buka dan menggantikannya dengan file project yang kamu inginkan.

Fitur ini bisa kamu akses di File > Colse Folder, dan untuk penggunaan fitur ini saya menggantinya dengan shortcut (Ctrl + Option + W), untuk menggantinya kamu bisa akses langsung di shortcut preference dan ketikan Workspace: Close Workspace dan ketikan shortcut baru yang kamu inginkan.

Fitur Code Editor Untuk Mempercepat Pekerjaan Koding.
Tampilan pencarian shortcut Workspace pada VS Code

Sebenarnya ada pilihan lain yang lebih sederhana ketimbang menggunakan shortcut ini, dimana kamu bisa langsung saja open new window atau open workspace, namun dalam kondisi tertentu saya rasa shortcut ini akan sangat berguna jika saya ingin mengerjakan project baru dengan hanya menggunakan satu workspace saja agar tidak memenuhi tampilan screen pada layar komputer.

6. Code Snippet

Code snippet adalah fitur atau fungsi dimana kamu dapat membuat shortcut untuk menampilkan baris code yang dapat kita gunakan berulang kali dan dapat kita kostumisasi sesuai dengan kebutuhan dan bahasa pemrograman yang digunakan.
Untuk membuat code snippet kamu bisa akses melalui IntelliSense (CMD + Shift + P) lalu ketikan snippet, lalu kamu bisa pilih New Snippets, atau melalui Preferences > User Snippet.

Fitur Code Editor Untuk Mempercepat Pekerjaan Koding.
Menu User Snippets pada VS Code

Fitur Code Editor Untuk Mempercepat Pekerjaan Koding.
Pilihan Snippet menggunakan IntelliSense

Cara membuatnya sendiri cukup mudah, pertama-tama kamu tentukan terlebih dahulu snippet yang akan dibuat, seperti contoh saya akan membuat snippet untuk membuat href yang terdapat properti html target di dalamnya, dan untuk contoh ini saya terapkan pada global scope snippet.

  1. Tuliskan nama snippet pada bagian “Print to console”, kemudian pada pilihan “scope” tulis atau pilih bahasa bahasa pemrograman yang diinginkan
  2. Pada “prefix” tentukan kata yang akan digunakan untuk memanggil snippet, usahakan nama yang singkat dan mudah diingat
  3. Kemudian pada bagian “body” tuliskan baris kode. Pada saat penulisan kode yang memiliki simbol kutip, gunakan backslash sebagai fungsi escape, kamu juga bisa memberikan fungsi tab stop dengan menambahkan lambang $1, $2, $3, dst, fitur ini berguna untuk menentukan posisi pointer ketika snippet dimunculkan.
  4. Terakhir kamu bisa berikan deskripsi untuk snippet yang sudah kamu buat, namun ini sifatnya opsional saja.

Karena jenis snippet yang saya contohkan ini adalah snippet global, maka jika kamu ingin menambahkan snippet baru, kamu cukup tambahkan pada line baru di bawahnya pada kurawa penutup dan jangan lupa memberi koma untuk setiap baris snippet baru.

Kelebihan menggunakan scope global adalah snippet yang kamu buat berada dalam satu file snippet sehingga kamu dapat dengan mudah mencari dan memodifikasinya di kemudian hari jika diperlukan.

Berikut contoh gabungan snippet yang saya buat sendiri;

{
	"Link Default With Target": {
		"scope": "html,php,javascript,typescript",
		"prefix": "atar",
		"body": [
			"<a href=\"$1\" target=\"_blank\">$0</a>"
		],
		"description": "a href and atrribute"
	},
	"Form Attribute": {
		"scope": "html,php,javascript,typescript",
		"prefix": "formel",
		"body": [
			"<label>",
			"\t${3:Username}",
			"\t<input type=\"${1:text}\" name=\"${2:username}\">",
			"</label>",
		],
		"description": "Label and input"
	},
	"From Default": {
		"scope": "html,php,javascript,typescript",
		"prefix": "formhead",
		"body": [
			"<form action=\"$1\" method=\"${2|post,get|}\">",
			"\t$3",
			"</form>"
		],
		"description": "Form wrap"
	},
}

Untuk dapat mengetahui semua shortcut yang terdapat pada VS Code kamu bisa melihatnya dalam list tabel berikut:

  1. Keyboard Shortcut for MacOS
  2. Keyboard Shortcut for Windows

Sebenarnya ada banyak fitur yang tersedia pada VS Code namun dengan memahami fungsi shortcut dan beberapa fitur pada VS Code tersebut, pekerjaanmu ngoding kamu akan semakin terbantu, namun selain hal yang sudah saya jelaskan di atas, pengalaman-lah yang akan membuat proses kerja ngodingmu akan semakin efisien dari waktu ke waktu.

Jika kamu memiliki pertanyaan atau ingin share seputar pengalamamu menggunakan code editor, kamu bisa isikan di kolom komentar dan saya akan dengan senang hati membantu. Terima Kasih 🙂

Hallo kawan-kawan semua nama saya Dwi Priyatmoko, content creator sekaligus co-founder blog BackslashID. Saya seorang Web Designer yang juga menyukai ilmu seputar User Experience. Diluar kegiatan ngoding dan desain, saya hobi melakukan olahraga outdor taril run dan juga bermain game mobile. Kebetulan saat ini juga tertarik pada custom mechanical keyboard.

Write A Comment