Mengenal Lebih Dalam Ekstensi Wajib VS Code

Mengenal Lebih Dalam Ekstensi Wajib VS Code

Setelah mengetahui cara menginstal extension, mari kita bahas lebih detail empat ekstensi yang akan menjadi "asisten pribadi" Anda selama menulis kode, beserta cara mengonfigurasinya agar bekerja maksimal.

1. Prettier - Code Formatter

Menulis kode yang berfungsi itu penting, tetapi menulis kode yang mudah dibaca jauh lebih penting. Saat Anda menulis kode yang panjang, spasi dan indentasi (jarak kode ke dalam) sering kali menjadi berantakan.

• Fungsi Utama: Prettier secara otomatis merapikan susunan kode Anda (HTML, CSS, JavaScript, PHP, dll) menjadi rapi dan terstandarisasi.

• Cara Mengaktifkan "Format on Save": Agar Prettier bekerja otomatis setiap kali Anda menyimpan file, Anda perlu melakukan sedikit pengaturan:

  1. Buka Settings di VS Code dengan menekan Ctrl + , (koma).

  2. Di kolom pencarian Settings, ketik "Format on Save".

  3. Centang kotak pada opsi Editor: Format On Save.

  4. Selanjutnya, cari "Default Formatter" di kolom pencarian.

  5. Pada menu dropdown, pilih Prettier - Code formatter.

• Hasilnya: Coba tulis kode HTML yang berantakan, lalu tekan Ctrl + S. Dalam sekejap, kode Anda akan tersusun rapi.

2. Material Icon Theme

Ketika proyek Anda mulai membesar, Anda akan memiliki puluhan hingga ratusan file dengan berbagai format (misalnya .html, .css, .js, .php). Ikon bawaan VS Code terkadang kurang mencolok untuk membedakan file-file tersebut.

• Fungsi Utama: Mengganti ikon standar di panel Explorer (sebelah kiri) dengan ikon khas bergaya "Material Design". Setiap jenis file dan folder akan memiliki ikon dan warna yang unik dan spesifik.

• Cara Menggunakan:

  1. Setelah diinstal, VS Code biasanya akan langsung memunculkan pemberitahuan di atas layar (Command Palette) untuk mengaktifkannya.

  2. Pilih Material Icon Theme.

  3. Jika tidak muncul, Anda bisa membukanya manual: Tekan Ctrl + Shift + P, ketik File Icon Theme, tekan Enter, lalu pilih Material Icon Theme.

• Hasilnya: Anda bisa dengan cepat membedakan mana file konfigurasi, mana file gambar, dan mana file kode hanya dengan lirikan mata.

3. PHP Intelephense

Jika Anda akan belajar bahasa pemrograman PHP, ekstensi ini adalah ekstensi wajib yang tidak boleh dilewatkan. VS Code secara bawaan memiliki fitur pembacaan PHP yang sangat dasar.

• Fungsi Utama: Mengubah VS Code menjadi IDE PHP yang sangat cerdas.

• Fitur Andalan:

  • Auto-completion (Penyelesaian Otomatis): Saat Anda mengetik fungsi PHP, ekstensi ini akan memberikan saran kelanjutan kode dan parameter apa saja yang dibutuhkan.

  • Error Highlighting: Jika Anda lupa meletakkan titik koma (;) atau salah memanggil variabel, Intelephense akan langsung memberi garis bawah merah muda sebelum kode dijalankan.

  • Go to Definition: Anda bisa menekan tombol Ctrl sambil mengklik sebuah nama fungsi, dan VS Code akan langsung melompat ke file tempat fungsi tersebut dibuat.

• Cara Menggunakan: Cukup instal ekstensi ini. Fiturnya akan langsung aktif secara otomatis setiap kali Anda membuka file berakhiran .php.

4. Live Preview (oleh Microsoft)

Saat membuat tampilan web (HTML/CSS), programmer biasanya bolak-balik menekan Alt + Tab antara VS Code dan Browser (Chrome/Firefox) untuk melihat hasil kodenya. Hal ini cukup melelahkan.

• Fungsi Utama: Membuka browser langsung di dalam jendela VS Code. Ekstensi ini juga menjalankan local web server sehingga setiap perubahan kode akan langsung terlihat seketika (real-time) tanpa perlu menekan tombol refresh.

• Cara Menggunakan:

  1. Buka sebuah file .html.

  2. Perhatikan pojok kanan atas layar VS Code Anda, akan ada ikon baru berupa kotak dengan kaca pembesar (Show Preview).

  3. Klik ikon tersebut. Layar VS Code Anda akan terbelah dua. Sebelah kiri adalah kode HTML Anda, dan sebelah kanan adalah tampilan website-nya.

  4. Coba ubah teks di dalam kode HTML Anda. Tampilan di sebelah kanan akan berubah seketika bahkan sebelum Anda menyimpan filenya.