Image by Freepik
Mengapa Shortcut Keyboard Penting?
Artikel ini adalah lanjutan dari artikel sebelumnya. Pada artikel sebelumnya, kamu sudah belajar install VS Code, setup, dan membuat project pertama. Sekarang kita akan pelajari keyboard shortcut untuk meningkatkan produktivitas.
Saat ini kamu masih menggunakan mouse untuk navigasi dan edit code. Hasilnya? Coding terasa lambat, produktivitas belum maksimal, dan tangan sering capek.
Apa yang membedakan developer junior dengan profesional? Jawabannya: keyboard shortcut.
Pernah liat developer bekerja? Jari-jari mereka terbang di keyboard dengan kecepatan luar biasa. Jarang sekali menyentuh mouse. Setiap aksi dilakukan dari keyboard.
Kamu mungkin pikir, "Ya kan bisa juga pakai mouse?" Sebenarnya ada beda yang gede banget dalam jangka panjang. Mari kita bahas.
Meningkatkan Kecepatan Typing dan Navigasi
Bayangkan project website dengan puluhan file tersimpan di folder berbeda. Setiap buka file baru, kamu harus klik folder di explorer terus-teruus sampai ketemu file yang dicari.
Dengan shortcut Ctrl+P, kamu bisa buka file hanya dengan ketik nama filenya. File langsung muncul. Cepat. Praktis.
Ini berulang berkali-kali dalam sehari. Buka file, edit, cari teks, hapus baris. Menit-menit kecil ini akan terkumpul jadi jam-jaman.
Mengurangi Penggunaan Mouse—Lebih Sehat
Jika kamu terus-teruus mengangkat tangan untuk pakai mouse, lama-lama tangan dan pergelangan tangan bisa mengalami ketegangan.
Developer yang menguasai shortcut lebih jarang gerakan mouse. Tangan mereka lebih banyak di keyboard, yang lebih ergonmiss dan jauh lebih sehat untuk jangka panjang.
Professional Workflow: Lebih Fokus pada Code
Setiap kali kamu pindah ke mouse, fokus kamu terputus. Otak harus beralih dari mode "menulis logik code" ke mode "cari dan klik mouse". Context switching ini membuat otak cepat lelah.
Developer profesional tetap fokus pada logika code karena menggunakan shortcut. Alur pikir mereka tidak terpotong-potong. Mereka bisa "flow" sambil coding, bukan terus terganggu navigasi manual.
Real Impact: Hemat Puluhan Menit Per Hari
Mari kita hitung praktis:
Buka file: 20 kali x 5 detik = 100 detik (vs 150 detik pakai mouse). Comment line: 15 kali x 2 detik = 30 detik (vs 60 detik). Delete line: 10 kali x 1 detik = 10 detik (vs 20 detik). Find dan replace: 5 kali x 3 detik = 15 detik (vs 90 detik).
Itu hemat 70 detik sehari dari empat aktivitas. Satu bulan kerja (20 hari) = hemat lebih dari 23 menit!
Developer berpengalaman yang menguasai shortcut bisa hemat puluhan menit per hari. Bahkan berjam-jam per minggu di project besar.
Saatnya Belajar
Apakah kamu siap untuk belajar shortcut keyboard dan ubah cara kamu bekerja?
Di section selanjutnya, kita akan mulai belajar shortcut-shortcut praktis yang bisa langsung kamu gunakan. Dari navigasi file, editing, sampai multi-cursor yang powerful. Semua shortcut ini akan ngubah cara kamu coding drastis.
Shortcut Navigation & File Management
Sekarang kita mulai belajar shortcut yang paling sering kamu gunakan. Bagian ini fokus pada navigasi file dan membuka project. Ini adalah fondasi yang akan membuat workflow kamu jauh lebih cepat.
Ctrl+P / Cmd+P - Quick Open File
Ini adalah shortcut paling powerful yang perlu kamu kuasai pertama kali.
Bayangkan kamu punya project dengan 50 file berbeda. Kamu perlu buka file button-component.js yang ada di folder components/buttons/. Dengan mouse, kamu harus klik folder satu per satu sampai ketemu filenya.
Sekarang coba ini: tekan Ctrl+P. Akan muncul search box kecil di atas editor. Ketik "button" dan file button-component.js langsung muncul. Cukup pencet Enter, file terbuka.
Itu saja. Tidak perlu navigasi folder. Tidak perlu klik-klik. Cepat banget, kan?
Tips: Kamu gak perlu ketik nama file lengkap. Ketik beberapa huruf saja, dan VS Code akan cari semua file yang match. Misalnya ketik "btn" dan akan muncul semua file yang mengandung "btn".
Ctrl+Shift+P / Cmd+Shift+P - Command Palette
Ini adalah command center dari VS Code.
Tekan Ctrl+Shift+P dan akan muncul search box besar di tengah editor. Di sini kamu bisa akses semua command yang ada di VS Code. Mau format code? Ketik "format". Mau jalankan task? Ketik "run task". Mau ubah theme? Ketik "theme".
Ini sangat berguna ketika kamu lupa shortcut untuk sesuatu. Ketik aja apa yang mau kamu lakukan, dan command palette akan temukan commandnya.
Contoh praktis: Ketik "format document" untuk auto-format seluruh code di file. VS Code akan rapi-in code kamu secara otomatis.
Ctrl+B / Cmd+B - Toggle Sidebar
Sidebar di sebelah kiri (file explorer) sering kali mengambil banyak tempat di layar.
Tekan Ctrl+B untuk sembunyikan sidebar. Tiba-tiba ruang editing kamu jadi lebih luas. Tekan lagi untuk tampilkan sidebar kembali.
Ini berguna ketika kamu sedang fokus menulis code dan gak butuh lihat file explorer. Maksimalkan space editing kamu.
Ctrl+J / Cmd+J - Toggle Panel
Pernah ngerasa layar coding kamu terlalu penuh sama terminal atau panel lainnya? Shortcut ini solusinya! Tinggal pencet Ctrl+J (Windows/Linux) atau Cmd+J (Mac), boom - panel bawah langsung ilang atau muncul lagi.
Kenapa ini penting:
- Toggle panel bawah (terminal, output, problems, dll) dengan cepet
- Buat space editing lebih luas pas lagi butuh fokus nulis kode
- Gak perlu pake mouse buat nutup/buka panel
Kapan dipake:
- Pas lagi fokus nulis kode dan butuh layar lebih gede
- Selesai pake terminal, langsung hide biar gak ganggu
- Mau lihat output atau problems, tinggal toggle aja
Combo ini mantep banget buat maksimalin ruang kerja lo tanpa ribet click-click panel!
Ctrl+\ / Cmd+\ - Split Editor
Kadang kamu perlu lihat dua file sekaligus, berdampingan.
Tekan Ctrl+\\ dan editor akan terbagi dua. Sekarang kamu bisa edit file di sebelah kanan sambil lihat file lain di sebelah kiri. Sangat berguna untuk compare dua file atau edit file yang saling terhubung.
Contoh: Edit index.html di sebelah kiri sambil lihat style.css di sebelah kanan. Jadi kamu bisa liat hasilnya secara real-time sambil nulis CSS.
Ctrl+Tab / Cmd+Tab - Switch Tabs
Kamu punya banyak file terbuka dalam satu project, bukan?
Tekan Ctrl+Tab untuk berpindah ke tab file berikutnya. Tekan berkali-kali untuk cycle through semua tab yang terbuka. Ini lebih cepat dari klik tab pakai mouse.
Alternatif: Ctrl+Tab untuk tab berikutnya. Ctrl+Shift+Tab untuk tab sebelumnya.
Ctrl+W / Cmd+W - Close Editor
Mau nutup file yang lagi aktif tanpa pake mouse? Shortcut ini jawabannya! Tinggal pencet Ctrl+W (Windows/Linux) atau Cmd+W (Mac), langsung tab-nya ilang.
Kenapa ini penting:
- Tutup file tab yang aktif dengan cepet
- Cepat cleanup tabs yang udah gak kepake
- Keyboard-only workflow tanpa sentuh mouse
Kapan dipake:
- Selesai edit file, langsung close biar gak numpuk
- Buka file salah, langsung tutup aja
- Mau declutter workspace dari tab yang kebanyakan
Pro tip: Kalo file-nya belum disave, VS Code bakal kasih warning dulu kok. Jadi aman!
Ctrl+K W / Cmd+K W - Close All Editors
Pernah gak sih feeling overwhelmed gara-gara kebanyakan tab terbuka? Shortcut ini langsung bersihin semua tab sekaligus! Pencet Ctrl+K terus W (atau Cmd+K terus W di Mac).
Kenapa ini penting:
- Tutup semua tab sekaligus dalam sekali jalan
- Clean slate untuk start fresh tanpa distraksi
- Lebih cepet daripada close satu-satu
Kapan dipake:
- Mau mulai task baru, pengen workspace bersih
- Selesai review pull request, close semua file
- Feeling overwhelmed dengan terlalu banyak tab
Ini kayak "refresh" buat workspace kamu. Mulai dari nol lagi dengan pikiran yang fresh!
Ctrl+Shift+T / Cmd+Shift+T - Reopen Closed Editor
Eh salah nutup tab penting? Tenang, ada "undo" buat close tab kok! Tinggal pencet Ctrl+Shift+T (Windows/Linux) atau Cmd+Shift+T (Mac), tab yang baru ditutup langsung balik lagi.
Kenapa ini penting:
- Buka kembali tab yang baru ditutup dengan instan
- Seperti "undo close tab" di browser
- Gak perlu cari-cari file lagi lewat explorer
Kapan dipake:
- Accidentally nutup file yang masih dibutuhin
- Kepencet
Ctrl+Wtanpa sengaja - Mau balik ke file yang tadi sempet dibuka
Fun fact: Kamu bisa pencet berkali-kali buat buka tab-tab yang ditutup sebelumnya. Kayak time travel gitu deh!
Ctrl+1/2/3 / Cmd+1/2/3 - Focus Editor Group
Kalo kamu suka split editor jadi beberapa kolom, shortcut ini bakal jadi sahabat kamu! Tinggal pencet Ctrl+1 (Windows/Linux) atau Cmd+1 (Mac) buat fokus ke group pertama, Ctrl+2 buat group kedua, dan seterusnya.
Kenapa ini penting:
- Switch focus ke editor group tertentu dengan cepet
- Kalo pake split editor, ini wajib banget
- Gak perlu klik-klik pake mouse buat pindah kolom
Kapan dipake:
- Split editor 2-3 kolom, mau pindah fokus cepet
- Lagi compare file di split editor
- Workflow yang butuh lihat multiple files sekaligus
Ini bikin multitasking di VS Code jadi jauh lebih smooth dan produktif!
Ctrl+K Ctrl+Left/Right / Cmd+K Cmd+Left/Right - Navigate Editor Group
Alternative cara buat pindah antar split editor! Pencet Ctrl+K terus Ctrl+Left atau Ctrl+Right (atau Cmd+K terus Cmd+Left/Right di Mac) buat navigasi ke kiri atau kanan.
Kenapa ini penting:
- Pindah antar split editor dengan arrow keys
- Alternative untuk
Ctrl+1/2/3yang lebih intuitif - Enak buat yang lebih suka navigasi directional
Kapan dipake:
- Gak hafal nomor editor group-nya
- Prefer navigasi pake arrow keys
- Split editor lebih dari 3 kolom
Pilih mana yang lebih comfortable buat workflow kamu - nomor atau arrow keys. Sama-sama powerful kok!
Tips Praktis
Jangan coba menghafal semua shortcut sekaligus. Fokus pada Ctrl+P dan Ctrl+Shift+P dulu. Kedua shortcut ini yang paling sering kamu gunakan.
Setelah sudah nyaman dengan dua shortcut itu, baru tambah shortcut lainnya. Konsistensi dalam practice lebih penting daripada hafal banyak shortcut sekaligus.
Setiap kali kamu mau melakukan aksi di VS Code, tanya diri kamu sendiri: "Ada shortcut gak untuk ini?" Dengan habit seperti ini, shortcut akan jadi second nature.
Shortcut Editing & Formatting
Sekarang kita pelajari shortcut untuk edit dan format kode. Shortcut-shortcut ini akan membuat kamu bisa ubah kode dengan cepat tanpa repot-repot select dan delete manual.
Ctrl+/ / Cmd+/ - Toggle Comment Line
Kamu pernah komentar baris kode dan uncomment lagi? Ini adalah shortcut tercepat untuk itu.
Letakkan cursor di baris yang mau dikomentari. Tekan Ctrl+/ dan baris itu akan langsung dikomentari. Tekan lagi dan komentar akan dihapus. Gampang.
Yang seru? Shortcut ini berfungsi di semua bahasa. HTML, CSS, JavaScript, semuanya. VS Code otomatis tahu cara komentar di bahasa apa pun.
Contoh: Kamu punya baris console.log("test");. Tekan Ctrl+/ dan jadi // console.log("test");. Tekan lagi jadi normal lagi.
Alt+Up/Down / Option+Up/Down - Move Line
Kamu butuh pindahkan satu baris kode ke atas atau ke bawah? Tidak perlu potong-tempel.
Letakkan cursor di baris yang mau dipindahkan. Tekan Alt+Up untuk pindahkan ke atas, atau Alt+Down untuk pindahkan ke bawah. Baris akan langsung berpindah.
Ini jauh lebih cepat daripada select baris, potong, pindahkan cursor, terus tempel. Hanya tiga kali tekan, selesai.
Contoh: Kamu punya variabel yang urutan-nya salah di awal berkas. Cukup tekan Alt+Down berkali-kali sampai variabel itu berada di posisi yang benar.
Shift+Alt+Up/Down / Shift+Option+Up/Down - Copy Line
Mirip dengan move baris, tapi ini salin baris ke bawah atau atas.
Letakkan cursor di baris yang mau disalin. Tekan Shift+Alt+Down dan baris akan diduplikasi di bawahnya. Tekan Shift+Alt+Up untuk duplikat di atas.
Ini berguna ketika kamu punya baris kode yang mirip dan kamu mau buat variasi-nya. Salin aja, terus ubah yang sudah disalin.
Contoh: Kamu punya fungsi getUserData() dan butuh buat getAdminData(). Salin fungsi-nya dengan Shift+Alt+Down, terus ubah beberapa baris di salin-nya.
Ctrl+Shift+K / Cmd+Shift+K - Delete Line
Mau hapus satu baris kode lengkap? Tidak perlu select dulu.
Letakkan cursor di baris yang mau dihapus. Tekan Ctrl+Shift+K dan baris akan langsung hilang. Selesai.
Ini lebih cepat dari select baris terus tekan Delete. Cursor bisa berada di mana saja di baris, tekan shortcut, baris langsung hilang.
Ctrl+Enter / Cmd+Enter - Insert Line Below
Kamu di tengah baris kode dan butuh buat baris baru di bawahnya. Tidak perlu pindah ke akhir baris dulu.
Tekan Ctrl+Enter dari mana saja di baris itu, dan baris baru akan terbuat di bawahnya. Cursor akan berpindah ke baris baru itu.
Contoh: Kamu sedang ketik const name = "John"; di tengah baris, tekan Ctrl+Enter, baris baru langsung terbuat di bawah tanpa perlu ke akhir baris dulu.
Ctrl+Shift+Enter / Cmd+Shift+Enter - Insert Line Above
Sebaliknya dari shortcut sebelumnya. Kamu butuh baris baru di atas baris yang sedang kamu edit.
Tekan Ctrl+Shift+Enter dan baris baru akan terbuat di atas. Cursor tetap di baris lama.
Jarang dipakai dibanding Ctrl+Enter, tapi berguna kalau kamu butuh tambah baris di atas tanpa pindah cursor.
Ctrl+X - Cut Line
Ini yang spesial. Ctrl+X biasanya untuk potong yang sudah di-select. Tapi di VS Code, Ctrl+X tanpa select apa pun akan potong baris penuh.
Letakkan cursor di mana saja di baris. Tekan Ctrl+X dan baris akan langsung dipotong (beserta baris baru-nya). Kamu bisa tempel di tempat lain.
Ini lebih cepat dari select baris dulu, baru potong. Langsung potong aja.
Ctrl+Shift+\ / Cmd+Shift+\ - Jump to Matching Bracket
Punya nested brackets atau tags yang banyak? Kadang susah kan nemuin mana pasangan bracket yang tutup? Shortcut ini bikin kamu bisa loncat ke bracket penutup dengan instan!
Kenapa ini penting:
- Loncat ke bracket/tag penutup secara otomatis
- Berguna banget untuk navigate nested code
- Gak perlu scroll atau cari manual
Kapan dipake:
- Navigate di dalam nested functions atau objects
- Cari pasangan bracket di JSX/HTML tags
- Debug code dengan banyak nested structure
Ini bikin navigasi di code yang complex jadi jauh lebih gampang dan cepet!
Ctrl+] / Cmd+] - Indent Line
Butuh rapiin code dengan geser ke kanan? Shortcut ini adalah cara tercepet buat indent line atau code block yang kamu select.
Kenapa ini penting:
- Geser line ke kanan (indent) dengan cepet
- Rapiin code structure tanpa press Tab berkali-kali
- Bekerja untuk single line atau multiple lines sekaligus
Kapan dipake:
- Nested code butuh indentation lebih dalam
- Copy-paste code yang indentasi-nya belum pas
- Rapiin struktur code yang berantakan
Combo dengan select multiple lines, terus Ctrl+] buat indent semuanya sekaligus!
Ctrl+[ / Cmd+[ - Outdent Line
Kebalikan dari indent - kalo kamu butuh geser code ke kiri, shortcut ini yang dipake! Perfect buat fix indentation yang terlalu dalam.
Kenapa ini penting:
- Geser line ke kiri (outdent) dengan instant
- Fix indentation cepat tanpa delete space manual
- Bekerja untuk single atau multiple lines
Kapan dipake:
- Code terlalu masuk ke dalam, butuh geser ke kiri
- Refactor code yang nested jadi lebih flat
- Rapiin indentation setelah copy-paste
Sama kayak indent, ini juga bisa dipake untuk multiple lines sekaligus!
Ctrl+Shift+[ / Cmd+Option+[ - Fold Code
Code file kamu panjang banget dan pengen fokus ke bagian tertentu aja? Shortcut ini bisa collapse/lipat code block biar lebih rapi dan fokus!
Kenapa ini penting:
- Collapse/lipat code block dengan sekali pencet
- Bikin code lebih rapi dan easy to navigate
- Fokus ke bagian code yang lagi dikerjain
Kapan dipake:
- File code terlalu panjang, pengen hide bagian yang gak kepake
- Fokus ke satu function aja
- Overview struktur code tanpa distraksi
Code yang dilipat tetep ada kok, cuma disembunyiin aja biar gak ganggu view kamu!
Ctrl+Shift+] / Cmd+Option+] - Unfold Code
Setelah lipat code, pasti kamu butuh buka lagi kan? Shortcut ini adalah pasangan dari fold code - buat expand code block yang udah dilipat.
Kenapa ini penting:
- Expand code block yang dilipat dengan cepet
- Lihat detail code yang tadi disembunyiin
- Toggle antara overview dan detail view
Kapan dipake:
- Perlu edit code yang tadi dilipat
- Review full implementation dari function
- Switch dari overview mode ke detail mode
Simple tapi powerful buat manage visibility code kamu!
Ctrl+K Ctrl+0 / Cmd+K Cmd+0 - Fold All
Mau lihat overview struktur file secara keseluruhan? Shortcut ini langsung lipat semua code blocks sekaligus! Perfect buat dapetin bird's eye view dari file yang panjang.
Kenapa ini penting:
- Lipat semua code blocks dalam satu kali jalan
- Overview struktur file dengan jelas
- Liat semua functions/classes tanpa detail implementation
Kapan dipake:
- Baru buka file yang gede, mau liat struktur dulu
- Navigate ke function tertentu tanpa distraksi
- Review arsitektur code sebelum edit
Ini kayak "zoom out" buat code kamu. Liat big picture dulu sebelum dive into details!
Ctrl+K Ctrl+J / Cmd+K Cmd+J - Unfold All
Kebalikan dari fold all - shortcut ini buka semua code blocks yang dilipat sekaligus. Balik lagi ke full detailed view!
Kenapa ini penting:
- Buka semua code blocks dalam sekali jalan
- Balik ke full view setelah collapse semua
- Gak perlu expand satu-satu
Kapan dipake:
- Selesai liat overview, mau liat full details
- Perlu search through semua code
- Undo dari fold all
Toggle antara fold all dan unfold all ini powerful banget buat switch perspective waktu coding!
Alt+Shift+F / Option+Shift+F - Format Document
Ini adalah shortcut yang wajib banget kamu hafal! Auto format seluruh file sesuai dengan formatter yang kamu pake (Prettier, ESLint, dll). Code langsung rapi dalam sekali pencet!
Kenapa ini penting:
- Auto format seluruh file secara instant
- Sesuai dengan formatter configuration (Prettier, dll)
- Konsisten code style tanpa manual effort
Kapan dipake:
- Sebelum commit code ke git
- Setelah selesai nulis code yang berantakan
- Fix indentation dan spacing di seluruh file
Setup yang dibutuhkan:
- Install formatter extension (Prettier recommended)
- Set default formatter di VS Code settings
- Bisa juga enable format on save biar otomatis
Pro tip: Enable "Format on Save" di settings biar setiap kali save file, code langsung auto-format!
Ctrl+K Ctrl+F / Cmd+K Cmd+F - Format Selection
Gak mau format seluruh file? Cuma mau format bagian tertentu aja? Shortcut ini adalah jawabannya! Format hanya code yang kamu select.
Kenapa ini penting:
- Format hanya code yang diselect, bukan semuanya
- Control lebih precis untuk formatting
- Gak ganggu bagian code yang udah rapi
Kapan dipake:
- Cuma mau rapiin satu function atau block tertentu
- File shared dengan orang lain, gak mau ubah semuanya
- Fix formatting di bagian yang kamu edit aja
Select code yang mau dirapiin, terus pencet shortcut ini. Simple!
Ctrl+Space - Trigger Suggestions
Autocomplete atau IntelliSense tiba-tiba hilang? Atau mau manually trigger suggestions? Shortcut ini adalah solusinya!
Kenapa ini penting:
- Munculin autocomplete/IntelliSense secara manual
- Kalo suggestion hilang atau gak muncul otomatis
- Liat available methods/properties dari object
Kapan dipake:
- Suggestions gak muncul otomatis
- Mau explore available methods di object
- Gak hafal nama function, butuh lihat list
Tips penggunaan:
- Ketik beberapa huruf pertama, terus trigger suggestions
- Navigate suggestions pake arrow keys
- Press Tab atau Enter buat accept suggestion
Ini bikin coding jadi lebih cepet karena gak perlu hafal semua API atau method names!
Ctrl+. / Cmd+. - Quick Fix
Liat error atau warning di code? Shortcut ini munculin quick fix options yang bisa auto-resolve masalah kamu! From auto imports sampe fix common errors.
Kenapa ini penting:
- Show quick fix options untuk error/warning
- Auto import modules yang missing
- Fix common errors dengan sekali klik
Kapan dipake:
- Ada squiggly lines merah atau kuning di code
- Missing import statement
- TypeScript errors yang bisa di-fix otomatis
Contoh use cases:
- Import React yang kelupaan: quick fix → auto import
- Unused variable: quick fix → remove atau prefix underscore
- Type errors: quick fix → add type annotation
Ini adalah shortcut problem-solver yang super helpful buat debug cepet!
Ctrl+Shift+O / Cmd+Shift+O - Go to Symbol
File code kamu panjang banget dan mau cepet jump ke function atau class tertentu? Shortcut ini adalah search engine untuk symbols di file yang lagi aktif!
Kenapa ini penting:
- Jump ke function/class/variable dalam file dengan cepet
- Cepat navigate file besar tanpa scroll
- Liat list semua symbols di file
Kapan dipake:
- File panjang dengan banyak functions
- Mau jump ke specific function tanpa scroll
- Review struktur file dan available symbols
Cara pake:
- Pencet shortcut → muncul list symbols
- Ketik nama function/class yang dicari
- Press Enter untuk jump langsung
Ini kayak "table of contents" buat code file kamu. Super helpful untuk navigate file yang gede!
Pola Belajar
Kelompokkan shortcut ini jadi dua kategori: ubah baris (pindah, salin, hapus) dan kerja dengan baris (komentar, potong, sisipkan).
Fokus praktik ubah baris shortcut dulu sampai natural. Setelah itu, tambah sisipkan baris shortcut.
Semakin sering kamu gunakan, semakin cepat jari kamu bereaksi. Dalam 1-2 minggu, semua ini akan jadi refleks alami.
Shortcut Cari & Ganti
Ketika file kamu besar dengan ribuan baris, mencari teks tertentu bisa sangat menyusahkan. Shortcut di bagian ini akan membuat pencarian dan penggantian jadi cepat dan efisien.
Ctrl+F / Cmd+F - Cari
Ini adalah shortcut pencarian paling dasar yang wajib kamu kuasai.
Tekan Ctrl+F dan search box akan muncul di pojok kanan atas editor. Ketik teks yang mau dicari, misalnya nama variabel atau fungsi. VS Code akan highlight semua text yang match di file saat ini.
Contoh: Kamu punya file HTML dengan 500 baris. Mau cari semua tempat di mana kamu pakai class button-primary. Cukup tekan Ctrl+F, ketik button-primary, dan VS Code akan highlight semuanya. Kamu bisa lihat berapa banyak match yang ditemukan.
Tips: Gunakan tombol "Match Case" jika kamu perlu case-sensitive search. Atau gunakan regex search jika butuh pencarian lebih canggih.
Ctrl+H / Cmd+H - Cari dan Ganti
Ini adalah upgrade dari cari biasa. Dengan shortcut ini, kamu bisa cari dan sekaligus ganti.
Tekan Ctrl+H dan dua search box akan muncul. Box pertama untuk "cari", box kedua untuk "ganti dengan". Ketik teks yang mau dicari, ketik replacement-nya, terus kamu bisa ganti satu per satu atau sekaligus ganti semua.
Contoh praktis: Kamu punya banyak tempat di kode pakai variabel user_name. Sekarang kamu mau ubah ke userName (camelCase). Buka find and replace, cari user_name, ganti dengan userName, terus klik "Replace All" dan semua akan berubah sekaligus.
Itu bukan hanya menghemat waktu. Itu juga mengurangi risiko kamu lupa mengubah satu dua tempat.
Ctrl+G / Cmd+G - Lompat ke Baris
File besar dengan ribuan baris? Mau cepat melompat ke baris tertentu?
Tekan Ctrl+G dan dialog akan muncul bertanya "Go to Line". Ketik nomor baris yang mau dituju, tekan Enter, dan cursor langsung lompat ke baris itu.
Contoh: Kamu dapat error message "error on line 342". Tekan Ctrl+G, ketik 342, dan cursor langsung ke baris 342. Tidak perlu scroll ribuan baris.
Ini sangat berguna ketika kamu debug error. Error message biasanya kasih tau baris berapa error-nya. Gunakan shortcut ini dan langsung melompat ke sana.
F3 / Cmd+G - Cari Berikutnya
Setelah kamu buka search box dengan Ctrl+F, kamu bisa navigate ke match berikutnya dengan F3.
Tekan Ctrl+F, ketik teks yang dicari. Terus tekan F3 berkali-kali untuk navigate ke setiap match berikutnya. Cursor akan berpindah ke match tersebut.
Contoh: Cari semua tempat di mana kamu pakai console.log. Tekan Ctrl+F, ketik console.log. Terus tekan F3 untuk lihat setiap console.log satu per satu.
Shift+F3 / Cmd+Shift+G - Cari Sebelumnya
Kebalikan dari F3. Shortcut ini navigate ke match sebelumnya.
Jadi jika kamu sedang di match ketiga, tekan Shift+F3 dan kamu akan kembali ke match kedua. Tekan lagi dan kembali ke match pertama.
Ini berguna jika kamu melompat terlalu jauh dan ingin kembali ke match sebelumnya.
Ctrl+Shift+F / Cmd+Shift+F - Search in Files
Mau cari teks atau function di seluruh project, gak cuma satu file? Shortcut ini adalah search engine buat semua files dalam project kamu! Super powerful buat find text across multiple files.
Kenapa ini penting:
- Search di semua files dalam project sekaligus
- Powerful untuk find across files tanpa buka satu-satu
- Liat semua occurrence dari teks yang dicari
Kapan dipake:
- Cari dimana function atau variable dipake
- Find text pattern di seluruh codebase
- Refactoring code yang tersebar di banyak file
Cara pake:
- Pencet shortcut → muncul search panel di sidebar
- Ketik teks yang mau dicari
- Hasil muncul grouped by file
- Click hasil untuk jump ke file dan line
Pro tips:
- Use regex untuk search pattern yang complex
- Filter by file type dengan include/exclude patterns
- Case sensitive toggle buat search yang lebih precis
Ini adalah salah satu fitur paling powerful di VS Code buat navigate large codebase!
Ctrl+Shift+H / Cmd+Shift+H - Replace in Files
Search in files udah powerful, tapi yang ini lebih powerful lagi! Replace teks di multiple files sekaligus. Tapi hati-hati ya, ini bisa ubah banyak file dalam sekali jalan!
Kenapa ini penting:
- Replace di multiple files sekaligus dengan cepet
- Refactoring variable/function names across project
- Mass update text yang consistent di banyak tempat
Kapan dipake:
- Rename variable/function di seluruh project
- Update URL atau API endpoint yang berubah
- Mass find and replace untuk refactoring
Cara pake:
- Pencet shortcut → muncul replace panel
- Isi "Find" dengan teks yang mau diganti
- Isi "Replace" dengan teks baru
- Preview dulu sebelum replace all
- Bisa replace satu-satu atau semuanya sekaligus
⚠️ Warning:
- SELALU preview changes sebelum replace all
- Bisa undo dengan Ctrl+Z kalo salah
- Test dulu di small scope sebelum apply ke semua
- Backup atau commit ke git sebelum mass replace
This is a powerful but dangerous tool - use with caution!
Ctrl+K Ctrl+C / Cmd+K Cmd+C - Add Line Comment
Udah tau Ctrl+/ untuk toggle comment kan? Nah ini adalah alternative-nya khusus buat add comment aja. Bedanya, ini pure add comment tanpa toggle.
Kenapa ini penting:
- Add comment di line dengan pasti (no toggle)
- Alternative untuk
Ctrl+/yang lebih predictable - Gak akan accidentally uncomment line yang udah dicomment
Kapan dipake:
- Mau pastiin line di-comment (bukan toggle)
- Multiple selections yang mau di-comment semua
- Preference workflow yang explicit add/remove
Bedanya dengan Ctrl+/:
Ctrl+/→ toggle (bisa comment atau uncomment)Ctrl+K Ctrl+C→ always add comment
Pilih mana yang lebih comfortable buat workflow kamu!
Ctrl+K Ctrl+U / Cmd+K Cmd+U - Remove Line Comment
Pasangan dari shortcut sebelumnya! Kalo Ctrl+K Ctrl+C untuk add comment, yang ini khusus untuk remove comment.
Kenapa ini penting:
- Remove comment dari line dengan explicit
- Pure uncomment tanpa toggle behavior
- Lebih control untuk uncomment multiple lines
Kapan dipake:
- Uncomment code yang udah di-comment
- Multiple selections yang mau di-uncomment
- Workflow yang butuh explicit remove comment
Cara pake:
- Select line atau multiple lines yang di-comment
- Pencet
Ctrl+KterusCtrl+U - Comment marks langsung ilang
Combo Ctrl+K Ctrl+C dan Ctrl+K Ctrl+U ini kasih kamu control yang lebih explicit dibanding toggle-based Ctrl+/!
Tips Pencarian Praktis
Jangan coba hafal semua shortcut pencarian. Fokus pada Ctrl+F dan Ctrl+H dulu. Kedua shortcut ini yang paling sering kamu gunakan.
Ctrl+G sangat berguna untuk debug. Ingat shortcut ini ketika kamu dapat error message yang sebutin nomor baris.
F3 dan Shift+F3 bisa kamu pelajari setelah sudah nyaman dengan tiga shortcut sebelumnya.
Semakin banyak kamu praktik, semakin cepat reflex kamu. Dalam beberapa hari, shortcut ini akan jadi kebiasaan otomatis.
Shortcut Seleksi & Multi-Kursor
Section ini adalah yang paling powerful. Multi-kursor adalah fitur yang membuat developer bisa edit banyak tempat sekaligus. Dengan ini, kamu bisa hemat waktu yang sangat banyak.
Ctrl+D / Cmd+D - Pilih Kata
Ini adalah shortcut yang akan mengubah cara kamu edit kode.
Letakkan cursor di atas kata yang mau dipilih. Tekan Ctrl+D dan kata itu akan terpilih. Tekan lagi dan VS Code akan pilih kata yang sama berikutnya. Terus tekan sampai semua kata yang sama terpilih.
Contoh: Kamu punya variabel username yang muncul di 5 tempat berbeda. Tekan Ctrl+D di atas kata pertama. Tekan lagi dan kata kedua terpilih. Terus tekan sampai kelima kata sudah terpilih. Sekarang kamu bisa ketik replacement-nya dan semua akan berubah sekaligus.
Yang seru? Kamu bisa berhenti di tengah jalan. Jika sudah cukup kata yang terpilih, kamu bisa langsung ketik replacement-nya.
Ctrl+F2 / Cmd+F2 - Ubah Semua Tempat Sekaligus
Ini adalah versi lebih cepat dari Ctrl+D. Shortcut ini langsung pilih semua tempat di mana kata itu muncul di file.
Letakkan cursor di atas kata. Tekan Ctrl+F2 dan semua tempat di mana kata yang sama muncul akan terpilih sekaligus dalam satu kali tekan.
Contoh: Kamu punya fungsi getUserData() yang dipanggil di 10 tempat berbeda. Mau ubah nama jadi getUser(). Letakkan cursor di fungsi name, tekan Ctrl+F2, semua 10 tempat terpilih sekaligus. Ketik nama baru dan semua berubah.
Ini jauh lebih cepat daripada Ctrl+D yang harus ditekan berkali-kali.
Ctrl+Shift+L / Cmd+Shift+L - Select All Occurrences
Ini adalah shortcut yang super powerful buat bulk edit! Mirip kayak Ctrl+F2, tapi lebih flexible karena works dengan any selected text, bukan cuma kata.
Kenapa ini penting:
- Select semua occurrence dari selected text dengan instant
- Perfect untuk bulk edit di banyak tempat sekaligus
- Lebih flexible daripada Ctrl+F2 karena bisa untuk any text
Kapan dipake:
- Edit semua occurrence dari text yang sama
- Bulk rename variable atau property names
- Mass update pattern yang identical
Cara pake:
- Select text yang mau dicari (bisa satu kata atau multiple words)
- Pencet
Ctrl+Shift+L - Semua occurrence langsung ke-select dengan multi-cursor
- Ketik untuk edit semuanya sekaligus
Bedanya dengan Ctrl+D dan Ctrl+F2:
Ctrl+D→ select occurrence satu per satu (bertahap)Ctrl+F2→ select all occurrences dari kata di cursorCtrl+Shift+L→ select all occurrences dari selected text (any text)
This is one of the most powerful multi-cursor shortcuts yang wajib kamu kuasai!
Alt+Click / Option+Click - Add Multiple Cursor
Ini adalah cara paling flexible dan universal buat bikin multi-cursor! Gak perlu khawatir conflict atau shortcut yang ribet. Simply hold Alt terus click!
Kenapa ini penting:
- Click dengan Alt key di beberapa tempat secara manual
- Buat multi-cursor manual dengan full control
- Works di semua platform tanpa conflict
Kapan dipake:
- Tambah cursor di tempat-tempat specific yang gak beraturan
- Multi-cursor yang gak bisa dipake dengan Ctrl+Alt+Up/Down
- Full control untuk cursor placement
Cara pake:
- Hold
Alt(Windows/Linux) atauOption(Mac) - Click di tempat-tempat yang mau ditambah cursor
- Click sebanyak yang kamu mau
- Release Alt dan mulai ketik
Pro tips:
- Combine dengan scroll buat tambah cursor di file yang panjang
- Bisa drag sambil hold Alt untuk select text di multiple places
- Press
Escuntuk clear semua cursor dan balik ke normal
Ini adalah go-to method buat multi-cursor karena paling intuitive dan powerful!
Ctrl+U / Cmd+U - Undo Last Cursor Operation
Accidentally add cursor di tempat yang salah? Atau select occurrence yang gak perlu? Shortcut ini adalah "undo" buat cursor operations!
Kenapa ini penting:
- Undo cursor selection terakhir dengan cepet
- Kalo salah add cursor atau select occurrence
- Safety net untuk multi-cursor operations
Kapan dipake:
- Salah pencet
Ctrl+Ddan select occurrence yang gak diinginkan - Add cursor di tempat yang salah pake Alt+Click
- Undo step by step dari multi-selection
Cara pake:
- Lagi pake multi-cursor atau multi-selection
- Accidentally add cursor/selection yang salah
- Pencet
Ctrl+Uuntuk undo step terakhir - Bisa pencet berkali-kali untuk undo multiple steps
Contoh use case: Kamu pencet Ctrl+D 5 kali, terus sadar yang ke-5 salah. Tinggal Ctrl+U sekali untuk remove selection terakhir aja!
This is a lifesaver untuk multi-cursor workflows!
Esc - Remove All Cursors Except Primary
Udah selesai pake multi-cursor dan mau balik ke normal mode? Atau accidentally bikin terlalu banyak cursor? Press Esc dan langsung balik ke single cursor!
Kenapa ini penting:
- Cancel multi-cursor dengan instant
- Balik ke single cursor tanpa ribet
- Clean exit dari multi-cursor mode
Kapan dipake:
- Selesai edit pake multi-cursor
- Accidentally bikin terlalu banyak cursor
- Mau cancel multi-cursor operation
Cara pake:
- Lagi dalam multi-cursor mode
- Press
Esc - Semua cursor ilang kecuali primary cursor
- Balik ke normal editing mode
Pro tip: Ini adalah shortcut paling basic tapi paling sering dipake waktu kerja dengan multi-cursor. Hafal banget shortcut ini!
Simple tapi essential buat multi-cursor workflow!
Shift+Alt+I / Shift+Option+I - Insert Cursor at Line End
Ini adalah shortcut yang super useful tapi jarang orang tau! Buat add cursor di akhir setiap line yang kamu select. Perfect buat bulk edit di line endings!
Kenapa ini penting:
- Add cursor di akhir setiap line yang diselect
- Useful banget untuk bulk edit akhir line
- Pattern editing yang sangat specific
Kapan dipake:
- Tambah semicolon atau comma di akhir multiple lines
- Add text pattern di end of lines
- Bulk formatting untuk line endings
Cara pake:
- Select multiple lines (whole lines atau sebagian)
- Pencet
Shift+Alt+I(Windows/Linux) atauShift+Option+I(Mac) - Cursor muncul di akhir setiap line
- Ketik untuk add text di semua line endings sekaligus
Contoh use case: Kamu punya list items tanpa comma di akhir:
const items = [
'apple'
'banana'
'orange'
]
Select 3 lines itu, pencet Shift+Alt+I, ketik , dan boom - semua line punya comma!
Alternative: Kalo mau add cursor di awal lines instead, bisa pake Alt+Click atau select lines terus Home key.
This is a hidden gem shortcut yang bikin bulk editing jadi super efficient!
Kapan Pakai Apa
Untuk mengganti nama variabel di banyak tempat, gunakan Ctrl+F2 atau Ctrl+D. Ini paling cepat dan termudah.
Multi-kursor adalah salah satu fitur paling powerful di VS Code. Semakin sering kamu praktik, semakin banyak waktu yang bisa kamu hemat. Ini bukan cuma shortcut biasa, ini adalah game-changer untuk produktivitas.
Shortcut Menuju & Lihat Definisi
Section ini fokus pada shortcut yang membantu kamu memahami kode yang dibuat orang lain atau kode lama yang sudah kamu buat sendiri. Ini sangat berguna ketika kamu debugging atau belajar dari kode yang kompleks.
F12 - Lompat ke Definisi
Bayangkan kamu sedang baca kode dan menemukan fungsi atau variabel yang tidak kamu mengerti. Kamu pengen lihat definisinya.
Letakkan cursor di atas nama fungsi atau variabel. Tekan F12 dan VS Code akan langsung melompat ke file di mana fungsi atau variabel itu didefinisikan.
Contoh: Kamu punya fungsi calculateTotal() yang dipanggil di file index.js. Kamu pengen lihat apa isi fungsi itu. Letakkan cursor di calculateTotal(), tekan F12, dan VS Code akan membuka file di mana calculateTotal() didefinisikan dan kursor langsung menunjuk ke baris itu.
Ini menghemat waktu pencarian manual. Bayangkan kamu harus cari file mana yang punya definisi itu. Bisa memakan waktu berjam-jam untuk project besar.
Ctrl+K Ctrl+I - Lihat Informasi Hover
Kadang kamu tidak perlu lompat ke definisi. Kamu cuma perlu lihat dokumentasi atau info singkat dari fungsi itu.
Letakkan cursor di atas nama fungsi atau variabel. Tekan Ctrl+K terus tekan Ctrl+I (dua kali tekan, bukan bersamaan). Akan muncul dokumentasi atau informasi singkat di atas kode kamu.
Contoh: Kamu tidak yakin apa parameter yang diperlukan untuk fungsi getUser(). Tekan Ctrl+K Ctrl+I dan akan muncul dokumentasi lengkap tentang fungsi tersebut. Kamu bisa lihat parameter, return value, dan penjelasannya.
Ini lebih cepat daripada lompat ke definisi karena kamu tetap di file yang sedang dikerjakan.
Alt+F12 - Lihat Definisi Tanpa Pindah File
Ini adalah kombinasi terbaik dari dua shortcut sebelumnya. Kamu bisa lihat definisi tanpa perlu pindah file.
Letakkan cursor di atas nama fungsi atau variabel. Tekan Alt+F12 dan akan muncul pop-up kecil yang menampilkan definisi dari fungsi atau variabel itu. Kamu bisa lihat isinya, tapi cursor masih di file asli.
Contoh: Kamu sedang ngerjain file main.js dan butuh lihat definisi fungsi helper() yang ada di file utils.js. Tekan Alt+F12 dan pop-up akan muncul menampilkan kode dari helper(). Kamu bisa lihat isinya sambil tetap fokus di file main.js.
Ini sangat berguna ketika kamu hanya perlu lihat sekilas definisi, tidak perlu lompat ke file lain dan balik lagi.
Alt+F12 - Lihat Definisi Tanpa Pindah File
Ini adalah kombinasi terbaik dari dua shortcut sebelumnya. Kamu bisa lihat definisi tanpa perlu pindah file.
Letakkan cursor di atas nama fungsi atau variabel. Tekan Alt+F12 dan akan muncul pop-up kecil yang menampilkan definisi dari fungsi atau variabel itu. Kamu bisa lihat isinya, tapi cursor masih di file asli.
Contoh: Kamu sedang ngerjain file main.js dan butuh lihat definisi fungsi helper() yang ada di file utils.js. Tekan Alt+F12 dan pop-up akan muncul menampilkan kode dari helper(). Kamu bisa lihat isinya sambil tetap fokus di file main.js.
Ini sangat berguna ketika kamu hanya perlu lihat sekilas definisi, tidak perlu lompat ke file lain dan balik lagi.
Shift+F12 - Go to References
Mau tau dimana aja fungsi atau variabel ini dipake? Shortcut ini adalah jawabannya.
Taro cursor di fungsi, variabel, atau class yang mau dicek. Tekan Shift+F12 dan panel muncul nampilin semua referensi. Dikelompokkan per file dengan preview baris. Klik referensi untuk lompat ke lokasi.
Ini sangat berguna buat memahami alur kode. Sebelum refactor, kamu bisa tau kode dipake dimana aja. Debug juga jadi lebih gampang untuk melacak penggunaan dari fungsi. Kamu bisa pahami ketergantungan kode sebelum ubah sesuatu.
Contoh: "Fungsi ini dipake dimana aja?" Tekan Shift+F12. "Kalo ganti nama variabel ini, kena berapa file?" Cek referensi. "API endpoint ini dipanggil dari mana aja?" Cari referensi.
Tips: Gabung dengan Ctrl+H (Replace in Files) setelah liat referensi buat refactor yang aman.
Ctrl+T / Cmd+T - Go to Symbol in Workspace
Ini adalah upgrade dari Ctrl+Shift+O! Kalo Ctrl+Shift+O cuma cari dalam file, shortcut ini cari symbol di seluruh project.
Tekan Ctrl+T dan ketik nama fungsi, class, atau variabel yang dicari. Daftar muncul dari seluruh project. Tekan Enter untuk lompat langsung.
Sangat powerful buat navigasi codebase yang besar. Kamu cari fungsi atau class tapi gak tau di file mana? Shortcut ini solusinya. Lompat ke definisi di file lain tanpa cari manual.
Bedanya dengan shortcut lain? Ctrl+P buat cari file berdasarkan nama. Ctrl+Shift+O buat cari symbol dalam file sekarang. Ctrl+T buat cari symbol di seluruh project.
Tips: Gak perlu ketik nama lengkap! Ketik beberapa huruf aja dan VS Code bakal cocokkan. Misalnya ketik "usrctrl" bisa match "UserController".
Ctrl+Shift+. / Cmd+Shift+. - Breadcrumb Navigation
Liat breadcrumb di atas editor (jalur file dan struktur)? Shortcut ini bikin kamu bisa navigasi lewat breadcrumb dengan keyboard!
Tekan Ctrl+Shift+. dan dropdown breadcrumb muncul. Pake tombol panah untuk navigasi. Tekan Enter untuk pilih.
Breadcrumb adalah bar jalur di atas editor yang nampilin: Workspace → Folder → Subfolder → File → Symbol. Bisa diklik untuk navigasi cepat.
Ini berguna ketika kamu mau pindah ke file lain dalam folder yang sama. Atau navigasi struktur folder tanpa buka sidebar. Akses cepat ke file sejajar atau folder parent.
Tips: Gabung dengan Ctrl+Shift+O untuk pengalaman navigasi lengkap. Breadcrumb untuk level file, Ctrl+Shift+O untuk level symbol.
Ctrl+K Ctrl+Q - Go to Last Edit Location
Pernah edit kode di satu file, terus loncat ke file lain, terus lupa dimana tadi terakhir edit? Shortcut ini adalah mesin waktu buat balik ke lokasi edit terakhir!
Tekan Ctrl+K terus Ctrl+Q dan cursor langsung lompat ke lokasi edit terakhir. Bahkan kalo file-nya udah ditutup, bakal dibuka lagi.
Contoh: Kamu lagi edit HomePage.jsx. Terus lompat ke api.js untuk cek sesuatu. Lompat lagi ke utils.js untuk referensi. Sekarang mau balik ke HomePage yang tadi lagi di-edit. Pencet Ctrl+K Ctrl+Q dan langsung balik ke HomePage di posisi yang tepat!
Sangat berguna kalo loncat-loncat file dan lupa dimana terakhir edit. Gak perlu inget atau cari manual.
Tips: Gabung dengan Alt+Left/Right untuk navigasi riwayat editing lengkap, bukan cuma edit terakhir.
Alt+Left / Cmd+Left - Go Back
Ini kayak tombol "back" di browser! Navigasi ke posisi cursor sebelumnya dalam riwayat navigasi.
Tekan Alt+Left dan cursor lompat balik ke posisi sebelumnya. Bisa pencet berkali-kali untuk balik beberapa langkah.
VS Code menyimpan riwayat dari posisi cursor kamu. Termasuk lompat ke definisi (F12), lihat referensi (Shift+F12), pindah file (Ctrl+P), dan scroll manual.
Perfect buat batalkan lompatan navigasi. Setelah lompat ke definisi, mau balik ke asal? Tekan Alt+Left. Navigasi file terus mau dibatalkan? Tekan Alt+Left. Tersesat dalam navigasi? Balik pake Alt+Left.
Tips: Pikirin kayak riwayat browser buat navigasi kode. Alt+Left untuk balik, Alt+Right untuk maju.
Alt+Right / Cmd+Right - Go Forward
Kebalikan dari Alt+Left! Kalo kamu udah balik terlalu jauh, shortcut ini buat maju lagi dalam riwayat navigasi.
Tekan Alt+Right dan cursor lompat maju ke posisi berikutnya. Cuma berfungsi kalo sebelumnya udah pake Alt+Left.
Contoh: Kamu di file A. Lompat ke definisi ke file B (F12). Lompat ke referensi ke file C (Shift+F12). Tekan Alt+Left dua kali dan kamu balik ke file A. Terus tekan Alt+Right dua kali dan kamu maju lagi ke file C.
Alt+Left untuk balik navigasi. Alt+Right untuk navigasi ulang maju. Gabungan keduanya kasih kamu kontrol penuh atas riwayat navigasi.
Tips Praktis Untuk Section Ini
Ketiga shortcut ini tidak perlu dihafalkan sekaligus. Fokus pada F12 dulu sampai terbiasa. Ini shortcut yang paling sering dipakai.
Alt+F12 adalah upgrade dari F12 yang lebih nyaman karena tidak perlu pindah file. Pelajari ini setelah F12 sudah natural.
Ctrl+K Ctrl+I jarang dipakai untuk pemula. Tapi berguna kalau kamu perlu informasi cepat dari library atau framework yang kompleks.
Semakin sering kamu gunakan ketiga shortcut ini, semakin mudah kamu memahami kode orang lain atau kode lama yang sudah kamu buat.
Shortcut Terminal & Debug
Section ini fokus pada shortcut untuk bekerja dengan terminal dan debugging. Ini adalah fitur yang membuat alur kerja developer jauh lebih efisien tanpa perlu keluar dari VS Code.
Ctrl+Shift+` (Backtick) - Buat Terminal Baru
Kadang kamu butuh lebih dari satu terminal. Misalnya satu terminal jalankan development server, terminal lain jalankan command lain.
Tekan Ctrl+Shift+ ` dan terminal baru akan terbuat. Sekarang kamu punya dua tab terminal di bawah editor. Kamu bisa switch antar terminal dengan klik tab atau shortcut.
Contoh: Terminal 1 jalankan npm start. Terminal 2 jalankan npm test. Kedua proses berjalan bersamaan, dan kamu bisa lihat kedua output di tab yang berbeda.
Ini sangat berguna ketika kamu perlu menjalankan beberapa proses sekaligus tanpa perlu membuka termina
F5 - Mulai Debugging
Debugging adalah proses menemukan dan memperbaiki bug di kode kamu. VS Code punya fitur debug bawaan yang sangat powerful.
Tekan F5 dan VS Code akan memulai debugging session. Ini akan jalankan kode kamu dalam mode debug sehingga kamu bisa lihat apa yang terjadi di setiap baris kode.
Contoh: Kamu punya bug di kode dan tidak tahu di mana. Tekan F5, kode akan berjalan dalam mode debug. Kamu bisa set breakpoint (titik henti) di baris yang kamu curigai. Kode akan berhenti di breakpoint itu, dan kamu bisa lihat nilai variabel pada saat itu.
Catatan: Untuk pemula, fitur debug mungkin terasa kompleks. Ini bukan shortcut yang penting untuk dikuasai di awal. Fokus pada shortcut terminal dulu. Debugging adalah skill yang akan kamu pelajari lebih dalam kemudian.
Tips Praktis untuk Section Ini
Ctrl+Shift+ ` adalah shortcut paling penting di section ini. Ini akan menghemat waktu kamu setiap hari karena bisa jalankan multiple terminal dari satu tempat.
Switch antar terminal dengan Ctrl+Shift+ ` juga berguna. Setelah beberapa hari practice, ini akan jadi reflex alami.
Ctrl+ ` untuk kill terminal jarang dipakai. Lebih sering klik icon X aja. Tapi bagus tahu shortcut ini kalau tangan sudah di keyboard.
F5 untuk debugging bisa dipelajari kemudian. Untuk sekarang, fokus pada terminal shortcut aja.
Semua shortcut ini akan membuat workflow kamu lebih smooth karena semua bisa dilakukan dari satu tempat, tanpa perlu berpindah-pindah aplikasi.
Shortcut Zen Mode & Focus
Kadang kamu butuh fokus penuh tanpa distraksi. Section ini akan kasih shortcut untuk maksimalkan ruang kerja dan hilangkan semua elemen UI yang ganggu. Perfect buat deep focus atau presentation.
Ctrl+K Z / Cmd+K Z - Toggle Zen Mode
Ini adalah mode paling fokus di VS Code. Semua UI element hilang, tinggal kode kamu aja.
Tekan Ctrl+K terus Z (Windows/Linux) atau Cmd+K terus Z (Mac) dan VS Code langsung masuk ke Zen Mode. Full screen, distraction-free, semua sidebar dan panel hilang. Tinggal editor dan kode kamu. Perfect buat deep focus atau coding session yang butuh konsentrasi penuh.
Untuk keluar dari Zen Mode, tekan Esc dua kali. Atau tekan shortcut yang sama lagi.
Berguna banget ketika kamu mau fokus nulis kode tanpa distraksi apapun. Atau waktu presentation, biar audience fokus ke kode bukan ke UI VS Code.
F11 - Toggle Full Screen
Mau maksimalkan ruang layar tapi gak sefull Zen Mode? Shortcut ini adalah jawabannya.
Tekan F11 dan VS Code akan masuk full screen mode. Semua UI sistem operasi (taskbar, menu bar) hilang, tapi UI VS Code seperti sidebar dan panel masih ada. Tekan lagi untuk keluar dari full screen.
Ini berbeda dengan Zen Mode. Full screen masih nampilin sidebar dan panel. Zen Mode benar-benar bersih cuma editor aja.
Berguna ketika kamu butuh screen space maksimal tapi masih perlu akses ke file explorer atau terminal. Atau presentation dimana kamu mau show terminal juga.
Ctrl+K V / Cmd+K V - Open Markdown Preview
Lagi edit file markdown dan mau liat preview-nya? Shortcut ini buka preview side-by-side.
Tekan Ctrl+K terus V (Windows/Linux) atau Cmd+K terus V (Mac) dan preview markdown muncul di sebelah editor. Sekarang kamu bisa edit di kiri, liat hasil di kanan. Real-time preview yang langsung update waktu kamu ngetik.
Sangat berguna untuk edit file README atau dokumentasi. Kamu bisa pastiin formatting markdown kamu bener sebelum commit.
Contoh: Edit README.md dengan heading, list, dan code block. Liat preview untuk mastiin semuanya render dengan benar.
Ctrl+Shift+V / Cmd+Shift+V - Open Markdown Preview to Side
Ini adalah alternative untuk markdown preview. Sama kayak Ctrl+K V, cuma shortcut-nya lebih simpel.
Tekan Ctrl+Shift+V (Windows/Linux) atau Cmd+Shift+V (Mac) dan preview markdown langsung muncul di sebelah. Fungsinya sama persis, cuma beda shortcut. Pilih mana yang lebih gampang kamu inget.
Ctrl+= / Cmd+= - Zoom In
Butuh perbesar font di editor? Mungkin buat presentation atau mata kamu capek? Shortcut ini adalah solusinya.
Tekan Ctrl+= (Windows/Linux) atau Cmd+= (Mac) dan font di editor akan membesar. Tekan berkali-kali untuk zoom in lebih banyak. Semua teks di VS Code akan membesar, termasuk sidebar dan terminal.
Berguna banget waktu presentation atau pair programming. Atau mata kamu udah capek dan butuh font lebih gede biar gak perih.
Tips: Ini adalah tanda sama dengan (=), bukan plus (+). Tapi di keyboard, tombol = dan + ada di tempat yang sama.
Ctrl+- / Cmd+- - Zoom Out
Kebalikan dari zoom in. Shortcut ini untuk perkecil font di editor.
Tekan Ctrl+- (Windows/Linux) atau Cmd+- (Mac) dan font akan mengecil. Berguna kalo kamu accidentally zoom in terlalu banyak. Atau mau lihat lebih banyak code di layar sekaligus.
Ini adalah tanda minus (-). Tekan berkali-kali untuk zoom out lebih banyak.
Ctrl+0 / Cmd+0 - Reset Zoom
Ctrl+0 / Cmd+0 - Reset Zoom
Udah zoom in atau zoom out terlalu banyak dan mau balik ke default? Shortcut ini adalah reset button.
Tekan Ctrl+0 (Windows/Linux) atau Cmd+0 (Mac) dan zoom level langsung balik ke 100%. Angka nol (0), bukan huruf O. Font balik ke ukuran default seperti pertama kali install VS Code.
Berguna ketika kamu udah zoom in buat presentation terus mau balik ke normal. Atau gak inget udah zoom berapa kali dan mau reset aja.
Shortcut File Explorer & Sidebar
VS Code punya beberapa sidebar: file explorer, search, git, extensions, dan debug. Section ini akan kasih shortcut untuk jump cepat ke sidebar manapun tanpa pake mouse. Navigate dengan keyboard lebih cepat dan efisien.
Ctrl+Shift+E / Cmd+Shift+E - Focus File Explorer
Mau buka atau navigate file explorer dengan keyboard? Shortcut ini adalah jawabannya.
Tekan Ctrl+Shift+E (Windows/Linux) atau Cmd+Shift+E (Mac) dan fokus langsung jump ke file explorer di sidebar. Sekarang kamu bisa navigate pake arrow keys. Up/down untuk pindah file, right untuk expand folder, left untuk collapse folder. Enter untuk buka file.
Berguna banget untuk navigate project structure tanpa sentuh mouse. Keyboard-only workflow yang jauh lebih cepat.
Tips: Combine dengan Ctrl+B untuk toggle sidebar. Tekan Ctrl+Shift+E untuk buka dan fokus ke explorer, tekan Ctrl+B untuk hide sidebar. Workflow yang smooth.
Ctrl+Shift+G / Cmd+Shift+G - Focus Source Control
Mau liat git changes atau commit tanpa buka terminal? Shortcut ini buka git sidebar.
Tekan Ctrl+Shift+G (Windows/Linux) atau Cmd+Shift+G (Mac) dan source control sidebar muncul. Di sini kamu bisa liat semua file yang berubah, stage changes, tulis commit message, dan commit. Semua dari dalam VS Code tanpa command line.
Berguna untuk quick check apa aja yang berubah sebelum commit. Atau stage specific files tanpa git add manual.
Tips: Kamu bisa stage file dengan klik plus, unstage dengan klik minus. Tulis commit message di box atas terus Ctrl+Enter untuk commit.
Ctrl+Shift+X / Cmd+Shift+X - Focus Extensions
Mau install extension atau manage extension yang udah terinstall? Shortcut ini buka extensions sidebar.
Tekan Ctrl+Shift+X (Windows/Linux) atau Cmd+Shift+X (Mac) dan extensions sidebar muncul. Di sini kamu bisa search extension, install, uninstall, atau configure. Semua extension management dalam satu tempat.
Berguna ketika kamu butuh install extension baru atau update extension yang ada. Atau disable extension yang gak kepake untuk improve performance.
Contoh: Search "Prettier" untuk install code formatter. Atau search "GitLens" untuk extension git yang powerful.
Ctrl+Shift+D / Cmd+Shift+D - Focus Debug
Mau setup debugging atau lihat debug panel? Shortcut ini buka debug sidebar.
Tekan Ctrl+Shift+D (Windows/Linux) atau Cmd+Shift+D (Mac) dan debug sidebar muncul. Di sini kamu bisa start debugging, lihat variables, watch expressions, call stack, dan breakpoints. Semua tools debugging dalam satu panel.
Berguna untuk quick access ke debug tools. Combine dengan F5 untuk start debugging dan F9 untuk set breakpoint.
Tips: Debug sidebar nampilin semua variables waktu debugging. Kamu bisa hover atau expand untuk liat nilai detail.
Tips Sidebar Navigation
Kelima shortcut ini punya pola yang gampang diinget: Ctrl+Shift + huruf. E untuk Explorer, F untuk Find/Search, G untuk Git, X untuk eXtensions, D untuk Debug.
Fokus kuasai Ctrl+Shift+E dan Ctrl+Shift+F dulu. Kedua ini yang paling sering dipake. Setelah itu, baru pelajari yang lain sesuai kebutuhan kamu.
Navigate sidebar dengan keyboard jauh lebih cepat daripada click icon di samping. Dalam seminggu latihan, ini akan jadi muscle memory.
Setup Shortcut (Optional)
Section ini adalah optional, tapi berguna kalau kamu punya kebutuhan khusus. Misalnya ada shortcut yang bentrok dengan aplikasi lain di komputermu, atau kamu pengen ubah shortcut sesuai kebiasaan kamu.
Ctrl+K Ctrl+S - Buka Pengaturan Shortcut
Ctrl+K Ctrl+S - Buka Pengaturan Shortcut
Untuk customize shortcut, kamu perlu buka menu Keyboard Shortcuts di VS Code.
Tekan Ctrl+K terus tekan Ctrl+S (dua kali tekan, bukan bersamaan). Akan muncul daftar lengkap semua shortcut yang tersedia di VS Code.
Contoh: Kamu ingin ganti Ctrl+P (Quick Open) menjadi Ctrl+Shift+P karena Ctrl+P bentrok dengan aplikasi lain. Tekan Ctrl+K Ctrl+S, search "quick open", ketemu shortcut-nya, terus ubah key combination-nya.
Cari dan Ubah Shortcut
Di halaman Keyboard Shortcuts, ada search box di atas. Ketik nama shortcut yang ingin diubah.
Misalnya ketik "toggle comment" dan semua shortcut yang berhubungan dengan comment akan muncul. Klik shortcut yang ingin diubah, terus tekan key combination yang baru.
Contoh: Cari "toggle comment", ketemu Ctrl+/. Kamu pengen ubah jadi Ctrl+Shift+C. Klik di shortcut itu, VS Code akan tanya key combination baru. Tekan Ctrl+Shift+C, dan shortcut berubah.
Simpan Otomatis
Tidak perlu khawatir tentang menyimpan. VS Code otomatis menyimpan perubahan shortcut yang kamu buat.
Setelah kamu ubah key combination, langsung bisa kamu gunakan. Tidak perlu restart VS Code atau apa pun.
Tips Penting Saat Customize Shortcut
Jangan ubah terlalu banyak shortcut di awal. Kebiasaan menggunakan default shortcut itu penting. Kalau terlalu banyak ubah, justru jadi bingung.
Gunakan default shortcut dulu sampai terbiasa. Setelah sudah nyaman dan merasa ada shortcut yang kurang cocok, baru customize.
Customize hanya untuk shortcut yang sering bentrok atau tidak cocok dengan kebiasaan kamu. Jangan ubah-ubah semua shortcut hanya karena mau.
Contoh Situasi yang Butuh Customize
Kalau shortcut VS Code bentrok dengan shortcut OS kamu (Windows, Mac, Linux), kamu perlu customize. Misalnya Ctrl+Shift+J di VS Code bentrok dengan shortcut Chromebook, kamu bisa ubah.
Kalau kamu terbiasa dengan shortcut dari editor lain (Sublime, Vim, dll), kamu bisa customize VS Code sesuai kebiasaan itu. Tapi ini untuk advanced user, bukan pemula.
Kalau kamu punya preference khusus untuk shortcut tertentu, customize aja. Misalnya kamu lebih suka Ctrl+Q untuk quit daripada default, tinggal ubah.
Kapan Tidak Perlu Customize
Untuk pemula, tidak perlu customize shortcut sama sekali. Gunakan default yang sudah ada di VS Code.
Default shortcut sudah didesain dengan baik. Konsisten, mudah diingat, dan jarang bentrok.
Customize hanya jika kamu benar-benar merasa ada shortcut yang tidak cocok setelah berbulan-bulan pakai VS Code.
Kesimpulan Section Ini
Setup shortcut adalah optional. Artinya ini bukan hal yang wajib kamu lakukan. Kamu bisa skip section ini sepenuhnya dan tetap produktif.
Fokus pada shortcut default dulu. Setelah sudah master semua shortcut di section 2.2 sampai 2.7, baru pikirkan tentang customize.
Ingat: Default shortcut di VS Code sudah bagus. Jangan ubah-ubah kalau tidak perlu. Stability dan consistency lebih penting daripada preference personal.
Tips Menghafal Shortcut
Image by Freepik
Menghafal banyak shortcut bisa terasa menakutkan. Tapi sebenarnya ada strategi yang tepat supaya proses menghafal jadi mudah dan cepat.
Mulai dengan 5 Shortcut Paling Penting
Jangan coba hafal semua shortcut sekaligus. Mulai dari 5 shortcut yang paling sering dipakai dulu.
Kelima shortcut ini adalah:
Ctrl+P (Buka Cepat) - untuk buka file dengan cepat. Ini akan kamu pakai berkali-kali setiap hari.
Ctrl+Shift+P (Command Palette) - untuk akses semua perintah VS Code. Sangat berguna ketika kamu lupa shortcut untuk sesuatu.
Ctrl+/ (Toggle Komentar) - untuk komentar atau batalkan komentar baris kode. Ini yang paling sering dipakai dalam editing.
Ctrl+H (Cari dan Ganti) - untuk mencari dan mengganti teks. Berguna sekali untuk refaktor ulang kode.
Ctrl+D (Pilih Kata) - untuk pilih dan ubah semua tempat di mana kata yang sama muncul. Ini adalah shortcut yang menghemat paling banyak waktu.
Fokus hanya pada kelima shortcut ini sampai benar-benar otomatis. Jangan tambah yang lain dulu.
Praktik Rutin: Satu Shortcut Per Hari
Jangan coba belajar kelima shortcut sekaligus dalam satu hari. Hasilnya kamu bakal lupa semuanya.
Mulai hari pertama dengan Ctrl+P. Gunakan shortcut ini setiap kali kamu butuh buka file. Jangan pakai mouse. Paksa diri sendiri menggunakan shortcut.
Hari kedua tambah Ctrl+Shift+P. Sekarang kamu udah punya dua shortcut yang harus diingat. Terus gunakan dua ini setiap hari.
Hari ketiga tambah Ctrl+/. Sekarang tiga shortcut. Lanjutkan cara ini sampai kelima shortcut semua sudah otomatis.
Dalam seminggu, kelima shortcut ini bakal jadi reflek otomatis. Jari kamu akan langsung tahu apa yang harus ditekan tanpa perlu berpikir.
Paksa Diri Sendiri: Jangan Gunakan Mouse
Ini adalah tips paling penting. Jangan gunakan mouse untuk aksi yang sudah ada shortcut-nya.
Ketika kamu mau buka file, jangan klik di file explorer. Tekan Ctrl+P. Ketika mau cari dan ganti, tekan Ctrl+H. Jangan buka menu cari dan ganti pakai mouse.
Awalnya akan terasa lambat dan canggung. Tapi ini adalah proses pembelajaran yang penting. Dalam beberapa hari, tangan kamu akan terbiasa dan jadi cepat.
Praktik konsisten adalah kunci. Semakin sering kamu gunakan shortcut, semakin cepat jari kamu bereaksi sampai menjadi otomatis.
Daftar Cepat: Printout atau Bookmark
Buat daftar cepat yang berisi kelima shortcut dan tempelkan di monitor kamu sebagai pengingat.
Kamu bisa print daftar shortcut atau bookmark link shortcut di browser. Setiap kali kamu lupa, lihat daftar itu.
Ini bukan curang. Ini adalah cara yang bagus untuk mengingat shortcut tanpa perlu menghafalnya sempurna.
Seiring waktu, kamu bakal kurangi ketergantungan pada daftar cepat. Semakin sering digunakan, semakin mudah diingat.
Kesabaran adalah Kunci
Ingat bahwa menghafal shortcut bukan perlombaan, tapi proses yang bertahap. Beberapa developer baru memang butuh 2-3 bulan untuk benar-benar nyaman dengan semua shortcut.
Itu normal. Jangan malu atau frustrasi. Setiap hari kamu menggunakan shortcut, kamu semakin dekat dengan tujuan.
Satu hal yang pasti: kalau kamu konsisten praktik, dalam beberapa minggu kamu bakal lihat perbedaan besar dalam produktivitas kamu. Ini sangat berharga.
