7 Cara Menggunakan Visual Studio Code untuk Pemula

Untuk web developer pemula maupun profesional, pasti Anda tidak asing lagi dengan layanan Visual Studio Code. Sebagai salah satu code editor terpopuler, software ini unggul karena antarmukanya yang intuitif, kompatibel dengan berbagai bahasa pemrograman, serta dilengkapi dengan ratusan extension untuk menambah fungsionalitasnya.

Selain fitur-fitur yang lengkap, VSCode juga termasuk salah satu software coding yang ringan. Tak heran, banyak penggunanya yang menggunakannya untuk menulis, mengedit, dan mengelola kode dengan efisien.

Meskipun begitu, tidak semua orang paham bagaimana cara menggunakan Visual Studio Code dengan tepat. Untuk itu, mari simak artikel ini untuk menelusuri lebih dalam 7 langkah dasar yang Anda harus ikuti, mulai dari instalasi hingga memanfaatkan fitur debugging dan kontrol versinya!

Baca juga: Visual Studio Code: Pengertian, Fitur, dan Keunggulannya

1. Menginstal Visual Studio Code

Setelah mengunduhnya dari website resmi Visual Studio Code, Anda perlu melakukan instalasi. Berikut adalah panduan instalasi VSCode sesuai dengan sistem operasi yang kamu gunakan.

Windows

Kunjungi website resmi Visual Studio Code dan unduh installer untuk Windows. Jalankan installer dengan perintah VSCodeUserSetup-x64-{versi}.exe. Setelah itu, ikuti petunjuk instalasi seperti setujui perjanjian lisensi, pilih lokasi instalasi, dan aktifkan opsi Add to PATH.

Terakhir, klik install dan tunggu beberapa saat. Jangan lupa untuk mencentang opsi Launch Visual Studio Code dan klik Finish untuk membuka VSCode secara otomatis.

macOS

Kunjungi website resmi Visual Studio Code dan klik tombol unduh untuk macOS. Setelah itu, buka file .dmg yang telah Anda unduh dan seret ikon VSCode ke folder Applications. 

Jalankan aplikasinya dengan klik icon Visual Studio Code, setelah itu tambahkan ke PATH dengan cara buka Command Palette di VSCode (Applications Cmd + Shift + p), ketik dan pilih “Shell Command: Install 'code' command in PATH”. Masukkan password administrator jika dibutuhkan.

Linux

Untuk distribusi Debian/Ubuntu, unduh paket .deb dan instal menggunakan perintah sudo dpkg -i code_<versi>_amd64.deb

sudo apt-get install -f

Setelah instalasi, tambahkan VSCode ke PATH untuk mempermudah aksesnya melalui terminal. Di macOS, ini dapat dilakukan dengan membuka Command Palette (Cmd+Shift+P), ketik Shell Command: Install 'code' command in PATH, dan tekan Enter.

2. Mengenal Antarmuka Visual Studio Code

Setelah membuka VSCode, Anda akan melihat antarmuka pengguna yang terdiri dari beberapa komponen utama:

Sidebar

Di sisi paling kiri, Anda akan menemukan menu Sidebar yang berisi beberapa panel penting seperti:

1. Explorer untuk menampilkan dan mengelola file proyek.

2. Search untuk mencari teks di seluruh proyek.

3. Source Control untuk integrasi dengan Git.

4. Run & Debug untuk menjalankan dan memantau debugging kode.

5. Extensions untuk mengelola ekstensi tambahan.

Editor Utama

Bagian ini menjadi tempat Anda menulis kode yang dilengkapi dengan tab. Ini membuat Anda dapat membuka banyak file sekaligus.

Status Bar

Di bagian bawah aplikasi, Anda dapat menemukan status bar berwarna biru. Bagian ini berisikan informasi  seperti bahasa pemrograman file yang sedang dibuka, status Git, dan notifikasi lainnya.

Navigasi Dasar

Untuk membuka file kode, Anda dapat klik file-nya sebanyak dua kali di Explorer. Peralihan antar tab dapat dilakukan dengan melakukan klik atau menggunakan shortcut keyboard. Terakhir, Anda dapat mengakses berbagai perintah dengan cepat melalui Command Palette (Ctrl + Shift + P).

3. Membuat dan Mengelola Proyek

Untuk mulai bekerja, kamu perlu membuat folder proyek baru di komputer. Berikut adalah cara membuat folder proyek baru:

• Membuat Folder Proyek: Buatlah folder baru di sistem file Anda, misalnya ProyekWeb.
• Membuka Folder di VSCode: Di VSCode, pilih File > Open Folder setelah itu pilih folder yang telah Anda buat.
• Membuat File Baru: Klik ikon New File di Explorer untuk membuat file seperti index.html, style.css, atau app.js.
• Menyimpan dan Mengatur Struktur Proyek: Gunakan fitur drag-and-drop di Explorer untuk mengatur file dan folder sesuai kebutuhan Anda.

4. Menyesuaikan Pengaturan dan Tema

Untuk memaksimal kenyamanan Anda saat melakukan coding, Anda dapat menyesuaikan pengaturan tampilannya. Klik menu opsi file → preferences → settings untuk mengubah pengaturan proyek. 

Tak hanya itu, Anda bisa mengetikkan Color Theme di Command Palette untuk mengubah tema warna editor dengan warna yang gelap ataupun terang. Di menu yang sama, Anda juga dapat mengatur font, ukuran teks, dan tata letak editor agar sesuai preferensi.

5. Menginstal dan Mengelola Ekstensi

Seperti yang tadi dibahas, VSCode dilengkapi dengan berbagai ekstensi bermanfaat. Untuk mengaksesnya, bukalah panel Extensions di sidebar dan klik icon filter untuk menampilkan jenis ekstensi berdasarkan kategorinya.

Biasanya, ekstensi yang populer di VSCode adalah Live Server untuk meninjau langsung halaman web, Prettier untuk memformat kode otomatis, dan IntelliSense untuk memberikan saran dan pelengkapan kode otomatis.

6. Menggunakan Terminal Terintegrasi

Tahapan selanjutnya dalam menggunakan VSCode adalah memanfaatkan terminal bawaannya. Dengan ini, Anda dapat menjalankan sema perintah tanpa keluar editor. Untuk membukanya, gunakan shortcut Ctrl + `` (tombol backtick). 

Di terminal ini, Anda bisa menjalankan perintah seperti npm init untuk memulai proyek Node.js, git init untuk membuat repository Git, atau perintah lain sesuai kebutuhan. Selain itu, Anda juga dapat menjalankan beberapa sesi dan terminal sekaligus dan berpindah dengan mudah.

7. Memahami Fitur Debugging dan Kontrol Versi

Pernah mendengar fitur debugging dalam VSCode? Fitur ini bermanfaat untuk menemukan dan memperbaiki kesalahan kode yang Anda buat. Untuk memulai sesi debugging, ikuti langkah-langkah berikut:

• Buka file kode sumber yang ingin Anda debug.
• Jika proyek memiliki struktur folder, buka folder proyek tersebut di VS Code.

• Klik ikon “Run and Debug” di sidebar kiri (ikon dengan bug). Sebagai alternatifnya, tekanlah Ctrl + Shift + D (Windows/Linux) atau Cmd + Shift + D (macOS).
• Untuk proyek yang lebih kompleks, Anda perlu membuat file launch.json dengan cara klik tombol “create a launch.json file“. Setelah itu, pilih lingkungan debug yang sesuai (misalnya, Node.js, Python).
• Tambahkan breakpoint dengan klik di sebelah kiri nomor baris pada kode. Dengan breakpoint, Anda dapat menghentikan eksekusi program pada baris tersebut saat debugging.
• Untuk memulai sesi debugging, tekan F5 atau klik tombol hijau “Start Debugging” di atas panel “Run and Debug“. Program akan berjalan dan berhenti pada breakpoint yang telah Anda tentukan.

Untuk kontrol versi, VSCode juga terintegrasi dengan Git secara langsung. Anda bisa menginisialisasi repository Git di folder proyek melalui panel Source Control atau terminal dengan git init. 

Selain itu, Anda dapat melakukan commit, push, membuat branch, dan merge juga dapat dilakukan langsung dari antarmuka VSCode.

Baca juga: 3 Tips Belajar Coding untuk Pemula

Siap Menjadi Web Developer Profesional?

Itulah panduan lengkap tentang cara menggunakan Visual Studio Code untuk para pemula. Melalui artikel ini, Anda sudah paham bagaimana instalasi, navigasi antarmuka, cara mengelola proyek, menyesuaikan pengaturan, hingga memanfaatkan fitur debugging dan kontrol versi. 

Ini merupakan langkah yang tepat jika Anda ingin mengembangkan website atau perangkat lunak dengan efisien dan profesional. Nah, apakah Anda ingin memperdalam pengetahuan dan keterampilan di bidang ini? Daftarkan diri Anda di kursus web programming dari Coding Studio!

Dalam kursus ini, Anda akan mendapatkan video learning HTML, CSS, dan JavaScript fundamental untuk website yang menarik dan interaktif. Tak hanya menyediakan materi yang ter-update, para akademisi dan mentor kami juga menggunakan pendekatan praktis dan studi kasus nyata. Ini membuat Anda paham akan materi dan siap praktik di dunia kerja!

Jangan lewatkan kesempatan ini! Kunjungi website kami dan mulai rencana karier Anda sebagai web developer profesional!