Setup VS Code untuk Web Developer: Extension Wajib + Workflow

VS Code • 2026-01-12

Setting VS Code biar kerja lebih cepat: extension wajib, format on save, live server, Git, dan tips produktivitas.

VS Code bisa jadi “mesin” produktivitas kalau setting-nya benar. Artikel ini berisi setup yang umum dipakai web developer.

Install VS Code dan setup dasar

• Install VS Code dari situs resminya.
• Install Git (opsional tapi sangat disarankan).
• Buat folder project (mis. website-umkm/) dan buka via VS Code.

Extension wajib untuk web dev

• Live Server (preview HTML/CSS cepat).
• Prettier (format otomatis).
• ESLint (jaga kualitas JS).
• GitLens (bantu kerja dengan Git).
• PHP Intelephense (kalau pakai PHP).
• Laravel Blade Snippets (kalau pakai Laravel).

Auto format + linting

Setting yang sering dipakai:

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "files.trimTrailingWhitespace": true,
  "files.insertFinalNewline": true
}

Workflow cepat (terminal, git, snippet)

• Gunakan terminal bawaan: build, run server, artisan, npm.
• Pakai Git untuk versi: commit tiap perubahan penting.
• Buat snippet untuk layout HTML yang sering dipakai.

Debugging dasar

Untuk JS, gunakan debugger Chrome/VS Code. Untuk PHP, bisa pakai Xdebug (advanced).

Tips produktivitas

• Shortcut penting: Ctrl+P (cari file), Ctrl+Shift+P (command palette).
• Gunakan workspace settings per project (lebih rapi).

Kalau kamu ingin praktik langsung, ikuti Tutorial Membuat Website dari Nol.