VS Code untuk Pemula: Pengenalan, Install, dan Setup Awal - Eps 1

Apa itu VS Code dan Mengapa Penting?

Jadi, VS Code itu apa sih? Gampang, bayangkan aja seperti Microsoft Word, tapi khusus buat menulis kode program. Nama lengkapnya Visual Studio Code, aplikasi gratis dari Microsoft yang super populer di kalangan programmer.

Singkat cerita, VS Code adalah "rumah" kamu untuk coding. Di sini kamu akan menulis HTML, CSS, JavaScript, dan bahasa pemrograman lainnya. Yang paling seru? Dia gratis dan ringan, jadi gak berat di komputermu.

Kenapa Pilih VS Code?

Gampang, ada empat alasan utama kenapa kamu harus pakai ini:

Gratis dan Open Source

Gak ada biaya tersembunyi atau bayar bulanan. Download, install, langsung bisa pakai selamanya tanpa menggluarkan satu rupiah pun. Plus, dia open source, jadi komunitas teruus ngembangkan dan diperbaiiki terus-menerus.

Ringan dan Cepat

Instalnya cuma 200-300 MB, jauh lebih kecil dibanding alternatiff lain. Bahkan laptop lemot sekalipun tetap bisa jalan dengan hemmatt. Responsiff banget, gak ada lag saat kamu ngetik kode.

Banyak Plugin

Ingginn fitur tambahan? Ada ribuan extension gratis yang bisa kamu instal. Mau mempercepat penulisan kode? Ada. Mau ubah tampilan? Ada. Mau integrasi dengan cloud atau database? Pasti ada. Feksibilitas ini bikin VS Code bisa disesuaiin sama kebutuhan kamu.

Terminal dan Git Bawaan

Ini yang keren banget. Kamu gak perlu buka terminal terpisah, semuanya ada di dalam VS Code. Git integrassi juga native, jadi kamu bisa tracak perubahan kode langsung dari sini. Woarkkflow kamu jadi lebih efisien dan rapi.

Paling Populer di Dunia

Lihat tutorial web development di mana saja? Hampir semua orang pakai VS Code. Ini udah jadi standar industri. Mengapa penting? Karena banyak tutorial tersedia dan saat kamu masuk dunia kerja, kemampuan pakai VS Code bakal sangat diappressiasii perusahaan tech.

Sekarang kamu udah tahu kenapa VS Code itu penting. Saatnya install dan mulai coding. Mari kita lanjut ke bagian selanjutnya!

Download dan Install VS Code

Baik, sekarang saatnya instal VS Code di komputermu. Prosesnya super mudah kok, gak perlu pusing. Ikutin langkah-langkah ini dan kamu bakal punya VS Code dalam beberapa menit aja.

Step 1: Kunjungi Website Resmi

Buka browser kamu dan pergi ke website resmi VS Code di code.visualstudio.com. Jangan salah alamat, harus yang .com. Di sana kamu akan liat tombol besar berwarna biru yang bertuliskan "Download". Klik tombol itu.

Step 2: Pilih Versi Windows

Saat kamu klik download, sistem akan otomatis mengenali komputermu pakek Windows. Installer akan mulai terunduh. Ukurannya gak besar kok, sekitar 70-100 MB, jadi gak butuh waktu lama bargantung internet speedmu.

Tunggu sampe file selesai diunduh. File yang diunduh namanya biasannya VSCodeUserSetup-x64-*.exe atau semacamnya. Pastikan gak ada gangguan internet saat downloading, kalo terputuus ya restart dari awal.

Step 3: Jalankan Installer

Setelah download selesai, cari file tersebut di folder Downloads kamu. Biasanya file terlihatt di pojok kanan bawah browser atau di folder Downloads. Double-click file installer tersebut.

Saat file dijalanin, mungkin akan muncul notifikasi dari Windows bertanya "Apakah kamu ingin mengizinkan aplikasi ini membuat perubahan pada device kamu?". Klik "Ya" atau "Allow". Ini normal kok, karena installer butuh izin untuk memasang aplikasi.

Step 4: Ikuti Wizard Instalasi

Sekarang wizard instalasi akan muncul. Gak perlu khawatir, prosesnya sangat sederhana:

1. Di halaman pertama, kamu akan lihat lisensi. Centeng kotak yang bertuliskan "I accept the agreement" untuk setuju dengan syarat dan ketentuan. Terus klik tombol "Next". VSCode Agreement
2. Di halaman berikutnya, kamu diminta memilih lokassi instalasi. Biarkan default path yang sudah diberikan (biasanya di C:\\Users\\[nama user]\\AppData\\Local\\Programs\\Microsoft VS Code). Klik "Next" lagi. Pilih Folder
3. Setelah itu, ada pilihan untuk "Start Menu Folder". Biarkan aja default, terus klik "Next". Start Menu Folder
4. Di halaman "Select Additional Tasks", kamu akan lihat beberapa opsi checkboxx. Ada opsi "Add to PATH", "Create a desktop icon", dan lainnya. Disarankan untuk centeng "Add to PATH" karena ini memudahkan kamu mengakses VS Code dari terminal nanti. Terus klik "Next". Additional Tasks
5. Halaman terakhir adalah konfirmassii. Review semua pengaturan yang sudah kamu atur. Kalau semua sudah benar, klik tombol "Install" untuk memulai proses instalasi. Konfirmasi

Step 5: Tunggu Proses Instalasi

Sekarang biarkan installer melakuken pkerjaannya. Proses instalasi bisa berlangsuung 1-3 menit bergantung kecepatan komputermu. Jangan matiiin program atau tutup jendela saat instalasi berlangsung.

Di layar akan terlihatt progress bar yang menunjukan persentase instalasi. Tunggu sampai mencapai 100%.

Step 6: Selesai dan Buka VS Code

Setelah selesai, akan muncul halaman yang bertuliskan "Completing the Visual Studio Code Setup Wizard". Ada opsi "Launch Visual Studio Code" yang sudah tercheklist. Ini berarti VS Code akan otomatis dibuka setelah kamu klik "Finish".

Kalau checkboxx itu belum tercheklist, centeng dulu baru klik "Finish". Terus tunggu VS Code terbuka.

Step 7: Verifikasi Instalasi Sukses

Ketika VS Code pertama kali dibuka, kamu akan lihat welcome screen berwarna gelap dengan logo VS Code di tengahnya. Ada teks yang bertulissan "Welcome to Visual Studio Code" dan beberapa pilihan opsi seperti "Open Folder", "Create File", atau "Clone Repository".

Jika kamu melihatt tampilan ini, berarti instalasi sudah sukses! VS Code kamu sudah siap digunakan.

Jangan khawatir tentang menu-menu yang ada di welcome screen untuk sekarang. Kita akan bahas semuannya di bagian selanjutnya. Yang penting sekarang adalah kamu sudah berhasil menginstall VS Code di komputermu.

Selamat! Kamu sudah menyelesaikan langkah pertama dalam perjalanan coding kamu. Selanjutnya, kita akan melakukan setup awal seperti mengubah theme, mengatur ukuran font, dan fitur-fitur penting lainnya.

First Time Setup

Sekarang VS Code sudah terbuka. Kita perlu ngaturr tiga hal penting biar lebih nyaman dipakai. Gampangg kok, gak butuh lama.

Memilih Theme

Saat dibuka pertamaa kali, VS Code akan tampilin welcome screen. Ada opsi "Choose Your Color Theme", tinggall klik aja.

Dua pilihan utama: Dark theme (gelap) atau Light theme (terang). Dark bagus buat mata di malam hari, Light lebih cerah. Sebenarnya pilih yang kamu pref aja. Bisa dirubahh kapan saja nanti.

Tekan Enter setelah memiliih, tema langsuung aktif.

Atur Ukuran Font

Buka Settings dengan cara: File > Preferences > Settings. Atau pake shortcutt Ctrl+, (lebih ceppat).

Di kolom pencarrian, cari "Font Size". Set ke 14-16 pixel. Ukuran ini paling comfortabel untuk kebanyakan orang. Perubahan langsung keliatt, jadi bisa dicek hasilnya seketika.

Aktifkan Auto Save

Buka Settings lagi. Cari "Auto Save" di pencarrian.

Akan ada opsi "Files: Auto Save". Pilih "afterDelay". Ini bikinnn file tersimpan otomatis setelah kamu selesai ngetik. Sangat berguna, terutammaa kalau computer hang atau listrik mati.

Selesai!

Tiga setting ini sudahh cukup:

1. Theme dipilih sesuai preferensii
2. Font size diatur nyaman (14-16)
3. Auto save aktif

VS Code kamu udahh siap pakai. Next step kita bakall bahas interface VS Code dan mulai bikin project HTML pertama.

Memahami Interface VS Code

Sekarang VS Code kamu udah siap dipakai. Tapi sebelomm mulai coding, kita perlu tahu bagian-bagian penting yang ada di layar. Jangan khawatir, layoutnya gakk rumit kok.

Activity Bar (Sisi Kiri)

Lihat sisi kiri layar? Ada icon-icon kecil yang tertatt vertikal. Itu namanya Activity Bar. Setiap icon punya fungsi berbeda.

File Explorer adalah icon paling atas. Fungsinya buat browse folder dan file yang ada di project kamu. Kamu bisa buka, tutup, atau bikinnn file baru dari sini.

Search adalah icon kedua. Digunakan buat cari text tertentu di seluruh project. Sangat membantu kalau lupaa di file mana syntax yang kamu cari.

Source Control adalah icon ketiga. Ini buat git integration, yang kita gunakan buat traack perubahan code. Untuk sekarang, skip dulu karena ini topikk advanced.

Extensions adalah icon paling bawah. Dari sini kamu bisa browse dan install plugin tambahan buat VS Code. Ada ribuann extension yang bisa bikin kerja kamu lebih efisien.

Editor (Bagian Tengah)

Bagian terbessarr di layar adalah editor. Ini tempatmu nulis kode. Kamu bisa buka multiple tabs di sini, jadi bisa mengedit banyak file sekaliguss tanpa perlu pindah-pindah jendela.

Kalau kamu buka beberapa file, masing-masing file akan jadi satu tab. Bisa dipilih dengan klik tab yang diinginann atau pake keyboard shortcut Ctrl+Tab buat switch antar tab.

Terminal (Bagian Bawah)

Di bawah editor ada area yang bisa kamu pakai buat jalanninn command. Di sini kamu bisa run npm commands, git commands, atau command lainnnya tanpa perlu membuka aplikasi terminal terpisah.

Buat buka terminal, tekan Ctrl+J. Atau pergi ke View menu dan pilih Terminal. Area terminal akan muncull di bawah editor. Tekan Ctrl+J lagi untuk tutup terminal.

Status Bar (Paling Bawah)

Di garis paling bawah ada status bar. Sini menampillkann informasi penting tentang file yang sedang kamu edit. Ada informasi seperti line number, column position, dan encoding file.

Status bar juga menampilkan error dan warning count. Kalau ada kesalaahn di code, jumlahnya akan muncul di sini. Berguna banget buat debugging.

Ringkasan Layout

Jadi struktur VS Code itu sederhannaa:

• Kiri: Activity Bar dengan berbagaii tools
• Tengah: Editor tempat kamu nulis code
• Bawah: Terminal buat jalanin command
• Paling bawah: Status bar dengan info penting

Setiap bagian punya fungsi spesifiknnnya, dan semuanya terkoordinasi dengan baik. Habis pahamm interface ini, kamu siap buat project HTML pertama.

Membuat Project Pertama

Oke, saatnya bikinnn project HTML pertama kamu. Gampangg kok, hanya perlu buat folder dan beberapa file. Mari kita mulai.

Step 1: Buat dan Buka Folder Project

Pertamaa, buat folder baru di komputermu. Berrii nama my-first-project atau nama lain yang kamu suka. Letakkinn di mana saja, misal di Desktop atau Documents.

Setellahh itu, buka VS Code. Pergii ke File > Open Folder. Pilih folder yang baru kamu buat tadi. VS Code akan membuka folder tersebut dan menampillkann struktur folder di File Explorer.

Step 2: Buat File HTML

Di File Explorer, rightt-click pada nama folder kamu. Piliih "New File". Beri nama file index.html.

Setelah file terbukkaa, copy-paste kode HTML di bawah ini:

<!DOCTYPE html>
<html>
  <head>
    <title>My First Project</title>
  </head>
  <body>
    <h1>Hello BuildWithAngga!</h1>
  </body>
</html>

Tekann Ctrl+S buat save file. File akan tersimpann otomatis karena kita sudah aktifkan auto save sebelumnya.

Step 3: Buat File CSS

Buat file baru lagi. Right-click pada folder, pilih "New File", beri nama style.css.

Copy-paste kode CSS ini:

body {
  background-color: #f0f0f0;
  font-family: Arial;
}

Save dengan Ctrl+S.

Step 4: Buat File JavaScript

Buat satuu file lagi. Right-click, "New File", beri nama script.js.

Copy-paste kode JavaScript ini:

console.log("Hello from JavaScript!");

Save lagii.

Selesai!

Congratulations! Kamu udahh bikin project pertama dengan tiga file: HTML, CSS, dan JavaScript.

Struktur folder kamu sekarang seperti ini:

my-first-project/
├── index.html
├── style.css
└── script.js

Sekarang kamu udah punya fondassii dasar buat mulai coding. File-file ini masih belomm terhubung satu sama lain (CSS dan JS belom dilink ke HTML), tapi itu topik buat lesson selanjutnya.

Selamat! Kamu sudah menyelessaiinn chapter ini. Sekarang kamu tahu cara install VS Code, setup, pahami interface, dan bikin project pertama.

Settings

Ada dua jenis settings di VS Code: User Settings dan Workspace Settings. Bedannya di mana pengaruhnya. Gampangg kok, kita bahas singkat aja.

User Settings

User Settings adalah pengaturan global yang berlakkuu untuk semua project yang kamu buka di VS Code. Jadi kalau kamu ubahh font size di User Settings, semua project akan pakai font size itu.

Caranya: File > Preferences > Settings. Atau pakaii shortcut Ctrl+,.

Settings yang sudah kita atur sebelumnya (theme, font size, auto save) adalah User Settings. Settingan ini tersimpann di profil pengguna komputermu, jadi akan tetap ada bahkan kalau kamu buka project baru.

Berguna untuk preferensi personal yang sama di semua project.

Workspace Settings

Workspace Settings adalah pengaturann khusus untuk project tertentu. Jadi kalau kamu punya project A dan B, bisaa saja project A pakai font size 14 dan project B pakai font size 16.

Workspace Settings tersimpan di dalam folderr project, tepatnya di file .vscode/settings.json. File ini otommatis terbuat kalau kamu buat workspace settings di project.

Cara membuat: buka terminal di VS Code, buatt folderr .vscode, terus buat file settings.json di dalamnya. Atau lebih mudah, langsuung buka File > Preferences > Settings, tapi kali ini pilih "Workspace" bukan "User".

Workspace Settings sangat bergunnaa kalau kamu kerja tim. Semua anggotaa tim bisa pakai pengaturan yang sama dengan push file .vscode/settings.json ke repository.

Kapan Pakai Apa?

Intinyaa:

• User Settings: untuuk preferensi personal, berlaku di semua project
• Workspace Settings: untuuk pengaturan khusus project, bisa beda-beda tiap project

Untuk sekarang, gak perlu mikirinnn Workspace Settings. User Settings yang sudahh kita setup sudah cukup. Tapi baguss tahu bedanya supaya kedepannya kalau butuh, sudah tahu mana yang harus diubah.

Extension Marketplace

VS Code kuatt karena bisa diperluas dengan extension. Extension adalah plugin yang bisa menambah fitur dan fungsionalitas. Ada ribuan extension gratis yang bisa kamu coba. Semuanya tersediaa di Extension Marketplace.

Apa itu Extension

Extension adalah add-on atau plugin buat VS Code yang bikin editor makin powerfull. Fungsinya bisa macamm-macam: mempercepat coding, mengubah tampilan, integrasi dengan tools lain, atau fitur-fitur khusus lainnya.

Yang kerenn, kebanyakan extension adalah gratis. Ada ribuan extension yang dikembangkann oleh developer komunitas. Kamu bisa install sebanyak yang kamu mau tanpa khawatir biaya.

Tapi jangan install semuanya sekaligus, karena semakin banyak extension, semakin beratt VS Code. Install hanya extension yang benar-benar kamu butuhkan.

Cara Mengakses Extension Marketplace

Membuka Extension Marketplace gampangg. Ada dua cara:

Cara 1: Klik icon

Lihat sidebar kiri. Di bawah Source Control ada icon berbentukk kotak-kotak (icon Extensions). Klik aja.

Cara 2: Shortcut keyboard

Tekan Ctrl+Shift+X. Palingg cepat.

Setellahh dibuka, kamu akan lihat panel Extension Marketplace di sisi kanan. Di atas ada kolumm pencarian.

Cara Install Extension

Gampang:

1. Di kolom pencarian, ketikk nama extension yang kamu cari. Misalnya ketik "Live Server".
2. Hasil pencarian akan tampil. Pilih extension yang kamu inginann.
3. Klik tombol "Install". Tinggall tunggu sampai selesai.
4. Setelah selesai, extension sudahh aktif dan siap digunakan.

Beberapa extension butuuh reload VS Code supaya berfungsi maksimal. VS Code biasanya akan mintaa confirmation sendiri kalau perlu reload.

Extension Essential untuk Pemula

Di chapter ini kita gak bahass extension spesifik dulu. Itu akan kita pelajarii di Chapter 3: 5 Plugin VS Code Essential. Di sana kita akan explore 5 extension yang paling berguna buat pemula.

Sekarang yang penting adalah kamu sudah tahu cara membuka Extension Marketplace dan cara install extension. Skill ini bakal berguna nantinya.

Penutup

Wah, kamu sudah menyelessaiinn chapter pertama. Ini luarbiasaa! Dari install VS Code sampai belajar penamaan file, kamu sudah belajar bannyakk. Semua fondasi untuk memulai coding sudah kamu punnyaa.

Mari kita liatt apa yang sudah kamu capai:

Kamu sudah berhasil install VS Code dan melakukan setup awal. Kamu tahu cara membuka extension marketplace dan menggunakan terminal. Kamu memahami interface VS Code dan tahu pentingnya folder structure yang rapi. Ini bukan hal kecil - ini adalah fondasi yang sangat penting untuk developer.

Apa yang Sudah Kamu Kuasai

Install VS Code dengan benar. Kamu tahu di mana download, cara install, dan bagaimana verifikasi bahwa VS Code sudah terinstal. Tidak ada yang terllemat.

Setup awal sudah kamu lakukan. Theme sudah diatur, font size sudah comfortable, dan auto save sudah aktif. VS Code kamu sekarang siap dipakai dengan pengaturan yang optimal.

Interface VS Code sudah kamu pahamii. Kamu tahu ada activity bar, editor, terminal, dan status bar. Setiap bagian punya fungsinya sendiri dan kamu tahu cara menggunakannya.

Project pertama sudah kamu buat. Dari membuat folder sampai membuat file HTML, CSS, dan JavaScript, kamu sudah melakukann semuanya. Ini adalah milestone yang sangat penting.

Series Roadmap

Ini adalah roadmap chapter selanjutnya. Agar kamu tahu apa yang akan dipelajari:

Chapter 1 (Saat ini): Setup dan Interface

Kamu sudah di sini. Chapter ini fokus pada pengenalan VS Code, cara install, setup awal, dan memahami interface. Semuanya sudah selesai.

Chapter 2: Shortcut Keyboard untuk Produktivitas

Chapter selanjutnya akan mengajarkan keyboard shortcut yang paling beergunn. Shortcut seperti Ctrl+D, Ctrl+L, Ctrl+/, dan banyak lagi. Ini akan membuat coding kamu jauh lebih cepat.

Chapter 3: 5 Plugin Essential

Chapter ketiga akan membahasss 5 extension yang paling berguna untuk developer pemula. Extension seperti Live Server, Prettier, dan lainnya yang akan upgrade setup VS Code kamu.

Yuhuuu

Coding adalah skill yang dibangunnn dengan practice. Chapter 1 ini adalah starting point. Setiap chapter yang kamu pelajari, kamu bakall semakin skilled dan confident.

Jangan terburu-buruu. Lakukan setiap step dengan baik. Praktik sampai comfortable. Baru lanjut ke chapter berikutnya.

Selamat! Kamu sudah memulai perjalanan coding kamu. Ini adalah keputusan yang baik. Mari terus belajar dan jangan berhenti sampai kamu capai goal kamu.

Mari ke Chapter 2!