VS Code punya lebih dari 50.000 extension di marketplace-nya. Angka yang terdengar meyakinkan — sampai Anda benar-benar harus memilih mana yang dipasang.
Kami sudah melewati fase itu. Install banyak, uninstall banyak, editor jadi lemot, produktivitas malah turun. Setelah bertahun-tahun coding dan testing puluhan extension, kami menyimpulkan satu hal: lebih sedikit extension yang tepat selalu mengalahkan banyak extension yang asal pasang.
Artikel ini khusus untuk Anda yang baru mulai belajar web development. Bukan daftar 20 extension sekaligus yang bikin kewalahan — hanya 5 extension yang paling berdampak langsung pada kualitas dan kecepatan kerja Anda sebagai web developer pemula di 2026.
Pasang 5 ini dulu. Kuasai. Baru pertimbangkan yang lain.
Kenapa VS Code? (Buat yang Baru Mulai)
Kalau Anda belum punya code editor dan sedang mempertimbangkan pilihan, Visual Studio Code (VS Code) adalah jawabannya untuk pemula web development.
Gratis, open-source, tersedia di Windows/Mac/Linux, dan — yang paling penting — dipakai oleh mayoritas web developer profesional di seluruh dunia. Data dari Stack Overflow Developer Survey 2025 menunjukkan VS Code masih menjadi code editor nomor 1 dengan lebih dari 73% developer menggunakannya.
Download VS Code di code.visualstudio.com kalau belum punya.
Cara Install Extension di VS Code
Sebelum masuk ke daftar, ini cara install extension yang paling cepat:
- Buka VS Code
- Tekan Ctrl + Shift + X (Windows/Linux) atau Cmd + Shift + X (Mac)
- Panel Extensions akan muncul di sidebar kiri
- Ketik nama extension di kolom search
- Klik Install
Bisa juga tekan Ctrl + P, ketik ext install [nama-extension], lalu tekan Enter.
Sekarang, ke daftar utamanya.
1. Prettier – Code Formatter
Download: 50+ juta | Gratis | Publisher: Prettier
Apa yang Dilakukan Prettier?
Prettier adalah automatic code formatter. Setiap kali Anda save file, Prettier otomatis merapikan kode Anda — indentasi, spasi, tanda kutip, koma — semua disesuaikan dengan aturan yang konsisten.
Satu hal yang sering bikin frustrasi developer pemula adalah kode yang tidak rapi: kadang pakai tab, kadang spasi, kadang tanda kutip tunggal, kadang ganda. Setelah beberapa minggu, kode Anda jadi susah dibaca sendiri.
Prettier menyelesaikan masalah ini sepenuhnya dan otomatis.
Kenapa Ini yang Pertama?
Karena kebiasaan menulis kode rapi harus dibentuk sejak hari pertama belajar. Jauh lebih mudah membangun kebiasaan baik dari awal daripada memperbaiki kebiasaan buruk yang sudah mengakar.
Prettier juga tidak pilih-pilih bahasa — mendukung HTML, CSS, JavaScript, TypeScript, JSON, Markdown, dan banyak lagi.
Cara Setup Prettier
Install extension: Cari "Prettier - Code formatter" (by Prettier) di Extensions panel.
Aktifkan format on save:
- Tekan Ctrl + Shift + P → ketik "Open User Settings (JSON)"
- Tambahkan baris berikut:
{
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode"
}
- Save file settings
Sekarang setiap kali Anda tekan Ctrl + S, kode langsung rapi otomatis.
Buat file konfigurasi Prettier (opsional tapi recommended):
Di folder project Anda, buat file bernama .prettierrc dan isi dengan:
{
"semi": true,
"singleQuote": true,
"tabWidth": 2,
"trailingComma": "es5"
}
Konfigurasi ini berlaku untuk semua file di project tersebut.
Yang Sering Jadi Masalah
Prettier kadang konflik dengan ESLint (extension nomor 2 di bawah). Solusinya: install package eslint-config-prettier di project Anda lewat terminal:
npm install --save-dev eslint-config-prettier
2. ESLint
Download: 40+ juta | Gratis | Publisher: Microsoft
Apa yang Dilakukan ESLint?
Prettier merapikan tampilan kode. ESLint menjaga kualitas kode.
ESLint adalah linter — alat yang menganalisis kode JavaScript/TypeScript Anda secara real-time dan memberikan peringatan kalau ada potensi bug, praktik coding yang buruk, atau pelanggaran aturan yang sudah Anda definisikan.
Bayangkan punya asisten yang terus membaca kode Anda sambil Anda mengetik, lalu menepuk bahu dan bilang: "Hei, variabel ini sudah dideklarasikan tapi tidak pernah dipakai" atau "Fungsi ini harusnya punya return statement."
Itu ESLint.
Contoh Error yang Ditangkap ESLint
// ESLint akan warning: 'userName' is assigned a value but never used
const userName = "John";
console.log("Hello World");
// ESLint akan error: Expected '===' and instead saw '=='
if (age == 18) {
console.log("Adult");
}
Keduanya valid secara sintaks — JavaScript tidak akan error. Tapi keduanya adalah bug potensial yang ESLint tangkap sebelum Anda deploy.
Cara Setup ESLint
Install extension: Cari "ESLint" (by Microsoft) di Extensions panel.
Inisialisasi ESLint di project: Buka terminal di VS Code (Ctrl + `) dan jalankan:
npm init @eslint/config@latest
Ikuti promptnya — pilih "To check syntax and find problems", pilih module type, pilih framework (React/Vue/None), pilih TypeScript atau tidak.
ESLint akan otomatis buat file konfigurasi .eslint.config.js di project Anda.
Verifikasi ESLint berjalan:
Buka file JavaScript Anda. Kalau ada garis merah/kuning berkelok di bawah kode, ESLint sudah aktif.
ESLint untuk Pemula: Mulai Simple
Jangan langsung pasang ratusan rules ESLint. Mulai dengan konfigurasi default, pelajari setiap peringatan yang muncul, dan cari tahu kenapa itu dianggap masalah. Proses ini yang benar-benar mengajarkan Anda menulis JavaScript yang lebih baik.
3. Live Server
Download: 74+ juta | Gratis | Publisher: Ritwick Dey
Apa yang Dilakukan Live Server?
Live Server adalah local development server dengan fitur live reload.
Sederhananya: setiap kali Anda save perubahan di file HTML, CSS, atau JavaScript, browser otomatis refresh dan menampilkan perubahan tersebut. Tidak perlu Alt+Tab ke browser, tidak perlu tekan F5.
Ini kedengarannya kecil. Tapi kalau Anda sedang debug tampilan dan harus save → pindah ke browser → refresh → lihat hasilnya → balik ke editor → edit lagi → save → ulang terus, penghematan waktu dari Live Server terasa sangat signifikan.
Cara Pakai Live Server
Install extension: Cari "Live Server" (by Ritwick Dey) di Extensions panel.
Jalankan Live Server:
Cara 1: Klik kanan file HTML di Explorer → pilih "Open with Live Server"
Cara 2: Klik tombol "Go Live" di pojok kanan bawah status bar VS Code
Cara 3: Tekan Alt + L, Alt + O
Browser akan otomatis terbuka di http://127.0.0.1:5500 dengan file Anda.
Sekarang coba ubah warna background di CSS dan save. Browser langsung update tanpa perlu refresh manual.
Satu Catatan Penting
Live Server bekerja sempurna untuk proyek HTML/CSS/JavaScript statis. Kalau Anda sudah pakai framework seperti React, Vue, atau Next.js — framework tersebut sudah punya development server sendiri (Vite, Create React App, dll) yang lebih baik. Untuk kasus itu, Live Server bisa dinonaktifkan.
4. GitLens
Download: 40+ juta | Gratis (dengan fitur premium opsional) | Publisher: GitKraken
Apa yang Dilakukan GitLens?
VS Code sudah punya integrasi Git bawaan. GitLens memperkuat integrasi tersebut dengan menambahkan informasi yang jauh lebih detail.
Fitur paling berguna untuk pemula: inline blame annotation. Setiap baris kode di file Anda, GitLens menampilkan keterangan kecil di sebelah kanannya — siapa yang terakhir mengubah baris tersebut, kapan, dan isi commit message-nya.
Terdengar sepele. Padahal ini sangat berguna saat:
- Kerja tim dan ingin tahu siapa yang ubah bagian tertentu
- Debug masalah dengan cara melacak kapan bug pertama kali muncul
- Memahami konteks perubahan kode dari commit message-nya
Fitur GitLens yang Paling Dipakai Pemula
1. Inline blame
Arahkan kursor ke baris kode mana saja. Di sebelah kanan akan muncul teks abu-abu kecil yang menampilkan info commit terakhir untuk baris itu.
2. File history
Klik kanan di file → "Open File History" → lihat semua perubahan yang pernah terjadi pada file tersebut dari waktu ke waktu.
3. Commit graph
Tekan Ctrl + Shift + G → pilih tab "Commits" → lihat visualisasi history commit dalam bentuk graph.
Setup GitLens
Tidak perlu konfigurasi khusus. Install dan langsung jalan.
Cari "GitLens — Git supercharged" (by GitKraken) di Extensions panel → Install.
Tips untuk pemula: GitLens punya banyak fitur premium berbayar yang akan terus ditawarkan. Untuk kebutuhan pemula, versi gratisnya lebih dari cukup. Abaikan prompt upgrade dulu sampai Anda benar-benar butuh fitur spesifik yang berbayar.
5. Error Lens
Download: 10+ juta | Gratis | Publisher: Alexander
Apa yang Dilakukan Error Lens?
VS Code menampilkan error dan warning dengan garis berlekuk di bawah kode. Untuk melihat detail pesannya, Anda harus hover kursor ke sana atau lihat di panel Problems di bawah.
Error Lens mengubah cara itu. Ia menampilkan pesan error dan warning langsung di baris yang bermasalah, dalam warna merah atau kuning, tanpa perlu hover atau buka panel apapun.
Sebelum Error Lens:
const x = "hello" (ada garis merah tapi tidak jelas pesannya)
Setelah Error Lens:
const x = "hello" ← 'x' is declared but its value is never read. ts(6133)
Pesan error tampil langsung di editor. Anda langsung tahu masalahnya tanpa pindah fokus.
Kenapa Error Lens Masuk Daftar Ini?
Karena sebagai pemula, kecepatan feedback loop sangat penting. Semakin cepat Anda tahu ada yang salah, semakin cepat Anda belajar dan memperbaikinya.
Error Lens memperpendek jarak antara "menulis kode salah" dan "mengetahui ada yang salah" menjadi hampir nol.
Setup Error Lens
Cari "Error Lens" (by Alexander) di Extensions panel → Install.
Tidak perlu konfigurasi tambahan. Langsung aktif setelah install.
Kustomisasi opsional (tambahkan ke settings JSON):
{
"errorLens.enabledDiagnosticLevels": ["error", "warning"],
"errorLens.fontSize": "13px"
}
Setting di atas membuat Error Lens hanya tampilkan error dan warning (bukan hint/info yang sering terlalu banyak), dengan ukuran font yang lebih kecil agar tidak terlalu memenuhi layar.
Ringkasan: 5 Extension + Fungsinya
| Extension | Fungsi Utama | Prioritas |
|---|---|---|
| Prettier | Format kode otomatis saat save | Install pertama |
| ESLint | Deteksi bug dan bad practice secara real-time | Install kedua |
| Live Server | Preview browser dengan auto-reload | Install ketiga |
| GitLens | Informasi Git yang detail langsung di editor | Install keempat |
| Error Lens | Tampilkan pesan error langsung di baris kode | Install kelima |
Urutan Install yang Disarankan
Kalau baru setup VS Code dari nol, ikuti urutan ini:
- Prettier dulu — karena ini mempengaruhi semua file yang Anda tulis dari awal
- ESLint — supaya langsung terbiasa menulis JavaScript yang bersih
- Live Server — supaya bisa langsung lihat hasil kerja di browser
- Error Lens — supaya error tidak tersembunyi di panel bawah
- GitLens — supaya mulai terbiasa memahami Git history sejak awal
Bonus: Extension Tambahan Setelah Menguasai 5 di Atas
Setelah nyaman dengan kelima extension di atas, ini yang bisa dipertimbangkan selanjutnya:
- Auto Rename Tag: Rename tag HTML pembuka → tag penutup otomatis ikut berubah. Sangat menghemat waktu saat refactor HTML.
- Path Intellisense: Autocomplete path file saat import. Tidak perlu hafal struktur folder.
- Tailwind CSS IntelliSense: Wajib kalau pakai Tailwind CSS. Autocomplete class name Tailwind langsung di editor.
- Thunder Client: Test API REST langsung di VS Code tanpa buka Postman. Ringan dan cepat.
- GitHub Copilot: AI coding assistant dari GitHub/Microsoft. Berbayar (ada trial gratis), tapi kalau budget ada, ini signifikan meningkatkan produktivitas.
Tapi sekali lagi — kuasai dulu yang 5 utama. Jangan tergoda install semuanya sekaligus.
Satu Tips Terakhir: Jaga Editor Tetap Ringan
VS Code yang terlalu banyak extension akan mulai terasa lemot — startup lambat, autocomplete lag, dan pengalaman coding secara keseluruhan menurun.
Cara cek extension mana yang paling banyak makan resource:
- Tekan Ctrl + Shift + P
- Ketik "Show Running Extensions"
- Tekan Enter
VS Code akan tampilkan daftar semua extension yang aktif beserta waktu aktivasinya dalam milidetik. Extension dengan waktu aktivasi tinggi (di atas 500ms) adalah yang paling membebani.
Kalau ada extension yang jarang dipakai tapi terus aktif — disable saja. VS Code mendukung disable extension per workspace, sehingga extension tertentu hanya aktif di project yang memang memerlukannya.
Kesimpulan
5 extension VS Code wajib untuk web developer pemula di 2026 adalah:
- Prettier — biar kode selalu rapi otomatis
- ESLint — biar bug ketangkap sebelum jadi masalah
- Live Server — biar bisa lihat hasil kerja di browser secara real-time
- GitLens — biar memahami Git history dengan lebih baik
- Error Lens — biar pesan error tidak tersembunyi
Lima extension ini adalah fondasi. Tidak berlebihan, tidak membebani editor, dan masing-masing punya dampak langsung yang bisa Anda rasakan sejak hari pertama.
Mulai dari sini. Sisanya bisa menyusul seiring Anda berkembang.
Extension VS Code mana yang paling sering Anda pakai? Atau ada yang merasa harus masuk daftar ini tapi tidak ada di sini? Diskusi di kolom komentar!
Posting Komentar