6 Ekstensi VS Code yang Seharusnya Sudah Kamu Pasang Bertahun-tahun Lalu

Halo, teman-teman developer! Saya sudah pakai VS Code sejak versi preview di tahun 2015. Selama bertahun-tahun itu, saya pasang dan uninstall ratusan ekstensi, tapi selalu ada saja yang baru dan bikin saya mikir, "Kenapa baru sekarang ketemu ini?!"

Nah, artikel ini akan membahas VS Code Extensions You Should Install yang menurut saya wajib ada di setiap setup VS Code baru. Ini bukan daftar final yang sakral, ya. Tapi, enam ekstensi ini sudah terbukti bertahan lama di setup saya setelah melewati seleksi ketat. Kalau kamu sering kerja pakai Markdown, mainan Git, atau bersih-bersih JavaScript, kamu pasti menemukan sesuatu yang berguna di sini.

VS Code sendiri adalah editor kode gratis dan open source yang powerful. Dia menggabungkan semua kebutuhan developer. Mulai dari code completion IntelliSense, debugging terintegrasi, tools Git bawaan, sampai perpustakaan ekstensi yang luas. Semua itu dikemas dalam paket yang cepat dan ringan. Dia juga bisa jalan di Windows, Mac, dan Linux.

Yuk, kita bedah satu per satu!

1. Markdown All In One: Wajib Punya buat Penulis Markdown

Saya pakai Markdown buat nulis catatan bahkan artikel. Jadi, tidak heran kalau Markdown All In One jadi nomor satu di daftar ini. Fitur yang paling sering saya pakai adalah pembuatan daftar isi atau Table of Contents (ToC) otomatis. Kamu tinggal buka Command Palette (Ctrl+Shift+P atau Cmd+Shift+P), ketik Markdown All In One: Create Table of Contents, lalu ekstensi ini akan bikin ToC berdasarkan heading yang kamu punya. Enaknya lagi, ToC ini akan update otomatis kalau kamu tambah atau hapus bagian. Hemat waktu banget!

Penanganan daftar juga fitur kecil tapi jitu. Tekan Enter setelah item bernomor, ekstensi ini langsung kasih nomor berikutnya. Tekan Tab, dia langsung bikin sub-list dengan penomoran otomatis yang berubah kalau kamu pindah-pindah item. Ditambah lagi, ada panel preview bawaan yang memungkinkan kamu lihat source dan preview secara berdampingan di layar lebar untuk verifikasi format tanpa keluar editor.

bash
code --install-extension yzhang.markdown-all-one

2. ESLint: Tangkap Kesalahan JavaScript Sebelum Jadi Bug

Kalau kamu sering nulis JavaScript atau TypeScript, ESLint ini salah satu ekstensi yang baru kamu hargai setelah kamu buang waktu berjam-jam cari bug yang seharusnya bisa langsung ketangkap. ESLint nyambung ke VS Code dan memeriksa kode kamu saat kamu mengetik. Dia langsung kasih tanda kesalahan sintaks, code smell, dan inkonsistensi gaya langsung di editor.

ESLint itu lebih configurable daripada spell checker biasa untuk kode. Kamu bisa tentukan aturan dan tingkat keparahan sendiri. Jadi, await yang kelupaan atau console.log yang tidak sengaja ketinggalan di kode produksi bisa langsung ketahuan. Kalau kamu set "editor.codeActionsOnSave": true, masalah umum bahkan bisa diperbaiki setiap kamu save file.

Awalnya memang ada kurva belajar untuk setup-nya. Butuh waktu untuk dapat kombinasi preset, plugin, dan ignore file yang pas supaya tidak bentrok dengan proyek kamu. Tapi setelah konfigurasinya beres, dia akan diam-diam menangkap jenis masalah logika yang formatter seperti Prettier tidak akan sentuh. Contohnya, kesalahan terkait promise dan variabel yang tidak terpakai.

bash
code --install-extension dbaeumer.vscode-eslint

3. GitHub Pull Requests and Issues: Review PR Tanpa Meninggalkan Editor

Dulu, saya selalu review pull request (PR) di web interface GitHub. Untuk perubahan kecil, memang tidak masalah. Tapi, begitu sebuah PR menyentuh lebih dari beberapa file, web UI bisa terasa lambat. Ekstensi GitHub Pull Requests and Issues memindahkan semua itu ke dalam VS Code.

Setelah sign in ke GitHub, kamu akan dapat panel khusus di Activity Bar yang menampilkan PR dan issue yang terbuka untuk repo apa pun yang sedang kamu buka. Kamu bisa bikin PR baru dengan memilih base branch, menambahkan judul dan deskripsi, lalu submit tanpa perlu buka browser. Untuk review, klik file apa pun akan membuka diff langsung di editor, lengkap dengan syntax highlighting dan dukungan komentar inline.

Kamu juga bisa memulai review, membalas thread yang ada, dan menyelesaikan percakapan, semua tanpa context-switching. Buat siapa pun yang sering review PR, ekstensi ini akan bikin kamu tetap di editor tempat kamu melakukan sebagian besar pekerjaan.

bash
code --install-extension GitHub.vscode-pull-request-github

4. Error Lens: Lihat Error Langsung di Baris Kode

Cara standar VS Code menunjukkan error adalah dengan garis bergelombang tipis di bawah kode. Itu berfungsi, tapi di file yang padat, garis-garis itu gampang banget lolos dari pandangan. Error Lens memperbaikinya dengan menampilkan pesan error aktual secara inline, tepat di akhir baris yang bermasalah, dengan seluruh baris ditandai warna. Merah untuk error, kuning untuk warning, biru untuk info.

Ekstensi ini tidak membuat diagnostiknya sendiri. Dia hanya menampilkan apa yang sudah dilaporkan oleh language server kamu, TypeScript compiler, ESLint, atau linter lainnya. Jika sebuah tool menandai masalah dan itu muncul di panel Problems, Error Lens akan menampilkannya secara inline. Jadi, dia cocok dengan setiap tool diagnostik lain yang kamu jalankan.

Kalau pesan inline terasa terlalu ramai, kamu bisa atur. Mode followCursor membatasi dekorasi ke baris tempat cursor berada, dan pengaturan delay menambahkan jeda singkat sebelum pesan muncul. Kamu juga bisa mengecualikan pesan tertentu dengan pola regex. Saya sendiri mengaturnya untuk hanya menampilkan error dan warning, itu paling pas antara visibilitas dan gangguan.

bash
code --install-extension usernamehw.errorlens

5. Prettier: Format Otomatis, Debat Gaya Kode Berakhir

Prettier adalah code formatter yang punya "pendapat" kuat. Artinya, dia bisa bikin sebagian besar keputusan formatting untuk kamu, seperti indentasi, line break, gaya kutipan, dan titik koma. Lalu, dia akan cetak ulang kode kamu sesuai aturannya sendiri. Kamu tinggal tulis, save, dan hasilnya langsung rapi.

Untuk setup-nya, setelah instal ekstensi, kamu jadikan dia default formatter dengan menambahkan "editor.defaultFormatter": "esbenp.prettier-vscode" ke pengaturan VS Code. Setelah itu, kamu bisa menulis kode berantakan seharian, dan setiap kali save, dia akan merapikan sendiri. Prettier mendukung JavaScript, TypeScript, CSS, HTML, JSON, Markdown, YAML, dan banyak lagi.

Prettier paling efektif untuk tim. Kamu tinggal letakkan file .prettierrc di proyek kamu, commit, dan setiap kontributor akan memformat kode dengan cara yang sama. Jika kamu menggunakan ESLint barengan, tambahkan paket eslint-config-prettier untuk menghindari konflik aturan. Prettier menangani formatting dan ESLint menangani kualitas kode, mereka bekerja paling baik saat fokus pada tugas masing-masing.

bash
code --install-extension esbenp.prettier-vscode

6. GitLens: Lihat Siapa Mengubah Apa dan Kapan

VS Code punya dukungan Git bawaan, tapi dia tidak menceritakan "kisah" di balik kode. Misalnya, siapa terakhir mengedit baris ini atau kapan. GitLens menghilangkan tebak-tebakan itu. Cukup letakkan cursor kamu di baris mana pun, dan GitLens akan menunjukkan siapa terakhir memodifikasinya, kapan, dan pesan commit-nya, tepat di sebelah kode.

Selain fitur "blame", GitLens menambahkan split diff view untuk membandingkan commit dan branch, commit search yang bisa disaring berdasarkan penulis, file, atau pesan, dan panel file history yang menunjukkan setiap perubahan yang dialami sebuah file. Ada juga heat map di gutter yang menyoroti bagian file mana yang paling sering diedit. Ini berguna untuk mengidentifikasi "titik panas" di codebase.

Tidak semua fitur di GitLens gratis. Beberapa fitur, seperti visual commit graph, terkunci di balik langganan berbayar. Tapi fitur intinya, seperti blame, file history, diffs, dan search, sudah lebih dari cukup. Kalau kamu sering mencoba memahami kenapa sebuah baris kode ada, GitLens akan menyelamatkan kamu dari ketik git log dan git blame di terminal.

bash
code --install-extension eamodio.gitlens

Ekstensi Ini Bikin VS Code Mendekati Sempurna

Semua ekstensi ini menghilangkan friksi-friksi kecil yang menumpuk selama seharian kerja. Mulai dari menyipitkan mata melihat garis bawah, alt-tab ke GitHub, memformat kode secara manual, sampai menebak siapa yang menulis fungsi yang membingungkan. Secara individu, masing-masing menghemat beberapa detik. Bersama-sama, mereka mengubah VS Code menjadi tool yang terasa dibuat khusus untuk cara saya bekerja. Kalau saya bisa kembali dan memberi tahu diri saya di tahun 2015 untuk menginstal enam ekstensi ini dan melupakan yang lainnya, ya, enam ini lah pilihannya.