devbox.id

Developer tools, self-hosted dev environments, productivity for solo engineers

VS Code Extension Produktivitas Coding Terbaik

by Marcus Chen
VS Code Extension Produktivitas Coding Terbaik

Pernah nggak kamu ngerasa udah coding berjam-jam tapi output-nya sedikit? Bukan karena kamu lambat — tapi karena tooling-nya yang nyusahin. Autocomplete nggak relevan, navigation antar file makan 10 klik, format kode harus manual sebelum commit. Itu bukan masalah skill, itu masalah setup.

Gue udah coba puluhan extension selama beberapa tahun terakhir. Sebagian cuma bikin VS Code makin berat. Sebagian lagi beneran ngubah cara kerja gue. Artikel ini cuma bahas yang kedua — VS Code extension produktivitas coding yang survive di workflow gue sampai sekarang.

Kenapa Extension Salah Pilih Justru Bikin Lambat

VS Code itu ringan by default. Masalah datang waktu kamu install extension sembarangan — startup time naik, IntelliSense jadi lag, memory usage merayap ke 1 GB lebih. Gue pernah di titik itu: VS Code butuh 8 detik buat buka project Node.js biasa.

Solusinya bukan uninstall semua extension. Solusinya adalah pilih extension yang punya ROI jelas: waktu yang dihemat lebih besar dari overhead yang ditambahkan.

Berikut kriteria gue:

  • Nggak nambahin lebih dari ~30ms ke startup time (cek via Developer: Startup Performance)
  • Solve problem yang gue hadapi minimal sekali sehari
  • Punya setting yang bisa dikonfigurasi, bukan one-size-fits-all

1. Prettier + ESLint: Format dan Lint Otomatis Saat Save

Ini bukan extension baru, tapi cara konfigurasinya yang sering salah. Banyak developer install keduanya tapi nggak connect — jadi Prettier dan ESLint saling override, hasilnya kode malah berantakan setelah save.

Install extension:

  • Prettier - Code formatter (esbenp.prettier-vscode)
  • ESLint (dbaeumer.vscode-eslint)

Konfigurasi yang bener di .vscode/settings.json project kamu:

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  },
  "eslint.validate": ["javascript", "typescript", "javascriptreact", "typescriptreact"]
}

Dan di root project, pastikan ada .eslintrc.json yang pakai eslint-config-prettier supaya rules ESLint nggak konflik sama Prettier:

npm install --save-dev eslint-config-prettier

{
  "extends": ["eslint:recommended", "prettier"],
  "env": {
    "node": true,
    "es2022": true
  }
}

Gotcha yang gue hit: Kalau kamu pakai monorepo, .vscode/settings.json di root kadang nggak ke-pick up oleh workspace di subfolder. Solusinya: buka subfolder itu sebagai workspace tersendiri, atau pakai VS Code Workspaces (.code-workspace file).

2. GitLens: Git Blame yang Nggak Nyebelin

Default VS Code punya git integration, tapi buat tau kenapa sebuah baris kode ditulis begitu — kamu harus buka terminal, jalanin git log, cari commit hash, buka lagi. Makan waktu.

GitLens (eamodio.gitlens) nampilin inline blame langsung di editor:

const timeout = 5000; // John Doe, 3 hari lalu • fix: increase timeout for slow networks

Satu hover, kamu langsung tau konteks perubahan itu. Nggak perlu keluar dari file.

Fitur yang paling sering gue pakai:

  • Inline blame — siapa nulis baris ini dan kapan
  • File History (GitLens: Show File History) — timeline perubahan satu file
  • Compare branches langsung dari VS Code tanpa buka GitHub

Konfigurasi buat matiin fitur yang jarang kepake (supaya nggak berat):

{
  "gitlens.hovers.currentLine.over": "line",
  "gitlens.currentLine.enabled": true,
  "gitlens.codeLens.enabled": false,
  "gitlens.statusBar.enabled": false
}

codeLens gue matiin karena nampilin author di atas setiap function — bagus tapi bikin editor penuh teks.

3. Error Lens: Error Langsung di Baris, Bukan di Problems Panel

Default behavior VS Code: error muncul di tab "Problems" di bawah. Kamu harus klik tab itu, cari error yang relevan, baru balik ke kode. Kalau lagi deep focus, itu interruption yang nggak perlu.

Error Lens (usernamehw.errorlens) nampilin error dan warning langsung inline di baris yang bermasalah:

const result = fetchData()  ← Promise returned from fetchData is ignored  [no-floating-promises]

Install, langsung jalan. Nggak perlu konfigurasi tambahan untuk basic usage.

Tapi kalau kamu ngerasa terlalu noisy (warning di mana-mana), bisa filter:

{
  "errorLens.enabledDiagnosticLevels": ["error", "warning"],
  "errorLens.excludeBySource": ["eslint(no-console)"]
}

Gotcha: Error Lens kadang nampilin pesan yang panjang banget sampai nutup kode di sebelah kanan. Fix-nya:

{
  "errorLens.messageMaxChars": 80
}

4. Path Intellisense: Autocomplete Path File yang Akurat

Kalau kamu nulis import atau require dan harus hafal struktur folder project — itu buang waktu. Path Intellisense (christian-kohler.path-intellisense) autocomplete path file saat kamu ketik.

Install, lalu tambahkan ini ke settings kalau pakai alias path (misal @/ untuk src/):

{
  "path-intellisense.mappings": {
    "@": "${workspaceRoot}/src"
  }
}

Sekarang waktu kamu ketik import something from '@/, VS Code langsung suggest file-file di dalam src/.

Kalau pakai TypeScript, pastikan tsconfig.json juga punya path mapping yang sama:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  }
}

5. REST Client: Testing API Tanpa Buka Postman

Ini yang paling ngubah workflow gue. Sebelumnya: tulis kode endpoint → buka Postman → bikin request → test → balik ke VS Code. Context switch terus.

REST Client (humao.rest-client) bikin kamu test HTTP request langsung dari file .http di dalam project:

### Get all users
GET http://localhost:3000/api/users
Authorization: Bearer {{token}}

### Create user
POST http://localhost:3000/api/users
Content-Type: application/json

{
  "name": "Budi Santoso",
  "email": "budi@example.com"
}

Klik "Send Request" di atas setiap request, response muncul di panel sebelah kanan. Variable {{token}} bisa didefinisikan di file .env atau di block @variable:

@baseUrl = http://localhost:3000
@token = eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...

### Get profile
GET {{baseUrl}}/api/profile
Authorization: Bearer {{token}}

File .http ini bisa di-commit ke repo — jadi dokumentasi API sekaligus test case yang bisa langsung dijalanin siapa aja di tim.

Gotcha: REST Client nggak support multipart form-data dengan baik untuk file upload. Untuk kasus itu gue masih pakai curl atau Postman.

6. Todo Tree: Jangan Lagi Lupa TODO di Kodebase

Kamu pasti pernah nulis // TODO: fix this later dan lupa sampai production. Todo Tree (gruntfuggly.todo-tree) scan seluruh project dan tampilkan semua TODO, FIXME, HACK, dll. di sidebar panel tersendiri.

Konfigurasi buat tambah custom tag:

{
  "todo-tree.general.tags": ["TODO", "FIXME", "HACK", "NOTE", "PERF"],
  "todo-tree.highlights.customHighlight": {
    "PERF": {
      "icon": "zap",
      "foreground": "#FF8C00"
    },
    "NOTE": {
      "icon": "info",
      "foreground": "#00BFFF"
    }
  }
}

Sekarang sebelum deploy, buka Todo Tree panel — review semua yang belum beres. Lebih reliable daripada ngandelin ingatan.

Cara Gue Manage Extension Supaya VS Code Tetap Cepat

Install semua extension di atas sekaligus? Jangan dulu. Gue saranin:

1. Cek startup time secara berkala: Buka Command Palette (Ctrl+Shift+P) → ketik Developer: Startup Performance. Lihat kolom "Activation Time" — extension mana yang paling lama.

2. Disable extension per workspace: Klik kanan extension di sidebar Extensions → "Disable (Workspace)". Extension berat yang cuma dipakai di project tertentu nggak perlu aktif di semua project.

3. Pakai Extension Profile (VS Code 1.75+): VS Code sekarang support profiles. Buat profile "Frontend", "Backend", "Writing" dengan extension set yang berbeda. Switch profile sesuai project.

# Export profile lewat Command Palette:
# "Profiles: Export Profile"
# Hasilnya file .code-profile yang bisa di-share ke tim

Yang Gue Lakuin Selanjutnya

Setup extension di atas udah gue pakai di semua project — dari side project solo sampai kerja bareng tim kecil. Tapi ini bukan list yang statis.

Langkah selanjutnya yang worth dicoba:

  • GitHub Copilot kalau kamu mau eksplorasi AI autocomplete (ada free tier sekarang)
  • Docker extension (ms-azuretools.vscode-docker) kalau workflow kamu banyak involve container
  • Bikin snippet custom untuk boilerplate yang sering kamu tulis — lebih cepat dari extension manapun

Yang paling penting: install satu per satu, rasain impact-nya, baru lanjut ke berikutnya. VS Code extension produktivitas coding yang beneran berguna adalah yang kamu pakai setiap hari — bukan yang cuma kelihatan keren di screenshot.