Panduan Lengkap: Cara Menjalankan JavaScript di Visual Studio Code

Visual Studio Code (VS Code) adalah salah satu editor kode paling populer di kalangan pengembang web. Kemampuannya untuk menangani berbagai bahasa, termasuk JavaScript, sangat superior. Namun, bagi pemula, proses menjalankan kode JavaScript langsung dari VS Code mungkin memerlukan beberapa langkah konfigurasi awal, terutama jika Anda ingin outputnya muncul langsung di terminal terintegrasi.

Secara umum, ada tiga metode utama untuk mengeksekusi kode JavaScript di VS Code: menggunakan ekstensi, menggunakan Node.js di Terminal Terintegrasi, atau menjalankan melalui peramban web. Artikel ini akan fokus pada metode yang paling umum dan efisien, yaitu menggunakan Node.js di Terminal Terintegrasi dan bantuan ekstensi sederhana.

Langkah 1: Memastikan Node.js Terinstal

Untuk menjalankan file .js secara mandiri (bukan di browser), Anda memerlukan lingkungan runtime JavaScript di luar browser, dan Node.js adalah pilihan standar. Pastikan Anda telah menginstal Node.js pada sistem operasi Anda.

  1. Kunjungi situs resmi Node.js (nodejs.org) dan unduh installer yang sesuai.
  2. Setelah instalasi selesai, buka VS Code.
  3. Buka Terminal Terintegrasi (View > Terminal, atau tekan Ctrl + \` atau Cmd + \`).
  4. Ketik perintah berikut untuk memverifikasi instalasi: 
    node -v
    Jika muncul nomor versi, berarti Node.js berhasil terinstal.

Langkah 2: Membuat File JavaScript Pertama Anda

Buat sebuah folder proyek baru dan di dalamnya, buat file baru bernama app.js (atau nama lain dengan ekstensi .js).

// app.js
function sapa(nama) {
    return "Halo, " + nama + "! Selamat datang di eksekusi JS VS Code.";
}

const pesan = sapa("Pengembang");
console.log(pesan);

// Contoh operasi sederhana
let a = 5;
let b = 10;
console.log("Hasil penjumlahan 5 + 10 adalah: " + (a + b));

Langkah 3: Menjalankan Kode Melalui Terminal (Node.js)

Ini adalah cara standar dan paling direkomendasikan untuk menjalankan logika backend atau skrip JS tanpa perlu membuka browser. Pastikan Terminal VS Code Anda berada di direktori tempat file app.js Anda disimpan.

  1. Buka Terminal di VS Code (Ctrl + \`).
  2. Gunakan perintah node diikuti nama file Anda: 
    node app.js
  3. Tekan Enter. Output dari console.log() akan langsung muncul di terminal tersebut.

Metode Alternatif: Menggunakan Ekstensi "Code Runner"

Bagi yang menginginkan kemudahan menjalankan kode dengan sekali klik tanpa mengetik di terminal setiap saat, ekstensi Code Runner adalah solusi yang sangat populer.

RUN

Simbol eksekusi cepat di VS Code

Instalasi Code Runner:

  1. Buka tampilan Ekstensi (ikon kotak di sidebar kiri, atau Ctrl+Shift+X).
  2. Cari Code Runner (oleh Jun Han).
  3. Klik tombol "Install".

Cara Menggunakan Code Runner:

Setelah terinstal, Anda bisa menjalankan file app.js dengan dua cara:

  1. Klik kanan di dalam editor file app.js dan pilih "Run Code".
  2. Atau, tekan shortcut default (biasanya Ctrl+Alt+N).

Code Runner secara cerdas akan mendeteksi bahwa ini adalah file JavaScript dan akan menggunakan Node.js untuk menjalankannya, menampilkan hasilnya di panel Output VS Code.

Langkah 4: Menjalankan JavaScript di Peramban (Browser)

Jika kode JavaScript Anda berinteraksi dengan DOM (Document Object Model), Anda perlu menjalankannya di peramban web. Metode ini memerlukan sedikit modifikasi pada struktur file Anda.

  1. Buat file HTML, misalnya index.html, di folder yang sama.
  2. Tautkan file JS Anda ke dalam HTML tersebut: 
    <!DOCTYPE html>
<html>
<head>
    <title>JS di Browser</title>
</head>
<body>
    <h1>Cek Console Browser</h1>
    <script src="app.js"></script>
</body>
</html>
  3. Untuk menjalankannya, Anda bisa menginstal ekstensi seperti **"Open in Browser"** atau cukup klik kanan file index.html dan pilih "Open in Default Browser".
  4. Setelah terbuka, tekan F12 di browser untuk membuka Developer Tools, dan lihat hasilnya di tab Console.

Kesimpulan

Menjalankan JavaScript di Visual Studio Code sangat fleksibel. Untuk skrip mandiri (seperti yang memanfaatkan Node.js), menggunakan Terminal Terintegrasi adalah cara paling mendasar dan kuat. Sementara itu, ekstensi seperti Code Runner sangat meningkatkan produktivitas dengan memberikan eksekusi instan. Pilihlah metode yang paling sesuai dengan jenis proyek JavaScript yang sedang Anda kerjakan.

Related Posts