Mengapa Perlu Highlighter & Scope Pada VSCode

Membaca kode cepat itu sulit jika blok bersarang, tanda kurung bertumpuk, atau variabel memiliki cakupan (scope) yang saling tumpang-tindih. Tiga alat yang sering dipakai untuk membantu adalah Bracket Highlighter (penyorot tanda kurung/penutup), Blockman (blok visual berwarna sesuai indentasi/struktur), dan PyScope (visualisasi scope Python). Di bawah ini ringkasan masalah umum yang mereka selesaikan beserta solusi dan langkah praktiknya.

Masalah Umum yang Sering Dihadapi

• Sulit melacak pasangan kurung () [] {} di file panjang.
• Blok kode bersarang (if/for/try) membingungkan—mudah salah tempatkan kurung kurawal atau indentasi.
• Debugging Python melambat karena tidak yakin variabel hidup di scope mana (local, enclosing, global).

Ringkasan Solusi

• Bracket Highlighter: menyorot pasangan kurung/quote/tag agar batas blok mudah dikenali.
• Blockman: memberi latar/garis blok berdasarkan struktur/indentasi sehingga “bentuk” kode terlihat jelas.
• PyScope: menampilkan scope variabel & fungsi Python secara interaktif untuk mengurangi salah paham cakupan.

Bracket Highlighter: Pasangkan Kurung Tanpa Nyasar

Bracket Highlighter populer di Sublime Text, sedangkan di VS Code fitur serupa tersedia lewat Bracket Pair Guides dan Bracket Pair Colorization bawaan. Intinya sama: membantu Anda melihat pasangan tanda kurung/penutup dan batas-batasnya.

Masalah yang Dibantu Bracket Highlighter

• Nested function/object membuat Anda kehilangan pasangan }.
• Template/JSON/regex dengan bracket berlapis sulit ditelusuri.

Solusi (VS Code & Sublime)

VS Code – aktifkan panduan/pemberi warna kurung:

{
  // Settings.json (VS Code)
  "editor.guides.bracketPairs": "active",
  "editor.bracketPairColorization.enabled": true,
  "editor.guides.bracketPairsHorizontal": true
}

Sublime Text – gunakan Package Control untuk memasang BracketHighlighter:

// Sublime Text: Command Palette → "Package Control: Install Package"
// Cari: BracketHighlighter → Install

Tips: Atur warna/bracket-style agar kontras, terutama jika tema Anda gelap/terang.

Blockman: Lihat “Bentuk” Kode dengan Cepat

Blockman menambahkan blok latar (background) atau garis di sekitar struktur kode (if/else, loop, class, function) berdasarkan indentasi/AST. Hasilnya, Anda dapat “membaca” kode seperti melihat peta, bukan sekadar teks.

Masalah yang Dibantu Blockman

• File panjang dengan nested block sulit di-scan visualnya.
• Refactor sering salah pilih batas blok.

Solusi (VS Code)

Pasang Blockman dari Marketplace lalu sesuaikan preferensinya (opacity, roundness, border, dsb). Jika sudah terpasang, atur beberapa opsi agar nyaman di mata:

{
  // Settings.json (VS Code)
  "blockman.enable": true,
  "blockman.theme": "auto",         // atau "bright"/"dark" sesuai tema
  "blockman.opacity": 0.08,         // naikkan jika ingin lebih tebal
  "blockman.border.enabled": true,  // garis tepi blok
  "blockman.roundness": 6           // sudut membulat biar lembut
}

Tips: Gunakan kombinasi Blockman + Bracket Guides. Guides membantu di level karakter, Blockman membantu di level blok/indentasi.

PyScope: Pahami Scope Variabel/Fungsi Python

PyScope membantu memvisualisasikan lingkup (scope) nama—apakah variabel berada di lokal, nonlocal/enclosing, atau global. Ini mengurangi kebingungan saat nested function/closure dan saat Anda menghindari kebocoran nama (name shadowing).

Masalah yang Dibantu PyScope

• Tidak yakin x mengacu ke variabel lokal atau global.
• Nested function (closure) membuat referensi nama membingungkan.

Solusi (Alur Dasar)

1. Pasang ekstensi PyScope di VS Code (Marketplace).
2. Buka file .py, arahkan kursor ke variabel/fungsi → lihat panel/hover scope.
3. Gunakan bersama linter/typing (ruff/mypy) untuk validasi tambahan.

# Contoh kecil untuk melihat scope
x = "global-x"

def outer():
    x = "outer-x"
    def inner():
        nonlocal x
        x = "inner-updated"
        return x
    inner()
    return x

print(outer())  # <-- dengan PyScope Anda bisa menelusuri 'x' mana yang dirujuk

Workflow Cepat: Kombinasi Tiga Alat

1. Bracket Guides/Highlighter untuk memastikan semua kurung & pasangan tag beres.
2. Blockman untuk melihat blok mana harus di-refactor/di-collapse/di-pindahkan.
3. PyScope untuk menegaskan scope variabel saat debugging Python.

Masalah & Solusi (Ringkas)

Masalah	Solusi Alat	Langkah Singkat
Pasangan kurung tidak jelas	Bracket Highlighter / Bracket Pair Guides	Aktifkan editor.bracketPairColorization & editor.guides.bracketPairs
Blok kode bersarang sulit discan	Blockman	Pasang ekstensi & atur opacity, border, roundness
Scope variabel Python membingungkan	PyScope	Buka file .py & telusuri hover/panel scope untuk tiap identifier

Perintah Umum (Opsional)

Catatan: ID ekstensi Marketplace bisa berbeda-beda. Jika ragu, pasang lewat UI VS Code: Ctrl/Cmd+Shift+X lalu cari “Blockman” / “PyScope”.

# Cek daftar ekstensi yang sudah terpasang
code --list-extensions | sort

# Buka Settings JSON langsung untuk mengaktifkan bracket guides
code ~/AppData/Roaming/Code/User/settings.json   # Windows
code ~/.config/Code/User/settings.json           # Linux
open ~/Library/Application\ Support/Code/User/settings.json  # macOS

# Sublime Text: install BracketHighlighter via Package Control
# Command Palette → "Package Control: Install Package" → ketik "BracketHighlighter"

Penutup

Jika tujuan Anda adalah membaca struktur dengan cepat, kurangi “tebakan visual”. Kombinasikan Bracket Highlighter/Guides untuk akurasi pasangan kurung, Blockman untuk bentuk blok yang jelas, dan PyScope untuk memahami cakupan variabel Python. Hasilnya: refactor lebih mantap, debugging lebih singkat, dan risiko salah blok menurun drastis.