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.

### Referensi
https://www.makeuseof.com/vs-code-extensions-you-should-install/

Sebagai developer yang menggunakan VS Code sejak 2015, ini adalah 6 ekstensi VS Code yang seharusnya sudah saya pasang bertahun-tahun lalu. Temukan ekstensi yang akan mengubah alur kerjamu di editor kesayanganmu.

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

Reggi

Solusi praktis integrasi webmail custom ke dalam dashboard Gmail. Kelola, baca, dan kirim email domain pribadi langsung dari satu tempat tanpa ribet gonta-ganti tab.

Mengapa Kamu Masih Buka Dua Tab Terpisah? Panduan Setup Custom Webmail Langsung di Dashboard Gmail

Pelajari efisiensi merakit mesin tetas telur listrik AC otomatis dengan modal murah untuk mendongkrak hasil ternak unggas tanpa repot bolak-balik telur manual.

Otomasi Ternak Unggas: Kenapa Rakit Sendiri Mesin Penetas Telur AC Jauh Lebih Worth It Dibanding Cara Konvensional?

Pelajari bagaimana mesin tetas telur berbasis arus listrik DC bekerja menjaga suhu dan kelembapan ideal untuk mendongkrak keberhasilan penetasan telur unggas.

Mesin Tetas Telur Arus DC: Solusi Hardware Murah Buat Tingkatin Angka Penetasan Unggas

Kupas tuntas seluk-beluk mobil aki anak dengan kontrol ganda dan fitur multimedia. Pahami batas spesifikasi hardware sebelum eksekusi build sendiri.

EV Versi Mini: Membedah Mobil Listrik Aki Lengkap dengan Remote Control dan Fitur Multimedia

Pelajari cara merakit smart power strip berbasis NodeMCU dan Blynk untuk kontrol daya nirkabel serta integrasi IoT yang aman dan efisien.

Mengapa Beli Mahal Kalau Bisa Bikin Sendiri? Rancang Smart Power Strip Berbasis NodeMCU dan Blynk

Solusi tuntas mengatasi bug sistem dan software bermasalah di MacBook dengan panduan install ulang macOS lewat Internet Recovery secara aman.

#prettier

Getting Lastest Post..

Populer Bulan Ini