Visual Studio Code Untuk Pemula

Selamat datang di e-Book "Visual Studio Code Untuk Pemula". E-Book ini dibuat oleh
Galih Pratama, selaku Mentor di BuildWith Angga.

BuildWith Angga merupakan website untuk belajar design dan code dari mentor yang
sangat berpengalaman di bidangnya masing-masing. Di BWA, kalian dapat belajar dari
mentor yang berpengalaman di bidangnya dan mendapatkan sertifikat resmi untuk
membangun karir masa depan.

Daftar Isi
Daftar Isi
Apa itu Visual Studio Code
Kelebihan Visual Studio Code
Instalasi Visual Studio Code
Tampilan Antarmuka
Command Palette
Auto Completion & Emmet
Ekstensi
Tema
Terminal
Workspace
Pengaturan
Penutup

Apa itu Visual Studio Code

Visual Studio Code adalah editor kode yang dibuat oleh Microsoft yang dapat digunakan di
sistem operasi seperti Windows, Linux, dan macOS.

Visual Studio Code Untuk Pemula 1

 Tampilan Antaramuka Visual Studio Code

Fitur-fitur yang disediakan oleh Visual Studio Code antara lain adalah fitur pengetesan kode
(debugging) , penyorotan sintaks (syntax highlighting), penyelesaian kode cerdas (intelligent
code completion) atau yang disebut dengan Intellisense, snippets, fitur pemfaktoran ulang
kode (code refactoring), dan Git client yang sudah terpasang secara otomatis.
Visual Studio Code dapat digunakan langsung tanpa perlu ekstensi selama bahasa
pemrogramannya sudah didukung langsung. Namun ada beberapa fitur yang perlu
ditingkatkan sesuai dengan kebutuhan pengembang aplikasi.

Disinilah kegunaan ekstensi untuk membuat Visual Studio Code lebih powerful
dibandingkan editor kode yang lain.

Kelebihan Visual Studio Code

Ekstensi yang lengkap

Visual Studio Code menyediakan banyak sekali ekstensi yang dapat di download secara
gratis. Selain itu, ekstensi pada Visual Studio Code juga mudah dikelola.

Integrated Terminal

Dengan adanya Integrated Terminal, proses pengembangan aplikasi dapat menjadi lebih
mudah karena kita tidak perlu membuka terminal terpisah ketika ingin mengeksekusi

Visual Studio Code Untuk Pemula 2

 sebuah skrip.

Terintegrasi dengan Git/Github

Visual Studio Code juga telah terintegrasi dengan Git atau Guthub sehingga apabila kita
ingin menambahkan kodingan kita ke dalam reposity github, kita dapat melakukannya
dengan sangat mudah.

Color Theme

Visual Studio Code juga menyediakan berbagai macam tema warna yang cukup
bervariasi untuk memodifikasi tampilan Visual Studio Code sesuai dengan keinginan
kita. Kita akan membahas bagaimana cara mengubah tema dari Visual Studio Code.

Instalasi Visual Studio Code

Untuk memasang Visual Studio Code, kalian perlu mengunjungi situs official-nya, yang
dapat diakses pada tautan code.visualstudio.com

Visual Studio Code Untuk Pemula 3

 Setelah itu, pilih sistem operasi sesuai dengan yang kalian punya. Kalian juga dapat klik
tombol panah kebawah untuk memilih versi sistem operasi yang lain.
Jika sudah, maka kalian dapat buka installernya dan secara otomatis Visual Studio Code akan
terpasang di komputer kalian.

Tampilan Antarmuka
Berikut ini merupakan tampilan antarmuka setelah kalian memasang Visual Studio Code.

Visual Studio Code Untuk Pemula 4

 Seperti banyak editor kode lainnya, Visual Studio Code memiliki antarmuka yang mudah
untuk digunakan. Bagian antarmuka yang dapat diakses pengguna antara lain adalah action
bar dan file explorer di sebelah kiri yang menampilkan semua file dan folder yang dapat
kamu akses, dan editor di sebelah kanan, menampilkan file yang telah kamu buka.
Beberapa komponen yang dapat kamu akses pada Visual Studio Code antara lain:

a. Editor
Area utama untuk mengedit file kalian. Kalian dapat membuka editor sebanyak yang
kalian suka secara berdampingan secara vertikal dan horizontal.

b. Side Bar
Berisi beberapa tampilan seperti Explorer untuk membantu kalian saat mengerjakan
project.

c. Status Bar
Informasi tentang project yang dibuka dan file yang kalian edit.

d. Activity Bar
Terletak di sisi paling kiri, ini memungkinkan kalian beralih di antara tampilan dan
memberikan indikator khusus konteks tambahan, seperti jumlah perubahan file atau
folder saat Git diaktifkan.

Visual Studio Code Untuk Pemula 5

 e. Panel
Kamu dapat menampilkan panel yang berbeda di bawah wilayah editor untuk output atau
informasi debug, error dan warning, atau terminal terintegrasi. Panel juga dapat
dipindahkan ke kanan untuk ruang yang lebih besar.

Command Palette
Command Palette merupakan salah satu fitur yang paling powerful dan mudah untuk
digunakan developer. Lewat Command Palette, kalian dapat mengakses semua fitur yang
tersedia pada Visual Studio Code, dengan hanya mengetikan fitur tersebut.

Untuk membuka fitur ini, kalian dapat menekan tombol Ctrl+Shift+P atau ⇧⌘P jika kalian
menggunakan sistem operasi macOS

Kalian juga dapat menekan tombol Ctrl+P atau ⌘P jika kalian hanya ingin membuka file
yang berada dalam project kalian.

Visual Studio Code Untuk Pemula 6

 Untuk fitur yang lebih lengkap, kamu dapat mengetikan ? pada Command Palette.

Auto Completion & Emmet

Auto Completion adalah salah satu fitur Visual Studio Code bawaan yang sangat membantu
kita sebagai developer untuk menulis kode. Dengan fitur ini, kita tidak perlu mengingat-ingat
kode yang akan kita ketikkan, karena biasanya sudah disediakan oleh Visual Studio Code.
Fitur Auto Completion ini pun dapat ditambahkan dengan menggunakan ekstensi sesuai
dengan bahasa atau framework yang digunakan, misalnya Dart, Flutter, Laravel atau PHP.

Visual Studio Code Untuk Pemula 7

 Selain Auto Completion, fitur yang tidak kalah membantu di Visual Studio Code adalah
Emmet. Sebelumnya, Emmet merupakan sebuah ektensi yang dapat dipasang di Code Editor
seperti Sublime Text, Atom, dan yang lainnya.

Tetapi pada Visual Studio Code, fitur ini sudah disematkan secara langsung. Untuk
menggunakannya, kalian tinggal ketikkan nama tag HTML yang ingin digunakan, maka
dialog Auto Completion akan langsung muncul.

Kalian pun dapat menekan tombol Tab untuk memunculkan tag dari Emmet.

Ekstensi
Seperti namanya, ekstensi adalah satu fitur yang dapat kamu gunakan untuk membuat Visual
Studio Code kalian semakin mudah dan semakin banyak fiturnya.

Untuk mencari ekstensi, cukup ketikkan nama ekstensi di kotak pencarian. Kalian pun dapat
melihat rekomendasi ekstensi pada menu Recommended.

Visual Studio Code Untuk Pemula 8

 Pada contoh dibawah ini, saya memasang salah satu ekstensi untuk menambahkan fitur git
yang lebih lengkap dibandingkan bawaan, yaitu GitLens.
Untuk memasangnya pun cukup mudah, tinggal klik Install pada halaman tersebut, dan jika
sudah terpasang maka akan muncul tampilan seperti dibawah in.

Visual Studio Code Untuk Pemula 9

 Berikut ini beberapa rekomendasi ekstensi yang paling sering saya pakai:

a. Git Lens
Menambah fitur Git pada code editor

b. PHP Intelephense
Agar code editor dapat membaca coding PHP secara lebih cerdas

c. Bracket Lens
Agar kita dapat mengetahui tutup sebuah tag / code

d. Git Graph
Melihat history git dalam bentuk grafik (seperti SourceTree)

e. Github Copilot
Sebuah AI yang membantu kita dalam coding

f. PHP Docblocker
Membuat dokumentasi PHP lebih mudah

g. Prettier
Agar coding kita tidak berantakan

h. Remote Development
Agar kita dapat melakukan coding dari server manapun

i. SonarLint
Informasi tentang kesalahan atau optimalisasi coding langsung di editor

Visual Studio Code Untuk Pemula 10

 j. Vetur
Plugin untuk membuat pengalaman koding VueJS dan NuxtJS semakin baik

Tentunya kebutuhan ekstensi kalian akan berbeda dengan saya dan menyesuaikan dengan
workflow yang kalian biasa lakukan.

Tema
Salah satu kelebihan dari Visual Studio Code adalah, kita dapat mengkustomsasi tampilan
dari editor kode kita. Mungkin kamu melihat tampilan pada screenshot di bawah ini agar
berbeda dari yang kalian pasang. Betul sekali! Saya sendiri sudah mengkustomisasi dari
tampilan editor kode saya.

Untuk mengubahnya, tinggal tekan Ctrl+Shift+P dan ketikkan theme . Sebelumnya, jangan
lupa untuk memasang tema di menu Ekstensi.

Berikut dibawah ini beberapa tampilan yang bisa kalian pakai, tentunya ini membuat
pengalaman kita untuk coding semakin menarik dan membuat coding kita semangat!

Visual Studio Code Untuk Pemula 11

 Terminal
Tentunya sebagai developer, menggunakan terminal menjadi suatu keharusan dan menjadi
skill wajib untuk menjadi seorang developer. Tentunya, Visual Studio code juga sudah
menyiapkan ini.

Cara membukanya cukup mudah, kalian bisa drag bar dari bawah, atau bisa lewat shortcut
Ctrl+Shift+P dan ketikkan terminal .

Kalian pun dapat memilih profil code kalian, jika kalian menggunakan lebih dari satu shell.

Workspace
Project kalian terlalu banyak, atau lebih dari satu folder? Workspace ini bisa menjadi solusi
untuk kalian. Kalian dapat menambahkan lebih dari satu project dalam window editor yang

Visual Studio Code Untuk Pemula 12

 sama. Dan tentunya kalian pun dapat menyimpan Workspace, jadi kedepannya kalian tidak
perlu repot-repot untuk mengatur folder berkali-kali.
Untuk mengaksesnya, kalian bisa membuka menu File dan pilih Add Folder to Workspace.

Pengaturan

Visual Studio Code Untuk Pemula 13

 Tentunya, setiap hal-hal yang ada di Visual Studio Code dapat kita atur. Mulai dari ukuran
font, jenis font yang dipakai, behaviour code editor kita, dan masih banyak lagi.

Untuk mengubah konfigurasi dari editor kode kita, kita dapat menggunakan tampilan GUI
seperti dibawah ini untuk memudahkan kita:

Visual Studio Code Untuk Pemula 14

 Atau dapat menggunakan coding (jika kalian merasa tampilan kurang menantang). Tenang
saja, semua konfigurasi ini juga bisa kalian ketikkan dan secara otomatis autocomplete akan
berjalan.

Visual Studio Code Untuk Pemula 15

 Penutup
Visual Studio Code merupakan editor kode yang banyak digunakan developer karena
kemudahan dan fitur-fiturnya yang banyak. Saya pribadi pun menggunakan Visual Studio
Code untuk semua project yang saya kerjakan.

Untuk kamu yang tertarik lebih lanjut dengan Visual Studio Code, saya akan membuat eBook
Premium berjudul "Menguasai Visual Studio Code untuk Developer" yang dapat kamu
dapatkan informasinya lebih lanjut di Instagram @buildwithangga .
Jadi jangan lupa follow dan ikuti terus informasinya ya!

Untuk teman-teman yang tertarik untuk membuat aplikasi yang tentunya dapat kalian
gunakan untuk membuat project, kalian dapat mengikuti rekomendasi
kelas Premium dibawah ini, tentunya dengan studi kasus yang lengkap!

Full-Stack Web Developer: Travel

Full-Stack Web Developer: Toko Online

Full-Stack Laravel Flutter: E-Commerce App

Full-Stack Golang Vue NuxtJS: Website Crowdfunding

Full-Stack Website Developer: PHP Laravel dan Vue JS

Backend for Designer

Full-Stack FoodMarket Apps dengan Backend Laravel

Kotlin

React Native

Tentunya, semua kelas diatas yang saya ajarkan menggunakan Visual Studio Code, tentunya
dengan tips dan trik sesuai dengan project yang digunakan.

Selamat Belajar! :)

Visual Studio Code Untuk Pemula 16