Pelajari cara menggunakan Visual Studio Code untuk menulis, menjalankan, dan melakukan debugging dasar kode JavaScript-mu. Lengkapi skill web development-mu!
16m bacaanKuis WajibMicro Badge Lesson
Ngasih 'Otak' ke Web Pake JavaScript? VS Code Siap Bantu!
Udah punya struktur HTML yang oke dan tampilan CSS yang kece? Sekarang saatnya kita tambahin "kecerdasan" dan "interaktivitas" ke halaman web kita pake JavaScript (JS)! Dan tentu aja, Visual Studio Code punya banyak fitur yang bakal ngebantu kamu pas mulai ngoding JavaScript.
Meskipun JavaScript bisa jadi lebih kompleks dibanding HTML atau CSS karena udah masuk ranah bahasa pemrograman beneran (ada logika, variabel, fungsi, dll.), VS Code berusaha bikin prosesnya jadi lebih ramah buat pemula.
Dasar-Dasar: Membuat dan Menghubungkan File JavaScript
Membuat File JavaScript Baru:
Sama kayak file HTML dan CSS, di panel Explorer VS Code, klik kanan di folder proyekmu (atau subfolder js kalau mau lebih terstruktur) > New File.
Kasih nama file-nya dengan akhiran .js (misalnya, skrip.js, main.js). Ini penting biar VS Code dan browser tau itu file JavaScript.
Menghubungkan File JavaScript ke HTML:
Biar kode JavaScript-mu bisa berinteraksi sama elemen HTML di halamanmu, kamu perlu ngehubungin file itu ke file -nya.
.js
.html
Caranya, buka file HTML-mu, terus tambahin tag <script> dengan atribut src yang nunjuk ke file JavaScript-mu.
Tempat Terbaik Buat Naruh Tag <script>: Praktik yang paling umum dan disarankan adalah naruh tag <script>tepat sebelum tag penutup </body> di file HTML-mu.
html
<!DOCTYPE html><html lang="id"><head> <meta charset="UTF-8"> <title>Halamanku dengan JavaScript</title> <link rel="stylesheet" href="style.css"></head><body> <h1>Halo JavaScript!</h1> <p id="pesan"></p> <button id="tombolAksi">Klik Saya</button> <!-- Konten HTML lainnya di sini --> <script src="skrip.js"></script> <!-- Taruh di sini! --></body></html>
Kenapa di akhir <body>?
Biar browser nge-render (nampilin) dulu semua konten HTML dan CSS-nya. Jadi, pengguna bisa liat halaman lebih cepet.
Kalau skrip ditaruh di <head> tanpa atribut khusus (kayak defer atau async), browser bakal berhenti nge-render HTML buat nge-download dan ngejalanin skrip dulu. Ini bisa bikin halaman keliatan lambat.
Kalau skripmu butuh ngakses elemen HTML (misal, mau ganti teks paragraf), naruh skrip di akhir <body> mastiin elemen HTML-nya udah ada pas skrip dijalanin.
(Opsional) Tag <script> di <head> dengan defer:
Kalau karena alasan tertentu kamu harus naruh tag <script> di <head>, tambahin atribut defer.
Atribut defer ngasih tau browser buat nge-download skrip sambil tetep nge-render HTML, tapi eksekusi skripnya ditunda sampe HTML selesai di-parsing semua. Urutan eksekusi skrip dengan defer juga dijaga.
Fitur Bantuan VS Code buat Ngoding JavaScript
VS Code punya banyak fitur bawaan yang oke banget buat JavaScript:
Syntax Highlighting (Pewarnaan Sintaks):
Variabel, keyword JavaScript (kayak function, if, let, const), string, angka, komentar, semuanya bakal dikasih warna beda-beda. Bikin kode JS-mu jadi lebih gampang dibaca dan dipahami alurnya.
IntelliSense (Auto Completion & Saran Cerdas):
Ini super berguna di JavaScript! VS Code bakal ngasih saran otomatis buat:
Variabel dan fungsi yang udah kamu definisiin.
Metode dan properti bawaan JavaScript (misal, buat Array, String, Object, DOM).
Parameter fungsi.
Dia juga bisa nampilin dokumentasi singkat (JSDoc) kalau ada. Ini ngurangin banget kebutuhan buat bolak-balik liat contekan atau dokumentasi.
Error Highlighting & Linting Dasar (Deteksi Kesalahan):
VS Code secara otomatis bakal ngasih garis bawah bergelombang kalau ada kesalahan sintaks dasar di kodemu (misal, lupa kurung tutup, salah ketik keyword).
Untuk "linting" yang lebih canggih (ngecek praktik terbaik, potensi bug, konsistensi gaya kode), kamu sangat disarankan buat instal ekstensi ESLint. ESLint ini standar industri buat ngejaga kualitas kode JavaScript.
Formatting Kode JavaScript (Merapikan Kode):
Sama kayak HTML dan CSS, kode JavaScript yang rapi itu enak diliat dan gampang di-maintain.
Shortcut default: Shift + Alt + F (Windows/Linux) atau Shift + Option + F (macOS).
Ekstensi Prettier - Code formatter (yang udah kita bahas sebelumnya) juga jago banget ngerapiin kode JavaScript. Sangat direkomendasikan buat dipake bareng ESLint biar kodemu konsisten dan cantik.
Navigasi Kode (Go to Definition, Find All References, dll.):
Kalau kamu punya fungsi atau variabel, kamu bisa cepet liat di mana dia didefinisiin (Go to Definition - F12) atau di mana aja dia dipake (Find All References - Shift + F12). Berguna banget buat ngerti alur kode yang udah kompleks.
Refactoring Dasar:
VS Code punya beberapa fitur refactoring sederhana, misalnya buat nge-rename variabel atau fungsi, dan dia bakal otomatis nge-update semua tempat variabel/fungsi itu dipake (di file yang sama).
Menjalankan dan Mencoba Kode JavaScript-mu
Ada beberapa cara buat ngejalanin dan ngetes kode JavaScript yang kamu tulis:
Melalui Browser (Paling Umum untuk Pemula Web):
Kode JavaScript yang kamu hubungin ke file HTML (<script src="...">) bakal otomatis dijalanin sama browser pas halaman HTML itu dibuka.
Kalau kamu pake ekstensi Live Server (yang udah kita instal buat HTML), setiap kali kamu nyimpen perubahan di file .js (atau .html dan .css), halaman di browser bakal otomatis nge-refresh dan ngejalanin skrip terbarumu. Praktis banget!
Browser Developer Tools (DevTools): Ini "laboratorium" wajib buat developer web! Setiap browser modern (Chrome, Firefox, Edge) punya DevTools.
Cara buka: Biasanya klik kanan di halaman web > Inspect atau Inspect Element, atau tekan F12.
Tab Console: Di sini kamu bisa liat output dari console.log("pesanmu"); yang kamu tulis di kode JS. Ini cara paling gampang buat nge-debug atau ngecek nilai variabel. Kamu juga bisa ngetik kode JS langsung di Console buat ngetes sesuatu.
Tab lain yang berguna: Elements (liat struktur DOM), Sources (liat source code, set breakpoint buat debugging), Network (liat request jaringan).
Menggunakan Integrated Terminal VS Code dengan Node.js (Lebih ke JavaScript Non-Browser):
Kalau kamu mau ngejalanin JavaScript di luar konteks browser (misalnya, buat skrip utilitas atau belajar JavaScript murni tanpa DOM), kamu bisa pake Node.js.
Node.js adalah runtime environment buat JavaScript di sisi server atau di komputermu. Kamu perlu nginstal Node.js dulu secara terpisah.
Setelah Node.js terinstal, kamu bisa buka Integrated Terminal di VS Code (Ctrl+ ` ``), terus jalanin file JS-mu pake perintah: node namafile.js.
Ini mungkin belum terlalu relevan buat pemula web yang fokus ke interaksi HTML, tapi bagus buat diketahui.
Debugging JavaScript Dasar di VS Code (Pengenalan Singkat)
Debugging itu proses nyari dan benerin "bug" atau kesalahan di kodemu. VS Code punya fitur debugging bawaan yang lumayan.
Untuk JavaScript di Browser:
Cara paling gampang buat pemula biasanya adalah pake debugger di Browser DevTools (tab Sources). Kamu bisa set breakpoint di sana.
VS Code juga bisa nge-debug JavaScript yang jalan di browser (misal, Chrome atau Edge) dengan nginstal ekstensi "Debugger for Chrome" atau "Debugger for Microsoft Edge" dan bikin konfigurasi launch (launch.json). Ini mungkin agak advance buat pertama kali, tapi kemampuannya ada.
Untuk JavaScript dengan Node.js:
Debugging Node.js di VS Code itu lebih straightforward. Buka tab "Run and Debug" (ikon play dengan bug) di Activity Bar, VS Code biasanya bisa otomatis ngedeteksi file Node.js-mu atau kamu bisa bikin konfigurasi sederhana.
Kamu bisa nambahin breakpoint dengan ngeklik di sebelah kiri nomor baris kode. Pas program jalan dan nyampe di breakpoint, eksekusinya bakal berhenti, dan kamu bisa nge-inspeksi nilai variabel, ngelanjutin eksekusi baris per baris (step over, step into), dll.
Buat pemula yang fokus ke interaksi web, menguasai console.log() dan debugger di Browser DevTools itu udah modal yang sangat kuat!
Ekstensi Populer untuk JavaScript di VS Code (Sangat Direkomendasikan)
ESLint:
WAJIB BANGET buat proyek JavaScript yang serius (atau bahkan buat belajar biar terbiasa sama kode bersih).
ESLint bakal nganalisa kodemu secara statis buat nemuin pola masalah, kesalahan gaya kode, dan potensi bug.
Kamu perlu nginstal ESLint di proyekmu (biasanya pake npm/yarn) dan nginstal ekstensi ESLint di VS Code.
Prettier - Code formatter:
Udah kita bahas. Bikin kodemu rapi otomatis. Biasanya dikonfigurasi biar jalan bareng ESLint.
JavaScript (ES6) code snippets:
Nambahin banyak snippet buat sintaks JavaScript modern (ES6+), jadi ngetik import, export, class, arrow function, dll. jadi lebih cepet.
VS Code nyediain lingkungan yang solid banget buat ngembangin aplikasi JavaScript, dari yang simpel sampe yang kompleks. Dengan IntelliSense, fitur debugging dasar, dan dukungan ekstensi yang kaya (terutama ESLint dan Prettier), kamu bakal bisa ngoding JavaScript dengan lebih percaya diri dan efisien.
Jangan lupa, kunci utama belajar JavaScript (dan bahasa pemrograman apapun) adalah banyak latihan dan jangan takut bikin kesalahan. console.log() dan Browser DevTools adalah teman terbaikmu di awal perjalanan ini!
Selanjutnya, kita bakal ngintip beberapa fitur produktivitas lain di VS Code yang bisa dipake buat semua jenis file, gak cuma HTML, CSS, atau JS aja.
Checkpoint KuisTarget: 70%
Kuis untuk: VS Code untuk JavaScript
Kuis ini wajib untuk sertifikat. Kamu tetap bisa lanjut ke pelajaran berikutnya dan mengerjakannya nanti.
