VSCode Setup Pemula: Setting Praktis Biar Ngoding Nggak Ribet

Pendahuluan

Lo pernah nggak sih, pas baru install VSCode, malah bingung sendiri? Tampilannya rame, banyak tombol yang nggak jelas fungsinya, terus pas lo ngoding juga rasanya berantakan banget.

Gua kasih tau, banyak banget programmer pemula yang ngalamin hal sama. Padahal VSCode itu sebenernya powerful banget asal lo tau cara nyetting-nya biar nyaman dan nggak ribet waktu dipake ngoding.

Di artikel ini, gua bakal bantu lo setup VSCode dari nol, mulai dari tema yang enak dilihat, ekstensi yang berguna, sampai setting yang bikin workflow lo makin lancar. Semua dibahas simpel, nggak ribet, dan cocok banget buat lo yang baru mulai belajar ngoding.

Yuk, gaskeun!

Install VSCode dan Bahasa Pemrograman

Sebelum ngoding, pastiin dulu lo udah install VSCode dari situs resminya ya. Jangan asal download dari tempat nggak jelas, bahaya!

Setelah itu, tinggal install extension yang sesuai bahasa pemrograman yang lo pake. Misalnya, lo mau belajar JavaScript, install extension JavaScript atau ES7 React biar codingan lo makin gampang dan rapi.

Gampang banget, kan? Nggak usah ribet dulu, yang penting lo udah siap mulai ngoding.

Pilih Tema & Font yang Nyaman

Buat ngoding enak dan betah, tampilan VSCode harus nyaman di mata. Nah, tema dan font itu salah satu kunci pentingnya. Nih, gua jelasin beberapa tema dan font yang recommended banget buat lo:

Tema VSCode yang Oke Banget

One Dark Pro

Tema gelap yang terinspirasi dari Atom's One Dark. Warna-warnanya kalem dan nyaman di mata, cocok buat ngoding lama tanpa bikin capek. Paling banyak diunduh di VSCode Marketplace.

One Dark Pro

Dracula Theme Official

Tema gelap dengan warna-warna cerah yang kontras, bikin kode lo gampang dibaca. Dracula juga tersedia di banyak editor lain, jadi kalau lo pindah-pindah editor, tampilannya tetap konsisten.

Dracula Theme Official
Dracula Theme Official

GitHub Theme

Mau tampilan yang mirip GitHub? Pakai tema ini. Cocok buat lo yang sering ngecek kode di GitHub dan pengen tampilan editor yang familiar.

GitHub Theme
GitHub Theme

Catppuccin for VSCode

Tema yang lagi hits banget karena warnanya soft dan eye-friendly, cocok buat yang pengen tampilan modern tapi nggak bikin mata cepat lelah. Selain VSCode, Catppuccin juga tersedia untuk banyak aplikasi lain, jadi lo bisa pakai tema yang konsisten di berbagai tools.

Catppuccin for VSCode
Catppuccin for VSCode

Catppuccin Icons for VSCode

Biar makin matching, lo juga bisa install Catppuccin Icons. Ikonnya dibikin sesuai gaya temanya, jadi folder & file lo tampil lebih konsisten dan estetik.

Catppuccin Icons for VSCode
Catppuccin Icons for VSCode

Font Coding yang Bikin Ngoding Lebih Nyaman

Fira Code

Font monospaced yang support ligatures, jadi karakter-karakter tertentu digabung jadi simbol keren kayak => jadi panah. Bikin kode lo lebih rapi dan enak dibaca.

Fira Code
Fira Code

JetBrains Mono

Font dari JetBrains yang dirancang khusus buat programmer. Tampilan hurufnya jelas dan nyaman, plus support ligatures juga.

JetBrains Mono
JetBrains Mono

Cascadia Code

Font dari Microsoft yang dirancang buat Windows Terminal dan VSCode. Support ligatures dan tampilannya modern.

Cascadia Code
Cascadia Code

Cara Ganti Tema & Font di VSCode

Ganti Tema:

  • Tekan Ctrl + Shift + P (Windows/Linux) atau Cmd + Shift + P (Mac).
  • Ketik Preferences: Color Theme.
  • Pilih tema yang udah lo install.

Ganti Font:

  • Tekan Ctrl + Shift + P (Windows/Linux) atau Cmd + Shift + P (Mac).
  • Ketik Preferences: Open User Settings (JSON).
  • Tambahkan atau ubah baris berikut:
"editor.fontFamily": "JetBrains Mono, Consolas, 'Courier New', monospace",
"editor.fontLigatures": true
  • Ganti "JetBrains Mono" dengan nama font yang lo pilih.

Dengan tema dan font yang pas, ngoding bakal lebih nyaman dan fokus. Coba deh beberapa pilihan di atas dan pilih yang paling cocok buat lo.

Ekstensi Wajib VSCode Biar Ngoding Makin Lancar

Prettier – Code Formatter

Buat lo yang suka kode rapi tanpa harus ngatur indentasi manual, Prettier adalah penyelamat. Ekstensi ini bakal otomatis ngeformat kode lo sesuai aturan yang lo tentuin.

Prettier - Code formatter

ESLint

Kalau lo ngoding pakai JavaScript atau TypeScript, ESLint penting banget buat ngecek kesalahan dan ngasih warning langsung di editor. Bisa dibilang kayak “teman cerewet” yang jagain kode lo tetap bersih.

  • 💡 Cocok buat: JS/TS projects, terutama yang pakai React atau Next.js.
  • 🔗 Install ESLint
ESLint

Auto Rename Tag

Nulis HTML atau JSX? Gak usah lagi repot ganti tag buka dan tutup satu per satu. Ekstensi ini otomatis ngeganti tag penutup kalau tag pembukanya lo ubah.

Auto Rename Tag

Path Intellisense

Males nulis path atau sering typo waktu import file? Ini solusinya. Path Intellisense ngasih auto-complete buat path file di proyek lo.

Path Intellisense

Live Server

Buat lo yang ngoding pakai HTML dan pengen lihat perubahan langsung di browser tanpa reload manual, ini ekstensi andalan. Sekali klik, langsung jalan!

Liive Server

GitLens - Git supercharged

Kalau lo kerja pakai Git, ekstensi ini bakal bantu banget. Bisa liat siapa yang ngedit baris tertentu, kapan, dan bisa ngebandingin versi sebelumnya dengan gampang.

GitLens - Git supercharged

Tips Tambahan Biar Produktif di VSCode

  • Aktifin auto save: biar gak lupa save tiap kali ngoding.
  • Gunakan zen mode (Ctrl + K Z) biar tampilan fokus tanpa gangguan.
  • Coba split editor buat buka 2 file sekaligus. Gampang bandingin atau salin kode.
  • Tambahin shortcut sesuai workflow lo di keyboard shortcuts.

Gimana, udah mulai kebayang kan gimana enaknya ngoding kalo VSCode lo udah di-setup dengan rapi?

Tinggal install yang perlu, custom dikit, dan siap gas proyek-proyek keren lo.

Bonus: Buat Tampilan VSCode Jadi Lebih Clean

Udah install tema & ekstensi, tapi pengen tampilannya makin minimalis dan gak ganggu fokus? Nih beberapa tips tambahan biar VSCode lo makin clean:

📁 File & Format

"files.trimTrailingWhitespace": true,
  • Otomatis hapus spasi kosong di akhir baris pas file disimpan. Bikin file lo bersih dari "sampah tak terlihat".
"files.associations": {
  "*.css": "tailwindcss"
}
  • Semua file .css bakal diperlakukan kayak file TailwindCSS, jadi lo dapet auto-complete dan highlight Tailwind.

✍️ Font & Formatting

"editor.fontFamily": "JetBrains Mono, 'Hack Nerd Font', monospace",
  • Nentuin font utama di editor. Kombinasi ini clean dan dukung nerd-font icon.
"editor.fontLigatures": true,
  • Aktifin ligature, jadi simbol kayak !==, =>, dll tampil lebih rapi dan keren.
"editor.formatOnSave": true,
  • Format otomatis setiap kali save. Gak perlu pencet Shift+Alt+F lagi.
"editor.defaultFormatter": "esbenp.prettier-vscode",
  • Gunain Prettier buat auto-format kode. Standar banget buat project modern.

🔍 Tampilan Editor

"window.zoomLevel": 2,
  • Perbesar tampilan VSCode biar lebih enak dibaca (zoom 200%).
"editor.fontSize": 14,
"editor.lineHeight": 24,
  • Ukuran teks & tinggi baris. Kombinasi ini bikin teks padat tapi tetap nyaman.
"editor.autoClosingBrackets": "languageDefined",
  • VSCode otomatis nutup tanda kurung/kurawal sesuai bahasa pemrograman.
"editor.quickSuggestions": {
  "other": "off",
  "comments": "off",
  "strings": "off"
}
  • Matikan auto-suggest di komentar/string supaya gak ganggu.
"editor.wordWrap": "on",
  • Otomatis wrap teks panjang biar gak horizontal scroll.
"editor.cursorStyle": "line-thin",
"editor.cursorWidth": 5,
"editor.cursorBlinking": "smooth",
"editor.cursorSmoothCaretAnimation": "on",
  • Atur gaya kursor: tipis, halus, dan animasi smooth. Lebih clean & modern.
"editor.tabCompletion": "on",
"editor.snippetSuggestions": "top",
"emmet.triggerExpansionOnTab": true,
  • Aktifin auto-complete pake Tab, snippet muncul di atas, dan Emmet bisa di-trigger dengan Tab (buat HTML/CSS).

Bagian: Clean Look

"workbench.statusBar.visible": false,
"editor.minimap.enabled": false,
"breadcrumbs.enabled": true,
"breadcrumbs.filePath": "off",
"workbench.activityBar.location": "hidden",
"editor.guides.indentation": false,
  • Sembunyiin status bar, minimap, dan activity bar. Breadcrumbs tetap nyala tapi file path disembunyiin. Tampilan jadi bersih.
"editor.scrollbar.verticalScrollbarSize": 0,
"editor.scrollbar.horizontalScrollbarSize": 2,
"editor.scrollbar.vertical": "hidden",
"editor.scrollbar.horizontal": "hidden",
  • Scrollbar disembunyiin (atau super tipis). Super clean!
"editor.renderLineHighlight": "none",
"editor.glyphMargin": false,
"editor.lineNumbers": "off",
"editor.showFoldingControls": "mouseover",
"editor.padding.bottom": 2,
"editor.padding.top": 2,
  • Nonaktifin highlight line aktif, sembunyiin line number, dan atur padding editor. Hasilnya: minimalis banget.

💻 Clean Look

"workbench.statusBar.visible": false,
"editor.minimap.enabled": false,
"breadcrumbs.enabled": true,
"breadcrumbs.filePath": "off",
"workbench.activityBar.location": "hidden",
"editor.guides.indentation": false,
  • Sembunyiin status bar, minimap, dan activity bar. Breadcrumbs tetap nyala tapi file path disembunyiin. Tampilan jadi bersih.
"editor.scrollbar.verticalScrollbarSize": 0,
"editor.scrollbar.horizontalScrollbarSize": 2,
"editor.scrollbar.vertical": "hidden",
"editor.scrollbar.horizontal": "hidden",
  • Scrollbar disembunyiin (atau super tipis). Super clean!
"editor.renderLineHighlight": "none",
"editor.glyphMargin": false,
"editor.lineNumbers": "off",
"editor.showFoldingControls": "mouseover",
"editor.padding.bottom": 2,
"editor.padding.top": 2,
  • Nonaktifin highlight line aktif, sembunyiin line number, dan atur padding editor. Hasilnya: minimalis banget.

📂 Explorer & Sidebar

"workbench.sideBar.location": "right",
"explorer.confirmDragAndDrop": false,
"explorer.confirmDelete": false,
"workbench.tree.enableStickyScroll": false,
"catppuccin-icons.hidesExplorerArrows": true,
  • Sidebar pindah ke kanan, matiin semua konfirmasi explorer, dan sembunyiin panah folder. Simpel & cepat akses.

🧱 UI Tambahan & Tab

"window.density.editorTabHeight": "compact",
"workbench.layoutControl.type": "menu",
"window.commandCenter": false,
"workbench.editor.editorActionsLocation": "hidden",
"workbench.editor.showTabs": "single",
"editor.scrollBeyondLastLine": false,
"editor.hideCursorInOverviewRuler": true,
"editor.stickyScroll.enabled": false,
"window.customTitleBarVisibility": "never",
"window.titleBarStyle": "custom",
"window.menuBarVisibility": "hidden",
"window.newWindowDimensions": "inherit",
"window.nativeFullScreen": true,
  • Semua UI disederhanain: tab height kecil, menu & command center disembunyiin, full-screen native, dll. Fokus full ke coding.

🎨 Tema & Icon

"workbench.colorTheme": "Catppuccin Frappé",
"workbench.iconTheme": "catppuccin-frappe",
"workbench.tree.indent": 10,
"workbench.tree.renderIndentGuides": "none",
"explorer.decorations.colors": false,
  • Aktifin tema Catppuccin Frappé (warna lembut), ikon juga dari Catppuccin, dan tampilan explorer dibuat bersih tanpa garis indentasi atau warna folder.

🔁 Settings Cycler

"settings.cycle": [
  {
    "id": "lineNumbers",
    "values": [
      { "editor.lineNumbers": "off" },
      { "editor.lineNumbers": "on" }
    ]
  }
],
"workbench.layoutControl.enabled": false,
  • Bisa toggle line number pake shortcut (kalau install Settings Cycler). Asik buat switching visual style.

🧬 Git

"git.confirmSync": false,
"git.enableSmartCommit": true,
  • Auto sync Git tanpa konfirmasi & commit langsung tanpa ketik pesan kalau cuma satu file.

🔍 Search & Exclude

"search.useIgnoreFiles": true,
"search.exclude": {
  "**/vendor/{[^l],?[^ai]}*": true,
  "**/public/{[^i],?[^n]}*": true,
  "**/node_modules": true,
  "**/dist": true,
  "**/_ide_helper.php": true,
  "**/composer.lock": true,
  "**/package-lock.json": true,
  "storage": true,
  ".phpunit.result.cache": true
}
  • Search exclude semua folder sampah biar pencarian bersih. Tapi tetep nyisain folder penting kayak laravel, livewire, index.php, dll.

🖥️ Terminal

"terminal.integrated.fontLigatures.enabled": true,
"terminal.integrated.fontFamily": "JetBrains Mono, 'Hack Nerd Font', Monospace",
  • Terminal juga dikasih font keren + ligature. Jadi matching sama editor.

🌀 TypeScript Auto Imports

"typescript.updateImportsOnFileMove.enabled": "always"
  • Kalau lo mindahin file TypeScript, import-nya langsung auto-update. Gak perlu cari-cari dan benerin manual.

Full Kode settings.json

{
  "files.trimTrailingWhitespace": true,
  "files.associations": {
    "*.css": "tailwindcss"
  },
  "editor.fontFamily": "JetBrains Mono, 'Hack Nerd Font', monospace",
  "editor.fontLigatures": true,
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "window.zoomLevel": 2,
  "editor.fontSize": 14,
  "editor.lineHeight": 24,
  "editor.autoClosingBrackets": "languageDefined",
  "editor.quickSuggestions": {
    "other": "off",
    "comments": "off",
    "strings": "off"
  },
  "editor.wordWrap": "on",
  "editor.cursorStyle": "line-thin",
  "editor.cursorWidth": 5,
  "editor.cursorBlinking": "smooth",
  "editor.cursorSmoothCaretAnimation": "on",
  "editor.tabCompletion": "on",
  "editor.snippetSuggestions": "top",
  "emmet.triggerExpansionOnTab": true,
  "workbench.statusBar.visible": false,
  "editor.minimap.enabled": false,
  "breadcrumbs.enabled": true,
  "breadcrumbs.filePath": "off",
  "workbench.activityBar.location": "hidden",
  "editor.guides.indentation": false,
  "editor.scrollbar.verticalScrollbarSize": 0,
  "editor.scrollbar.horizontalScrollbarSize": 2,
  "editor.scrollbar.vertical": "hidden",
  "editor.scrollbar.horizontal": "hidden",
  "editor.renderLineHighlight": "none",
  "editor.glyphMargin": false,
  "editor.lineNumbers": "off",
  "editor.showFoldingControls": "mouseover",
  "editor.padding.bottom": 2,
  "editor.padding.top": 2,
  "workbench.sideBar.location": "right",
  "explorer.confirmDragAndDrop": false,
  "explorer.confirmDelete": false,
  "workbench.tree.enableStickyScroll": false,
  "catppuccin-icons.hidesExplorerArrows": true,
  "window.density.editorTabHeight": "compact",
  "workbench.layoutControl.type": "menu",
  "window.commandCenter": false,
  "workbench.editor.editorActionsLocation": "hidden",
  "workbench.editor.showTabs": "single",
  "editor.scrollBeyondLastLine": false,
  "editor.hideCursorInOverviewRuler": true,
  "editor.stickyScroll.enabled": false,
  "window.customTitleBarVisibility": "never",
  "window.titleBarStyle": "custom",
  "window.menuBarVisibility": "hidden",
  "window.newWindowDimensions": "inherit",
  "window.nativeFullScreen": true,
  "workbench.colorTheme": "Catppuccin Frappé",
  "workbench.iconTheme": "catppuccin-frappe",
  "workbench.tree.indent": 10,
  "workbench.tree.renderIndentGuides": "none",
  "explorer.decorations.colors": false,
  "settings.cycle": [
    {
      "id": "lineNumbers",
      "values": [
        { "editor.lineNumbers": "off" },
        { "editor.lineNumbers": "on" }
      ]
    }
  ],
  "workbench.layoutControl.enabled": false,
  "git.confirmSync": false,
  "git.enableSmartCommit": true,
  "search.useIgnoreFiles": true,
  "search.exclude": {
    "**/vendor/{[^l],?[^ai]}*": true,
    "**/public/{[^i],?[^n]}*": true,
    "**/node_modules": true,
    "**/dist": true,
    "**/_ide_helper.php": true,
    "**/composer.lock": true,
    "**/package-lock.json": true,
    "storage": true,
    ".phpunit.result.cache": true
  },
  "terminal.integrated.fontLigatures.enabled": true,
  "terminal.integrated.fontFamily": "JetBrains Mono, 'Hack Nerd Font', Monospace",
  "typescript.updateImportsOnFileMove.enabled": "always"
}

Maka tampilan VSCode lo akan seperti ini:

VSCode Clean UI
VSCode Clean UI

Penutup

Jadi gimana? VSCode lo sekarang udah makin kece, bersih, dan pastinya lebih enak dipake buat ngoding, kan? Dengan setup yang simpel tapi efektif ini, lo nggak cuma bikin editor jadi enak dipandang, tapi juga ngebantu banget ningkatin fokus dan produktivitas pas ngoding.

Gue ngerti banget, ngoding kadang bisa bikin mumet, apalagi kalau tampilannya berantakan atau fitur-fitur nggak dimaksimalkan. Makanya, jangan anggap remeh soal setup VSCode karena ini bisa jadi senjata utama lo biar makin enjoy dan efisien pas ngoding.

🎓 Rekomendasi Kelas Gratis dari BuildWithAngga

Biar makin mantap dan nggak cuma jago setting VSCode doang, nih gue kasih beberapa kelas keren dari BuildWithAngga yang bisa bantu lo upgrade skill:

  1. 🔥 Adonis JavaScript Framework: Basic Web Development Cocok banget buat lo yang pengen nyobain fullstack development dengan JavaScript. Setelah VSCode lo kece, tinggal gas ngoding backend pakai Adonis!
  2. ✅ Vanilla JavaScript OOP + LocalStorage: Web Task Management Pas banget buat yang pengen belajar bikin aplikasi to-do list dari nol. Kelas ini ngajarin OOP pake JavaScript murni, jadi lo bisa ngerti konsep dasarnya sebelum loncat ke framework.
  3. 💸 Mastering Laravel: Bikin Web Seperti Saweria Buat lo yang suka Laravel, kelas ini bisa ngebuka wawasan lo lebih dalam lagi. Materinya real project banget, dan VSCode setup kita tadi juga cocok banget buat Laravel dev.

Kalau setup lo udah rapi, tinggal tambahin ilmunya lewat kelas-kelas di atas. Belajar makin semangat, produktivitas naik, dan ngoding nggak ribet lagi. Jangan lupa share artikel ini ke temen lo yang VSCode-nya masih “default banget” biar sama-sama upgrade workspace mereka juga!

Selamat ngoding, dan semoga makin jago tiap harinya. 🚀👨‍💻