5 Ekstensi VSCode yang Wajib Dipakai Developer

5 Ekstensi VSCode yang Wajib Dipakai Developer, lengkap dengan fungsi, alasan pentingnya, fitur utama, ilustrasi penggunaan, dan tips tambahan.

1. Prettier - Code Formatter

 Fungsi Utama:

Prettier adalah code formatter otomatis yang membantu menjaga konsistensi penulisan kode dengan merapikan syntax sesuai aturan standar.

Fitur Utama:

• Auto-format saat save file.
• Mendukung banyak bahasa: JS, TS, HTML, CSS, JSON, YAML, Markdown, dll.
• Bisa diintegrasikan dengan ESLint dan Git hooks.

- Mendukung format style seperti:

• Tanda kutip tunggal/ganda.
• Indentasi tab/spasi.
• Baris maksimum.

Kenapa Wajib?

• Kode rapi = lebih mudah dibaca dan di-maintain.
• Menghindari konflik saat bekerja tim (karena semua sudah otomatis di-format).
• Cocok untuk proyek personal dan kolaborasi tim.

Cara Pakai:

1.Install extension "Prettier - Code Formatter".

2.Buka settings.json, tambahkan:

"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true

3.Set aturan tambahan jika ingin:

"prettier.singleQuote": true,
"prettier.semi": false

2. ESLint

 Fungsi Utama:

ESLint adalah linter untuk JavaScript/TypeScript yang menganalisis kode dan memberikan peringatan/error jika tidak sesuai aturan.

Fitur Utama:

• Deteksi variabel yang tidak digunakan.
• Deteksi kesalahan syntax, kesalahan logika.
• Bisa auto-fix error ringan saat save.
• Terintegrasi dengan Prettier untuk format + lint.

Kenapa Wajib?

• Mencegah bug sedini mungkin sebelum dijalankan.
• Cocok untuk proyek tim karena bisa enforce coding style.
• Bisa dikonfigurasi sesuai kebutuhan (rules, plugins, dll).

Cara Pakai:

1.Install ESLint extension.

2.Pastikan proyek memiliki .eslintrc.js atau .eslintrc.json:

module.exports = {
  extends: ['eslint:recommended'],
  rules: {
    semi: ['error', 'always'],
    quotes: ['error', 'single'],
  },
};

3.Jalankan:

npx eslint .

3. Live Server

 Fungsi Utama:

Live Server membuat file HTML kamu bisa langsung di-preview di browser dengan auto-refresh setiap kali kamu menyimpan file.

Fitur Utama:

• Real-time reload saat file berubah.
• Mendukung HTML, CSS, JS, bahkan framework (jika dikonfigurasikan).
• Sangat ringan dan mudah dipakai.

Kenapa Wajib?

• Sangat cocok untuk front-end developer.
• Membuat proses desain UI/UX jadi lebih cepat.
• Cocok buat pemula yang ingin belajar HTML/CSS tanpa harus pakai build tools.

Cara Pakai:

1. Install extension “Live Server”.
2. Klik kanan pada file index.html → pilih "Open with Live Server".
3. Akan otomatis membuka tab di browser: http://127.0.0.1:5500.

4. Path Intellisense

 Fungsi Utama:

Ekstensi ini memberikan autocomplete path saat kamu menulis import atau , sehingga tidak perlu menghafal path secara manual.

Fitur Utama:

• Auto-suggest path file dan folder saat mengetik.
• Mendukung import di berbagai bahasa (JS, TS, HTML, dll).
• Bekerja dengan struktur folder besar.

Kenapa Wajib?

• Menghemat waktu saat mengetik import.
• Mencegah typo saat import file/gambar/module.
• Sangat membantu saat bekerja di proyek skala besar.

Cara Pakai:

1.Install extension “Path Intellisense”.

2.Langsung aktif otomatis, misalnya:

import logo from './assets/lo'; 
// otomatis menyarankan: logo.png, logo.svg, dll

3.Bisa dikustomisasi untuk ignore folder tertentu di settings.

5. GitLens — Git supercharged

 Fungsi Utama:

GitLens memperkuat fitur Git di dalam VSCode dengan menampilkan riwayat perubahan kode, siapa yang mengubahnya, dan alasannya.

Fitur Utama:

• "Git Blame" langsung di editor (lihat siapa edit baris tertentu).
• Lihat history commit per file atau per baris.
• Lihat perubahan antar commit.
• UI visual untuk riwayat Git, commit, stash, dll.

Kenapa Wajib?

• Mengetahui alasan dan orang di balik perubahan kode.
• Membantu debugging atau rollback ke versi sebelumnya.
• Cocok untuk tim yang pakai Git sebagai version control.

Cara Pakai:

1.Install “GitLens”.

2.Hover di baris kode → akan muncul info:

You - edited 3 days ago (Initial layout commit)

3.Klik kanan → GitLens → View File History untuk melihat timeline perubahan.

BONUS TIPS PENGGUNAAN:

Penutup:

• Menggunakan ekstensi ini akan:
• Menjadikan workflow kamu lebih cepat dan efisien.
• Membantu kamu menulis kode yang bersih, aman, dan profesional.
• Sangat berguna baik kamu ngoding sendiri atau kerja dalam tim.