Menjalankan JavaScript di VS Code
Panduan Lengkap untuk Pemula
Setelah memahami dasar JavaScript dan cara menjalankannya di browser, langkah selanjutnya yang wajib dipelajari adalah menjalankan JavaScript menggunakan VS Code. VS Code (Visual Studio Code) adalah code editor gratis, ringan, dan sangat populer di kalangan web developer.
Dengan VS Code, kamu bisa:
- Menulis kode JavaScript dengan rapi
- Menjalankan JavaScript tanpa browser
- Belajar JavaScript layaknya developer profesional
Artikel ini akan membahas langkah demi langkah menjalankan JavaScript di VS Code, khusus untuk pemula.
Apa Itu VS Code?
Visual Studio Code (VS Code) adalah text editor buatan Microsoft yang mendukung banyak bahasa pemrograman, termasuk JavaScript.
Keunggulan VS Code:
- Gratis dan open source
- Ringan dan cepat
- Mendukung ekstensi
- Cocok untuk pemula hingga profesional
Persiapan Menjalankan JavaScript di VS Code
Sebelum mulai, pastikan kamu sudah memiliki:
- VS Code terinstall
- Browser (Chrome / Edge / Firefox)
- (Opsional) Node.js untuk menjalankan JavaScript tanpa browser
💡 Jika kamu masih pemula, jangan khawatir. Kita mulai dari cara paling mudah.
Cara Menjalankan JavaScript di VS Code Menggunakan Browser
Ini adalah cara paling sederhana dan cocok untuk pemula.
1. Buat Folder Proyek
Buat folder baru, misalnya:
belajar-javascript
Lalu buka folder tersebut di VS Code:
- Klik File → Open Folder
- Pilih folder belajar-javascript
2. Buat File HTML
Buat file baru dengan nama:
index.html
Html
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Belajar JavaScript</title>
</head>
<body>
<h1>Belajar JavaScript di VS Code</h1>
<script>
console.log("Hello JavaScript!");
</script>
</body>
</html>
3. Jalankan di Browser
- Klik kanan pada index.html
- Pilih Open with Browser
- Tekan F12 → Console
Jika berhasil, akan muncul:
Hello JavaScript!
🎉 Selamat! JavaScript kamu sudah berjalan.
Menjalankan JavaScript dengan File .js Terpisah
Agar kode lebih rapi, sebaiknya JavaScript dipisahkan dari HTML.
1. Buat File JavaScript
Buat file baru:
JavaScript
script.js
JavaScript
alert("JavaScript berjalan dari file terpisah!");
console.log("Belajar JavaScript di VS Code");
2. Hubungkan ke HTML
Ubah index.html menjadi:
Html
<script src="script.js"></script>
Sekarang JavaScript dijalankan dari file terpisah.
Menjalankan JavaScript di VS Code Tanpa Browser (Node.js)
Cara ini biasanya digunakan saat:
- Belajar logika JavaScript
- Membuat aplikasi backend
- Testing kode JavaScript
1. Install Node.js
Download dan install Node.js dari situs resminya.
Setelah itu cek di terminal:
Bash
node -v
Jika versi muncul, berarti Node.js sudah terpasang.
2. Buat File JavaScript
Contoh:
app.js
JavaScript
console.log("Halo, ini JavaScript dari Node.js");
3. Jalankan di Terminal VS Code
Buka terminal di VS Code:
- Klik Terminal → New Terminal
- Jalankan perintah:
Bash
node app.js
JavaScript
Halo, ini JavaScript dari Node.js
Ekstensi VS Code yang Direkomendasikan
Agar belajar JavaScript lebih nyaman:
1. Live Server
- Menjalankan HTML secara otomatis di browser
2.JavaScript (ES6) Code Snippets
- Mempercepat penulisan kode
3. Prettier
- Merapikan kode otomatis
Kesalahan Umum Pemula
Beberapa kesalahan yang sering terjadi:
- Lupa menyimpan file sebelum dijalankan
- Salah penamaan file .js
- Script tidak terhubung ke HTML
- Node.js belum terinstall
Tenang, ini hal yang sangat wajar saat belajar.
Kesimpulan
Menjalankan JavaScript di VS Code adalah langkah penting untuk menjadi developer JavaScript. Kamu bisa:
- Menjalankan JavaScript lewat browser
- Menggunakan file .js terpisah
- Menjalankan JavaScript tanpa browser menggunakan Node.js
Setelah memahami ini, kamu siap masuk ke materi JavaScript yang lebih dalam 🚀