25 Keyboard Shortcut VS Code Paling Berguna untuk Coding Lebih Cepat

25 Keyboard Shortcut VS Code Paling Berguna untuk Coding Lebih Cepat

Ringkasan

Keyboard shortcut VS Code membantu programmer membuka file, mengedit kode, melakukan pencarian, menjalankan terminal, dan memperbaiki error tanpa terlalu sering menggunakan mouse. Tutorial ini ditujukan untuk pemula maupun programmer yang ingin bekerja lebih cepat menggunakan Visual Studio Code di Windows, Linux, atau macOS.

Setelah mengikuti tutorial ini, Anda akan mengenal 25 shortcut yang benar-benar berguna, memahami cara penggunaannya, dan memiliki rencana latihan selama tujuh hari agar shortcut tersebut lebih mudah diingat.

Prasyarat

• Visual Studio Code sudah terpasang di komputer.
• Memahami penggunaan dasar file dan folder di VS Code.
• Memiliki project latihan sederhana, misalnya HTML, CSS, JavaScript, PHP, atau bahasa pemrograman lain.
• Shortcut menggunakan pengaturan bawaan VS Code. Extension, keymap, susunan keyboard, atau perubahan pada keybindings.json dapat membuat kombinasinya berbeda.

Cara Membaca Keyboard Shortcut

• Tanda + berarti tombol ditekan secara bersamaan. Contoh: Ctrl + P.
• Shortcut berurutan atau chord ditekan satu per satu. Contoh: tekan Ctrl + K, lepaskan, kemudian tekan Ctrl + S.
• Pada macOS, Cmd berarti tombol Command dan Option berarti tombol Option atau Alt.

Langkah 1: Membuka Perintah dan Berpindah File

1. Membuka Command Palette

Command Palette merupakan pusat perintah VS Code. Hampir semua fitur dapat dijalankan dari sini hanya dengan mengetik nama perintah.

Contohnya, tekan shortcut tersebut, ketik Format Document, kemudian tekan Enter. Cara ini juga dapat digunakan untuk mencari perintah Git, membuka Settings, mengganti tema, dan menjalankan berbagai fitur extension.

2. Membuka File dengan Quick Open

Gunakan Quick Open untuk mencari file berdasarkan namanya tanpa membuka folder satu per satu melalui Explorer. Pada project besar, shortcut ini dapat menghemat banyak waktu.

Sebagai contoh, ketik UserController untuk mencari dan membuka file UserController.php.

3. Berpindah Antar-file yang Sedang Terbuka

Tahan tombol pertama, lalu tekan Tab untuk memilih file yang baru saja digunakan. Fungsinya mirip Alt + Tab, tetapi digunakan untuk berpindah antar-editor di dalam VS Code.

4. Kembali dan Maju ke Lokasi Sebelumnya

Shortcut ini sangat membantu setelah membuka definisi fungsi atau berpindah ke file lain. Gunakan perintah kembali untuk pulang ke lokasi kode sebelumnya dan perintah maju untuk kembali ke lokasi berikutnya.

5. Pergi ke Nomor Baris

Masukkan nomor baris lalu tekan Enter. Fitur ini berguna ketika pesan error menyebutkan lokasi tertentu, misalnya UserModel.php:128.

Langkah 2: Mengedit Kode Lebih Cepat

6. Memindahkan Baris ke Atas atau Bawah

Letakkan kursor pada satu baris atau pilih beberapa baris, kemudian gunakan shortcut untuk memindahkan kode tanpa melakukan cut dan paste.

7. Menggandakan Baris

Shortcut ini berguna ketika membuat elemen HTML, properti CSS, data array, atau struktur kode dengan pola yang hampir sama.

8. Menghapus Satu Baris

Anda tidak perlu menyeleksi seluruh baris. Letakkan kursor pada baris yang ingin dihapus lalu tekan shortcut tersebut.

9. Menambahkan Baris Baru di Atas atau Bawah

Kursor tidak harus berada di ujung baris. VS Code langsung membuat baris baru pada posisi yang dipilih.

10. Mengaktifkan atau Menonaktifkan Komentar

VS Code akan menambahkan atau menghapus komentar sesuai bahasa file. Pilih beberapa baris terlebih dahulu apabila ingin mengomentari satu blok kode sekaligus.

11. Memformat Seluruh Dokumen

Format Document merapikan indentasi dan susunan kode menggunakan formatter yang aktif. Untuk mendapatkan hasil konsisten, gunakan formatter yang sesuai dengan bahasa pemrograman dan tentukan formatter default pada project.

12. Menampilkan Saran Kode atau IntelliSense

Gunakan ketika saran properti, method, variabel, parameter, atau snippet tidak muncul secara otomatis. Pada beberapa komputer, kombinasi ini dapat berbenturan dengan shortcut pergantian bahasa keyboard pada sistem operasi.

13. Memperbesar atau Memperkecil Seleksi

Seleksi akan berkembang berdasarkan struktur kode, mulai dari kata, ekspresi, parameter, blok, sampai lingkup yang lebih besar. Cara ini biasanya lebih presisi daripada menyeret mouse.

14. Mengaktifkan atau Menonaktifkan Word Wrap

Baris kode yang panjang akan dibungkus agar tetap terlihat di layar. Word Wrap hanya mengubah tampilan dan tidak mengubah isi file.

Langkah 3: Mengedit Banyak Bagian dengan Multi-cursor

15. Memilih Kemunculan Berikutnya

Pilih sebuah kata, lalu tekan shortcut berulang kali untuk menambahkan kata yang sama berikutnya ke dalam seleksi. Ketika mengetik, semua lokasi terpilih akan berubah bersamaan.

16. Memilih Semua Kemunculan Teks yang Sama

Gunakan untuk mengedit semua kemunculan teks yang sedang dipilih. Pastikan istilah tersebut memang boleh diubah di seluruh file. Untuk mengganti nama variabel, fungsi, atau class secara aman berdasarkan struktur kode, gunakan Rename Symbol dengan F2.

17. Menambahkan Kursor di Atas atau Bawah

Shortcut ini cocok untuk mengisi beberapa baris dengan pola vertikal. Pada beberapa desktop Linux, kombinasinya mungkin sudah digunakan oleh sistem operasi.

18. Menambahkan Kursor Menggunakan Mouse

Tahan tombol modifier lalu klik beberapa lokasi. Setiap klik akan menambahkan kursor baru.

Langkah 4: Mencari dan Mengganti Kode

19. Mencari atau Mengganti dalam File Aktif

Gunakan pilihan Match Case, Whole Word, atau Regular Expression jika membutuhkan hasil pencarian yang lebih spesifik.

20. Mencari atau Mengganti di Seluruh Project

Sebelum menekan Replace All, periksa daftar hasil dan gunakan kolom files to include atau files to exclude agar perubahan tidak mengenai file yang salah.

Langkah 5: Navigasi, Refactoring, dan Perbaikan Error

21. Membuka Definisi Kode

F12 membuka lokasi deklarasi fungsi, class, method, atau variabel. Peek Definition menampilkannya dalam jendela kecil sehingga Anda tidak perlu meninggalkan file aktif.

22. Mengganti Nama Symbol dengan Aman

Rename Symbol memahami struktur kode melalui language service. Oleh karena itu, untuk mengganti nama method, class, fungsi, atau variabel, F2 biasanya lebih aman daripada pencarian dan penggantian teks biasa.

23. Membuka Quick Fix

Gunakan ketika VS Code menampilkan garis merah, kuning, atau ikon lampu. Pilihan yang muncul dapat berupa import otomatis, perbaikan syntax, atau refactoring, bergantung pada bahasa dan extension yang aktif.

24. Berpindah ke Error atau Peringatan

Shortcut ini membuat pemeriksaan error lebih cepat karena editor langsung berpindah ke lokasi masalah berikutnya atau sebelumnya.

Langkah 6: Menggunakan Terminal dan Debugger

25. Membuka Terminal Terintegrasi

Tombol backtick biasanya berada di bawah tombol Esc. Gunakan terminal terintegrasi untuk menjalankan Composer, Git, npm, PHP Spark, atau perintah project lain tanpa meninggalkan VS Code.

Shortcut Tambahan yang Layak Dihafal

Langkah 7: Latihan Selama Tujuh Hari

Jangan mencoba menghafal semua shortcut sekaligus. Gunakan pembagian latihan berikut saat mengerjakan project nyata.

Kartu Pengingat Shortcut VS Code

Simpan atau tempel daftar singkat berikut di dekat monitor selama masa latihan:

Cara Mengubah Keyboard Shortcut VS Code

1. Tekan Ctrl + K, lalu Ctrl + S pada Windows/Linux atau Cmd + K, lalu Cmd + S pada macOS. 2. Cari nama perintah yang ingin diubah. 3. Klik dua kali pada shortcut atau pilih ikon pensil. 4. Tekan kombinasi tombol baru, kemudian tekan Enter. 5. Jika terjadi benturan, klik kanan shortcut dan pilih Show Same Keybindings.

Pengguna tingkat lanjut dapat membuka keybindings.json melalui tombol Open Keyboard Shortcuts (JSON). Namun, editor visual biasanya sudah cukup untuk kebutuhan sehari-hari.

Pengujian: Memastikan Shortcut Berfungsi

Uji shortcut pada sebuah file latihan. Pastikan kursor berada di editor dan coba beberapa perintah dasar, seperti Quick Open, Move Line, Toggle Comment, dan Format Document.

Jika shortcut tidak berfungsi, periksa beberapa kemungkinan berikut:

• shortcut pernah diubah secara manual;
• extension keymap mengganti shortcut bawaan;
• kombinasi tombol digunakan oleh Windows, Linux, macOS, atau aplikasi lain;
• fokus sedang berada di terminal, sidebar, atau komponen yang berbeda;
• susunan keyboard bukan US sehingga tombol yang ditampilkan dapat berubah.

Buka daftar Keyboard Shortcuts lalu cari berdasarkan nama perintah atau rekam kombinasi tombol. Jika masalah masih terjadi, buka Command Palette dan jalankan Developer: Toggle Keyboard Shortcuts Troubleshooting untuk melihat tombol dan perintah yang dideteksi VS Code.

Kesimpulan

Shortcut terbaik bukanlah shortcut yang paling banyak dihafal, tetapi shortcut yang paling sering digunakan. Mulailah dari Ctrl + P, Ctrl + Shift + P, Alt + Up/Down, Ctrl + D, F12, F2, dan shortcut terminal. Setelah penggunaannya menjadi kebiasaan, tambahkan shortcut lain sesuai alur kerja Anda.

Dengan latihan singkat selama tujuh hari, penggunaan mouse dapat dikurangi sehingga aktivitas menulis, mencari, merapikan, dan menguji kode di Visual Studio Code menjadi lebih cepat.

Sumber Resmi

• Dokumentasi Keyboard Shortcuts Visual Studio Code: https://code.visualstudio.com/docs/configure/keybindings
• Referensi shortcut Windows: https://code.visualstudio.com/shortcuts/keyboard-shortcuts-windows.pdf
• Referensi shortcut macOS: https://code.visualstudio.com/shortcuts/keyboard-shortcuts-macos.pdf
• Referensi shortcut Linux: https://code.visualstudio.com/shortcuts/keyboard-shortcuts-linux.pdf