Mengelola Catatan dan Tugas dengan Todo Tree di VS Code

Photo by Eden Constantino on Unsplash

Pengantar

Pernah nggak sih, lagi asyik ngoding, terus tiba-tiba kepikiran ada bug yang harus diperbaiki atau tugas yang perlu dikerjakan nanti?

Biasanya kita langsung nulis catatan di dalam kode dengan menambahkan komentar seperti TODO: Perbaiki validasi form ini atau FIXME: Bug di fungsi ini harus diperbaiki. Masalahnya, makin banyak catatan yang tersebar di berbagai file, makin susah juga melacaknya.

Nah, di sinilah Todo Tree di VS Code jadi penyelamat kita! Nggak perlu lagi panik gara-gara lupa tugas yang pernah dicatat di sela-sela ngoding.

Dengan Todo Tree, semua tugas yang sudah kita catat menjadi lebih terorganisir dan mudah diakses hanya dengan beberapa klik.

Photo by Gruntfuggly on Visual Studio Marketplace

Selain itu, extension ini juga sangat membantu dalam kolaborasi tim. Misalnya, ketika ada fitur atau fungsi yang belum selesai, kita bisa menandainya agar rekan kerja dalam proyek yang sama dapat melihatnya. Asalkan mereka juga menginstal Todo Tree di VS Code mereka, mereka bisa langsung mengetahui daftar tugas yang sudah dibuat tanpa perlu bertanya-tanya. Praktis, kan?

Mengenal Berbagai Fitur Todo Tree

1. Pencarian Otomatis

Todo Tree akan secara otomatis mendeteksi dan mengumpulkan semua komentar TODO, FIXME, atau kata kunci lainnya yang kita tentukan dalam proyek.

Tag Todo Tree yang terdeteksi di editor

2. Tampilan yang Terstruktur

Semua catatan tugas ditampilkan dalam bentuk daftar pohon (tree view) di sidebar VS Code, sehingga kita bisa dengan mudah menelusurinya.

Tampilan Todo Tree yang terdeteksi di sidebar VSCode

3. Filter dan Penyaringan

Kita bisa menyaring daftar tugas berdasarkan kategori tertentu, misalnya hanya menampilkan FIXME atau BUG agar lebih fokus dalam memperbaiki kesalahan.

4. Navigasi Cepat

Klik salah satu tugas dalam daftar Todo Tree, dan VS Code akan langsung mengarahkannya ke baris kode terkait.

5. Personalisasi Tampilan

Kita bisa menyesuaikan warna dan ikon yang muncul di Todo Tree agar sesuai dengan preferensi dan tema kode kita.

Dengan fitur-fitur ini, Todo Tree benar-benar menjadi extension yang wajib dipasang di VS Code bagi kita yang ingin tetap produktif dan nggak lupa dengan tugas-tugas yang sudah dicatat!

Cara Menginstal dan Mengatur Todo Tree di VS Code

1. Instalasi Todo Tree

• Buka Extensions Marketplace di VS Code.

• Cari Todo Tree di kolom pencarian.

• Klik Install untuk memasangnya.

Extension Todo Tree pada VSCode

2. Membuka Todo Tree

• Setelah instalasi selesai, buka panel Todo Tree dengan menekan Ctrl+Shift+P, lalu ketik Todo Tree: Show View.

• Todo Tree akan muncul di sidebar VS Code.

3. Konfigurasi Dasar

• Buka pengaturan Todo Tree dengan menekan Ctrl+, lalu cari Todo Tree.

• Ubah daftar tag tugas sesuai kebutuhan kita, misalnya:

{
  ..., // Config lainnya
  "todo-tree.general.tags": ["TODO", "FIXME", "BUG", "NOTE"],
  "todo-tree.tree.expanded": true,
  "todo-tree.highlights.customHighlight": {
    "TODO": {
      // Ada tugas yang belum selesai atau fitur yang akan ditambahkan.
      "icon": "checklist",
      "iconColour": "#2ecc71",
      "foreground": "#ffffff",
      "background": "#2ecc71",
      "fontWeight": "bold"
    },
    "FIXME": {
      // Ada masalah dalam kode yang harus diperbaiki (Potensi BUG & Need Improvement).
      "icon": "flame",
      "iconColour": "#e67e22",
      "foreground": "#ffffff",
      "background": "#e67e22",
      "fontWeight": "bold"
    },
    "BUG": {
      // Ada bug atau kesalahan yang menyebabkan error.
      "icon": "bug",
      "iconColour": "#e74c3c",
      "foreground": "#ffffff",
      "background": "#e74c3c",
      "fontWeight": "bold"
    },
    "NOTE": {
      // Catatan penting untuk developer lain atau diri sendiri.
      "icon": "note",
      "iconColour": "#9b59b6",
      "foreground": "#ffffff",
      "background": "#9b59b6",
      "fontStyle": "italic"
    }
  }
}

4. Menambahkan Tugas dalam Kode

• Cukup tambahkan komentar seperti ini di kode kita:

// TODO: Add support image with lazy loading
// FIXME: Set initial theme delay on first render
// BUG: Image width has issue in mobile view
// NOTE: Default font is Inter

• Todo Tree akan langsung mendeteksinya dan menampilkannya dalam daftar.

Tags Todo Tree yang terdeteksi

Dengan langkah-langkah ini, kita bisa mulai menggunakan Todo Tree untuk mengelola tugas dengan lebih efisien langsung di VS Code!

Penutup

Todo Tree adalah extension yang sangat membantu kita dalam mengelola tugas dan catatan langsung di dalam kode. Dengan fitur-fitur seperti pencarian otomatis, tampilan yang terstruktur, dan navigasi cepat, kita bisa lebih fokus pada pekerjaan utama tanpa kehilangan jejak tugas-tugas penting. Dengan menginstal dan mengatur Todo Tree di VS Code, kita bisa meningkatkan produktivitas dan memastikan bahwa semua TODO dan FIXME tetap terpantau dengan baik.

Jadi, tunggu apa lagi? Yuk, coba Todo Tree dan buat workflow ngoding kita jadi lebih terorganisir! 🚀