author Ahmad Muhardian

Menggunakan Git pada Visual Studio Code (Lebih praktis!)


Git Vscode

Saya suka VS Code karena di sana ada fitur untuk menggunakan Git dengan cara yang lebih praktis.

Bahkan ada yang bilang:

Hanya dalam kurang dari 15 detik, kita sudah bisa melakukan push.

Ini memang benar. Saya sudah buktikan.

Sekarang saya akan mengajak kamu mencobanya juga.

Tapi, harus paham konsep dasar Git terlebih dahulu dan sudah menginstalnya di komputer.

Untungnya saya sudah pernah menulis tutorialnya:

Setelah itu, baru kita bisa mulai menggunakan Git pada VS Code.

Pertama-tama, kita harus memiliki project yang akan dijadikan repository Git.

Ini adalah project yang akan saya jadikan repository Git di VS Code:

Project Rest API menggunakan Slim Framework

Project Rest API menggunakan Slim Framework.

Silahkan gunakan project-mu sendiri.

Membuat Repository Git di VS Code

Silahkan klik ikon Git untuk membuat repositori baru.

Membuat Repositori Git di VScode

Setelah itu, akan muncul jendela untuk menentukan lokasi inisalisasi. Langsung saja klik Initialize Repository, karena kita sedang berada di direktori project.

Membuat Repositori Git di VScode

Maka akan muncul angka pada ikon Git di bagian samping.

Langkah berikutnya menambahkan file .gitignore, karen pada project ini saya ingin mengabaikan beberapa file dan direktori.

Silahkan buat file .gitignore lalu isi dengan nama file atau direktori yang ingin diabaikan oleh Git.

Sebagai contoh:

Membuat File Gitignore

Saya mengisinya dengan vendor, karena direktori ini berisi library dari pihak ketiga yang tidak akan pernah saya ubah isinya.

Setelah itu, silahkan masuk lagi ke Git dan refresh.

Refresh repository Git

Terdapat beberapa file yang belum tersimpan ke dalam database Git.

Di bagian sampingnya terdapat simbol “U” (untracked), ini menandakan file tersebut belum dimasukkan ke Git.

Simbol Git di VS Code:

  • U artinya Untracked adalah file yang belum pernah dimasukkan ke dalam Git (file baru).
  • M artinya Modified adalah file yang sudah dimasukkan ke dalam database Git dan sudah pernah dimodifikasi.
  • D artinya Deleted adalah file yang dihapus.
  • A artinya Added adalah file yang ditambahkan ke dalam mode staged.

Menyimpan Revisi

Sekarang mari kita coba membuat commit pertama.

Lakukan staged pada file yang akan disimpan ke dalam Git.

Klik ikon plus (+).

Menambahkan File ke staged

Setelah itu tuliskan pesan commit-nya, lalu klik ikon “rumput” kalau sudah selesai.

Membuat pesan Commit

Lakukan juga untuk file-file yang lain.

Membuat Commit

Selesai.

Semua revisi sudah disimpan ke dalam Git.

Hati-hati! Jangan sampai klik ikon Discard Changes, karena dapat menghapus apa yang sudah kamu ubah.

Membatalkan Perubahan

Melihat Perbandingan Revisi

Biasanya kita menggunakan perintah git diff untuk mengetahui apa saja yang sudah diubah.

Tapi di VS Code, kita bisa lakukan dengan klik kotak marker yang berada di dekat nomer baris:

Melihat perbedaan

Atau… kita juga bisa membukanya melalui Git dengan mengklik ganda pada filenya.

Melihat perbedaan

Bekerja dengan Remote Repository

Sekarang kita ingin menyimpan repositori ini ke Github.

Bagaimana caranya?

Pertama kita harus membuat repositori di Github, lalu menambahkan remote-nya ke repositori lokal. Setelah itu tinggal push.

Mari kita lakukan.

Silahkan buat repositori baru di Github:

Membuat Repositori di Github

Lalu ambil URL-nya:

Membuat Repositori di Github

Setelah itu, buka terminal di VS Code dan ketik perintah berikut untuk menambahkan remote repositorinya:

git remote add origin [email protected]:ardianta/slim-api.git

Oya, di sini saya menggunakan SSH biar tidak memasukkan password saat push.

Silahkan baca: Cara Set-up SSH di Github

Menambahkan Remote Repositori

Setelah itu buka Git dan refresh repositorinya.

Sekarang kita punya ikon untuk melakukan push, karena repositori remote sudah ditambahkan.

Menambahkan Remote Repositori

Klik ikon tersebut untuk melakukan push ke Github.

Tunggulah beberapa saat…

Melakukan Push ke Github

Repositori sudah di-push ke Github.

Repositori di Github

Jika ada perubahan lagi, kita tinggal klik ikon Sync saja.

Repositori di Github

Gampang kan?

Akhir Kata…

Itulah cara menggunakan Git di Visual Studio Code.

Sebenarnya masih banyak yang belum kita coba, selebihnya silahkan eksperimen sendiri.

Selamat nge-git pakai VS Code.