Damnthelion > VSCode > Visual Studio Code: Cara Install dan Tips Mudah Ngoding Untuk Pemula
Tampilan Visual Studio Code - Featured Image

Visual Studio Code: Cara Install dan Tips Mudah Ngoding Untuk Pemula

Saat pertama kali kita memutuskan untuk mecoba belajar ngoding hal yang pertama dilakukan adalah mencari tutorial yang membuat kita tertarik mencobanya, kemudian mempersiapkan tools yang akan kita gunakan untuk menulis kode. Bagi orang awam, mungkin mereka hanya familiar dengan aplikasi pengolah kata seperti Microsoft Office Word dan Notepad.

Jika dipikir-pikir di dalam kepala “bagaimana, kok bisa sih mengelola ratusan bahkan ribuan baris kode dalam sebuah teks editor?”, apalagi jika mereka (orang awam) cuman tau text editor Word dan Notepad, bahkan Sticky Notes.

Bayangkan betapa ribetnya ngoding dan mengelola kode di text editor seperti Word dan Notepad
Bayangkan betapa ribetnya ngoding dan mengelola kode di text editor seperti Word dan Notepad

Bayangkan kalau kamu sedang membuat halaman HTML yang terhubung dengan beberapa file CSS dan Javascript, tentu saja hal ini menjadi cukup merepotkan karena dalam proses mengelola filefile tersebut, kita harus membukanya satu-satu. Tidak adanya navgasi untuk file yang terintegrasi dengan aplikasi editor ini membuat kita harus membuka satu-satu halaman yang sedang kita buat kodenya.

Coba lihat gambar di atas, seluruh kode yang kita tulis berwarna hitam! Sudah susah navigasi untuk mengelola file, ditambah lagi susah membaca kode yang kita buat. Belum lagi kalau kita ingin melihat hasil kodingan yang kita buat, misalnya pada contoh kasus ini, kita sedang membuat halaman dalam bentuk HTML, setiap kita ingin melihat hasil terbaru dari kodingan yang kita buat, kita harus me-refresh halaman untuk melihat hasilnya, duh cape banget.

Mencoba keluar dari rumitnya menulis kode

“Bagamana mengelola kode”, “Bagaimana membuat kode lebih mudah di baca”, “Perintah apa yang harus digunakan”, dan “Bagaimana cara melihat hasil kodingan saya di web” merupakan pertanyaan-pertanyaan yang mungkin bagi developer adalah hal yang remeh temeh.

Semua pertanyaa tersebut dapat terjawab jika kamu mengenal aplikasi pengolah kata atau text editor yang lebih powerful dalam mengelola kode atau lebih dikenal dengan code editor. Beberapa code editor populer yang banyak digunakan untuk menuliskan kode program diantaranya adalah Visual Studio Code, Sublime dan Notepad++.

Pada code editor tersebut kamu dapat mengelola kode-kode yang kamu tulis, membuatnya mudah dibaca, dan running aplikasi web/ desktop kamu dalam 1 aplikasi.

Pada artikel ini, kita akan membahas code editor populer yang paling banyak digunakan oleh para developer dan bahkan yang saya gunakan saat ini, yaitu Visual Studio Code atau sering disebut dengan VSCode dan cara install Visual Studio Code di WIndows.

Apa Itu Visual Studio Code?

Visual Studio Code (VSCode) adalah sebuah aplikasi code editor yang dikembangkan oleh Microsoft. VSCode merupakan salah satu code editor yang sangat populer di kalangan software developer dan banyak digunakan untuk mengembangkan berbagai jenis aplikasi, termasuk aplikasi web, desktop dan pengembangan lintas platform (cross-platform).

Fitur-fitur Visual Studio Code yang buat kamu mudah belajar ngoding

Berikut ini adalah alasan kenapa Visual Studio Code bisa memudahkan kamu dalam menulis kode-kode, sehingga kamu hanya cukup fokus memahami kode dari tutorial-tutorial yang ada di internet:

Ringan dan Cepat: Bisa dijalankan di semua jenis laptop keluaran lama

VSCode dirancang untuk menjadi ringan dan responsif. Visual Studio Code bahkan bisa dijalankan di laptop/ komputer spek kentang sehingga memungkinkan kamu untuk dapat mengakses dan mengedit kode dengan cepat. Spesifikasi minimum untuk menjalankan code editor ini adalah processor dengan kecepatan 1.6 GHZ, dan RAM 1GB.

Kalau kamu penasaran dengan spesifikasi laptop/ komputermu, kamu bisa mengikuti tahap-tahap berikut ini:

Windows + R, lalu masukkan dxdiag untuk melihat spesifikasi laptop/ komputermu.
Windows + R, lalu masukkan dxdiag untuk melihat spesifikasi laptop/ komputermu.
  1. Pada home windows-mu, tekan Windows + R, maka dialog Run akan muncul.
  2. Masukkan dxdiag, lalu tekan Enter.
  3. Kamu bisa lihat spsifikasi processor kamu di bagian Processor dan Memory.
Lihat pada bagian processor dan memory untuk melihat spesifikasi laptop/ komputermu
Lihat pada bagian Processor dan Memory untuk melihat spesifikasi laptop/ komputermu

Dukungan untuk Banyak Bahasa Pemrograman: Belajar banyak di satu aplikasi

VSCode mendukung banyak bahasa pemrograman populer seperti JavaScript, PHP, Python, Java, C++, dan masih banyak lagi. Jadi kamu tidak perlu pusing lagi untuk berganti code editor untuk mempelajari tutorial yang menggunakan bahasa pemerograman apapun.

Dukungan berbagai bahasa pemerograman ini bisa dilakukan berkat fitur extension yang disediakan oleh VSCode. Kamu bahkan bisa menjalankan situs WordPress hanya dari code editor ini tanpa perlu set up PHP, Server, dan MYSQL! Benar-benar satu aplikasi untuk segala kebutuhan kodingmu.

Fungsi Ekstensi terbaik: Fitur utama untuk meningkatkan efesiensi koding

VSCode mendukung ekstensi pihak ketiga yang memungkinkan kamu untuk menyesuaikan dan memperluas fungsionalitas dari code editor-mu sesuai dengan kebutuhan. Ada ribuan extension yang tersedia melalui Visual Studio Code marketplace.

Extension IntelliSense yang memberikan saran/ sugesti relevan tentang tag atau property
Extension IntelliSense yang memberikan saran/ sugesti relevan tentang tag atau property

Terdapat banyak extension yang bisa mempermudah proses belajar kodingmu ataupun mempermudah aktivitas ngoding, diantaranya seperti:

  • Prettier: Sebuah extension untuk membuat kode kamu menjadi mudah dibaca.
  • IntelliSense: Extnsion yang memberikamu saran syntax apa yang bisa kamu gunakan, sehingga kamu bisa menulis kode dengan lebih cepat. Selain itu, extension ini juga memberikan saran kode apa yang relevan dengan kode ingin kamu tulis.
  • Live Server: Untuk kamu yang sedang mencoba belajar HTML, CSS, dan vanilla Javascript, ini adalah extension yang wajib kamu install karena Live Server akan menampilkan hasil kodingan kamu di browser secara update. Setiap kamu menyimpan atau save hasil kodinganmu, Live Server akan me-refresh tab browser dan menampilkan tampilan terbaru.
  • Dan tentunya masih banyak extension yang mempermudah kamu buat ngoding.

Beberapa ekstensi yang disebutkan pada daftar di atas merupakan ekstensi yang wajib di-install oleh programmer pemula. Pertanyaan sebelumnya tentang “Bagaimana membuat kode lebih mudah di baca” bisa kita selesaikan dengan ekstensi Prettier.

Terus, pada permasalahan “Bagaimana cara melihat hasil kodingan saya di web” juga bisa terpecahkan dengan ekstensi Live Server yang dimana akan melakukan pembaruan pada browser ketika kamu menyimpan hasil kodingan terbarumu.

Dengan fitur ekstensi yang dapat memudahkan kamu untuk belajar koding ini, maka Visual Studio Code menjadi pilihan yang tepat untuk menjadi code editor untuk menemani perjalanan belajar ngoding.

Integrasi dengan Git: Teknologi standar yang wajib digunakan oleh developer

VSCode menyediakan integrasi bawaan dengan Git, yang memungkinkan pengguna untuk melakukan version control langsung dari editor. Git merupakan standar industri untuk pekerjaan programmer.

Gambaran sederhana tentang version control - Gambar via GeeksForGeeks
Gambaran sederhana tentang version control – Gambar via GeeksForGeeks

Sebagai intermezzo Git adalah sebuah tools untuk kolaborasi koding, hosting kode, dan mengelola versi dari project. Dengan menggunakan Git, kamu bisa melihat timeline progres dari kodemu dan kamu dapat kembali ke versi tertentu dari kodingan kamu jika suatu waktu kodingan kamu error karena pingin menambahkan fitur, tapi sudah tidak tertolong dengan Ctrl + Z. Ingat, ini hanya penjelasan super sederhana tentang Git.

Ibaratnya seperti kamu menggunakan aplikasi Google Drive dan Google Docs untuk menyimpan dokumen word di cloud. Kamu bisa meng-edit dokumen bersama orang lain, melihat history siapa yang meng-edit dan bisa kembali ke versi sebelum edit itu terjadi.

Integrasi dengan Pengembangan Web

VSCode sangat populer di kalangan web developer karena menyediakan fitur-fitur seperti syntax highlighter dan linting HTML, CSS, dan JavaScript, serta dukungan untuk ekosistem Node.js.

Syntax Highlighter

Syntax highlighter di code editor Visual Studio Code
Syntax highlighter di code editor Visual Studio Code

Kodingan yang kamu buat akan menjadi berwarna-warni, sehingga akan memudahkan kamu dalam membaca dan mengelola kode. Istilah ini sering disebut dengan syntax highlighter.

Jika di bandingan dengan cotoh gambar di awal (ngoding dengan Notepad), sekarang kamu bisa membedakan mana bagian kode yang merupakan function, variable, HTML dan CSS, sehingga kode yang kamu buat ketika mengikuti tutorial, kamu bisa lebih memahaminya.

Linting

Umumnya kesalahan yang sering dilakukan oleh orang yang baru belajar ngoding adalah kesalahan syntax, yang paling sederhana adalah lupa menaruh ; pada akhir baris kode.

Fitur ini benar-benar akan memudahkan kamu untuk belajar, karena VSCode akan memberitahu kamu, dimana letak error pada penulisan syntax kode yang kamu buat. Tentunya sebuah fitur yang memudahkan developer untuk mengidentifikasi kesalahan penulisan syntax.

Pengaturan yang Mudah Dikonfigurasi

VSCode memiliki antarmuka pengguna yang simple dan pengaturan yang mudah dikonfigurasi. Dengan begitu kamu bisa menyesuaikan layout dan fungsionalitas sesuai dengan preferensi yang kamu inginkan.

Komunitas Open Source yang Besar

VSCode dapat di-download dan digunakan secara gratis, dan dukungan aktif dari komunitas developer membuatnya menjadi pilihan yang populer untuk mengembangkan aplikasi atau software.

Tentu saja, banyak ekstensi yang tersedia ini karena dukungan komunitas yang besar.

Cara Install Visual Studio Code di Windows

Halaman utama situs resmi Visual Studio Code

Berikut adalah langkah-langkah cara install Visual Studio Code di sistem operasi Windows:

Download Installer

  1. Buka situs resmi Visual Studio Code di https://code.visualstudio.com/.
  2. Klik tombol “Download for free” untuk men-download file installer.

Jalankan installer

Setelah download selesai, buka file installer yang baru di-download (biasanya memiliki nama seperti VSCodeUserSetup-version.exe).

Proses Instalasi

  1. Pilih “I accept the agreement”.
  2. Pilih opsi konfigurasi instalasi yang diinginkan, saran saya centang semua opsi yang tersedia, sehingga nantinya kamu bisa membuka context menu (menu ketika kamu melakukan klik kanan, untuk membuka file atau folder menggunakan VSCode).
    Instalasi Visual Studio Code Tahap 2
  3. Klik “Next” lalu “Install” untuk meng-install VSCode.

Install Visual Studio Code Selesai

Instalasi Visual Studio Code Tahap telah selesai
Instalasi Visual Studio Code Tahap telah selesai

Jika installer menampilkan seperti ini, lalu klik “Finish”, maka instalasi VSCode sudah berhasil dan editor akan terbuka.

Cara Buka Visual Studio Code

Melalui Icon Aplikasi

Untuk membuka Visual Studio Code, kamu dapat melakukannya melalui shortcut di desktop atau dari menu Start.

Melalui Context Menu

Pilih folder atau file yang mau dibuka dengan VSCode, klik kanan lalu klik Open With Code

Kesimpulan

Sekarang kamu sudah siap untuk belajar koding menggunakan tutorial programming yang ada di internet. Dengan menggunakan code editor kamu bisa langsung fokus untuk memahami kode-kode yang disajikan pada tutorial yang kamu pilih.

Manfaatkan fitur-fitur extension VSCode yang tersedia di marketplace untuk membuat baris kode yang kamu buat menjadi mudah dibaca.

Frequently Asked Question FAQ

Apa itu Visual Studi Code?

Visual Studio Code (VSCode) adalah sebuah code editor yang dikembangkan oleh Microsoft. VSCode merupakan salah satu code editor yang sangat populer di kalangan software developer dan banyak digunakan untuk mengembangkan berbagai jenis aplikasi, termasuk aplikasi web, desktop dan pengembangan lintas platform (cross-platform).

Apakah Visual Studio Code berbayar?

Visual Studi Code bisa kamu download secara gratis melalui situs resmi mereka.

Apakah Saya bisa Install Visual Studio Code jika spesifikasi laptop/ komputer saya rendah?

VSCode dirancang untuk menjadi ringan dan responsif. Visual Studio Code bahkan bisa dijalankan di laptop/ komputer spek kentang sehingga memungkinkan kamu untuk dapat mengakses dan mengedit kode dengan cepat.

Spesifikasi minimum untuk menjalankan code editor ini adalah processor dengan kecepatan 1.6 GHZ, dan RAM 1GB.

Tetapi jika spesifikasi laptop/ komputer kamu di bawah itu, kamu tetap bisa install code editor ini dengan sabar, karena kamu akan merasakan respon yang lebih lambat.

Selanjutnya apa?

Kamu bisa mencoba tutorial-tutorial dasar web development dalam bahasa Indonesia yang sudah saya pilih.

Berikut ini rangkuman link yang menurut saya berguna untuk kamu yang ingin belajar menjadi web developer:


Comments

Jika anda menemukan hal yang membingungkan, jangan malu untuk bertanya melalui kolom komentar, penulis sangat menyukai feedback apalagi jika feedback tersebut dapat memperbaiki penulisan agar mudah dipahami oleh pembaca lainnya di masa depan.

Leave a Reply

Your email address will not be published. Required fields are marked *