Cara Mudah Menginstall Dan Menggunakan GIT Pada Visual Studio Code

Pada kesempatan kali ini saya akan memberikan tutorial bagaimana Cara Mudah Menginstall Dan Menggunakan GIT Pada Visual Studio Code. Visual Studio Code adalah code editor yang memiliki banyak fitur salah satunya bisa dapat langsung terintegrasi dengan GIT. 

Dengan menggunakan Visual Studio Code kita dapat mengontrol repository yang kita miliki dengan 2 cara yaitu menggunakan perintah di Terminal VS Code atau langsung menggunakan fitur Source Control yang disediakan oleh VS Code tanpa harus mengetikan perintah di terminal.

Menurut saya fitur Source Control tersebut cukup membantu sekali, karna hampir semua perintah yang umum di gunakan pada GIT bisa langsung kita gunakan tanpa harus mengetikan perintah diterminal berulang kali. Jadi bagi anda yang pertama kali menggunakan GIT dan kesulitan dalam menggunakan GIT dapat mengikuti tutorial yang saya berikan berikut ini.

Tools Yang Dibutuhkan Dalam Menggunakan GIT

Dalam menggunakan GIT tentu saja kita membutuhkan perangkat lunak GIT dan Git provider, yaitu :

1. Text Editor (Visual Studio Code)
2. Software Tools GIT
3. Media Penyimpanan Respository GIT (Github)

Langkah-langkah Menginstall Dan Menggunakan GIT

Sebelum melangkah ke bagian tutorial disini saya akan menguraikannya menjadi beberapa bagian, yaitu : 

I. Installasi GIT Source Control
II. Konfigurasi GIT Pada Visual Studio Code
III. Melakukan Aktivitas Operasi GIT

Cara Mudah Menginstall Dan Menggunakan GIT Pada Visual Studio Code

I. Installasi GIT Source Control

1. Pertama anda bisa mengunduh Software Tools GIT pada link berikut https://git-scm.com/downloads

Cara Mudah Menginstall Dan Menggunakan GIT Pada Visual Studio Code

2. Unduh Software Tools GIT dengan cara memilih GIT sesuai dengan sistem operasi yang digunakan. Terdapat Mac OS, Windows dan Linux/Unix.

Cara Mudah Menginstall Dan Menggunakan GIT Pada Visual Studio Code

3. Setelah berhasil terdownload, silahkan Install.

Cara Mudah Menginstall Dan Menggunakan GIT Pada Visual Studio Code

4. Baca terlebih dahulu beberapa informasi penting mengenai GIT. Jika sudah selesai Klik Next.

Cara Mudah Menginstall Dan Menggunakan GIT Pada Visual Studio Code

5. Pilih direktori yang diinginkan. Jika sudah selesai, Klik Next.

Cara Mudah Menginstall Dan Menggunakan GIT Pada Visual Studio Code

6. Selanjutnya pilih beberapa Additional Components yang dibutuhkan. Seperti membuat icon GIT di dekstop dan yang lainnya. Jika sudah, Klik Next.

Cara Mudah Menginstall Dan Menggunakan GIT Pada Visual Studio Code

7. Selanjutnya pilih Start Menu Folder. Jika sudah, Klik Next.

Cara Mudah Menginstall Dan Menggunakan GIT Pada Visual Studio Code

8. Pada bagian memilih Default Editor yang akan digunakan oleh GIT, pilih Use Visual Studio Code as Git’s default editor. Jika sudah selesai, Klik Next.

Cara Mudah Menginstall Dan Menggunakan GIT Pada Visual Studio Code

9. Selanjutnya pilih PATH environment. Terdapat 3 pilihan:

  • Use Git from gith bash
  • Git from the command line and also from 3rd-party software
  • Use Git and optional Unix tools from the Command Promt

Sangat dianjurkan untuk menggunakan Git from the command line and also from 3rd-party software dan Klik Next.

Cara Mudah Menginstall Dan Menggunakan GIT Pada Visual Studio Code

10. Selanjutnya pilih HTTPS transport backend. Terdapat:

  • Use the OpenSSL library
  • Use the native windows Secure Channel library

Anda dapat menggunakan pilihan yang pertama dan Klik Next.

Cara Mudah Menginstall Dan Menggunakan GIT Pada Visual Studio Code

11. Selanjutnya pilih konversi Line ending. Pilih Checkout windows-style, commit Unix-style line endings. Kemudian Klik Next.

Cara Mudah Menginstall Dan Menggunakan GIT Pada Visual Studio Code

12. Selanjutnya pilih emulator terminar. Pilih Use Windows’ default console windows. Kemudian Klik Next.

Cara Mudah Menginstall Dan Menggunakan GIT Pada Visual Studio Code

13. Pilih Default sebagai cara yang akan digunakan untuk Git Pull. Kemudian Klik Next.

Cara Mudah Menginstall Dan Menggunakan GIT Pada Visual Studio Code

14. Pada bagian Credential helper, pilih Git Credential Manager. Kemudian Klik Next.

Cara Mudah Menginstall Dan Menggunakan GIT Pada Visual Studio Code

15. Pada konfigurasi ekstra, dapat memilih beberapa fitur yang disediakan. Jika sudah, Klik Next.

Cara Mudah Menginstall Dan Menggunakan GIT Pada Visual Studio Code

16. Pada bagian ini, Anda dapat meng-enable untuk membantu pseudo consoles. Jika sudah memilih, Klik Install dan tunggu sampai proses instal berhasil.

Cara Mudah Menginstall Dan Menggunakan GIT Pada Visual Studio Code

17. Maka GIT sudah terpasang di perangkat.

Cara Mudah Menginstall Dan Menggunakan GIT Pada Visual Studio Code

II. Konfigurasi GIT Pada Visual Studio Code

1. Saya harap anda telah memiliki dan menginstall Text Editor Visual Studio Code, sehingga bisa langsung membuka aplikasi Visual Studio Code.

Cara Mudah Menginstall Dan Menggunakan GIT Pada Visual Studio Code

2. Pada bagian Source Control, anda bisa memilih membuka folder yang berisi git repositori atau clone repositori. Sebagai contoh disini saya akan memilih Git provider dari GitHub, kalian juga bisa memilih Git provider lain seperti GitLab atau Bitbucket.

Cara Mudah Menginstall Dan Menggunakan GIT Pada Visual Studio Code

3. Klik Clone Repository untuk melakukan cloning dari GitHub. Selanjutnya untuk melakukan cloning anda diharuskan memberikan url repositori atau memilih sumber repositori.

Cara Mudah Menginstall Dan Menggunakan GIT Pada Visual Studio Code

4. Untuk mendapat url clone dari GitHub anda harus membuat repository baru di GitHub dengan Klik New.

Cara Mudah Menginstall Dan Menggunakan GIT Pada Visual Studio Code

5. Langkah selanjutnya, anda bisa memberikan nama repository, sebagai contoh saya membuat nama repository dengan judul Belajar-GIT, setelah itu Klik Create repository.

Cara Mudah Menginstall Dan Menggunakan GIT Pada Visual Studio Code

6. Setelah itu muncul tampilan Url Clone dari Github berupa HTTPS/SSH dan Klik Copy.

Cara Mudah Menginstall Dan Menggunakan GIT Pada Visual Studio Code

7. Setelah anda membuat repository di GitHub, anda bisa Masukkan url clone dari GitHub kedalam kolom Command Palette dengan cara Klik View > Command Palette atau Ctrl + Shift + P, kemudian pastekan url clone dan tekan Enter.

Cara Mudah Menginstall Dan Menggunakan GIT Pada Visual Studio Code

8. Setelah itu Pilih lokasi repositori. Sebagai contoh disini saya akan meletakan repositori Belajar-GIT kedalam sebuah baru folder baru dengan nama X-Project, lalu Klik Select Repository Location.

Cara Mudah Menginstall Dan Menggunakan GIT Pada Visual Studio Code

9. Tunggu proses Clone sampai selesai. Jika sudah Klik Open untuk membuka langsung dari jendela yang sama atau Open in New Windows untuk membuka hasil Clone di jendela baru Visual Studio Code.

Cara Mudah Menginstall Dan Menggunakan GIT Pada Visual Studio Code

10. Setelah itu anda akan berhasil melakukan konfigurasi untuk menghubungkan Visual Studio Code dan GitHub.

Cara Mudah Menginstall Dan Menggunakan GIT Pada Visual Studio Code

III. Melakukan Aktivitas Operasi GIT

A. Membuat New File

1. Masih di Teks Editor Visual Studio Code.

Cara Mudah Menginstall Dan Menggunakan GIT Pada Visual Studio Code

2. Pada bagian Explorer, maka akan terlihat nama repositori yang dihubungkan dengan Visual Studio Code.

Cara Mudah Menginstall Dan Menggunakan GIT Pada Visual Studio Code

3. Untuk memulai aktivitas di Visual Studio Code yang telah terhubung dengan GitHub. Klik New File.

Cara Mudah Menginstall Dan Menggunakan GIT Pada Visual Studio Code

4. Langkah pertama anda bisa menambahkan file .gitignore. Fungsi dari .gitignore adalah mengabaikan beberapa file dan direktori. Silahkan buat file .gitignorelalu isi dengan nama file atau direktori yang ingin diabaikan oleh Git. Jika tidak, kosongkan saja, bisa di isi nanti bila di butuhkan.

Cara Mudah Menginstall Dan Menggunakan GIT Pada Visual Studio Code

5. Selanjutnya anda bisa membuat file lagi dengan Klik New File. Sebagai contoh saya memberikan nama html. Setelah selesai, maka simpan dengan cara Ctrl+S atau Klik menu File > Save. Perhatikan tampilan di bawah, terdapat simbol yang artinya Untracked adalah file yang belum pernah dimasukkan ke dalam Git (file baru).

Cara Mudah Menginstall Dan Menggunakan GIT Pada Visual Studio Code

6. Maka pada Source Control akan terdapat 2 Pending Changes atau perubahan yang belum di Commit.

Cara Mudah Menginstall Dan Menggunakan GIT Pada Visual Studio Code

7. Selanjutnya jika anda baru pertama kali menghubungkan Visual Studio Code dengan GitHub, maka dapat melakukan konfirgurasi username dan email, dengan membuka terminal, sebagai contoh ketikan perintah :

  • Username : git config --global user.name "usernamegithub"
  • Email : git config --global user.email emailgithub@gmail.com

Cara Mudah Menginstall Dan Menggunakan GIT Pada Visual Studio Code

8. Setelah itu perhatikan menu yang ada terdapat 3 buah icon, 1. Open File, 2. Discard Changes, 3. Stage Change. Silahkan pilih Stage Change dengan Klik Icon Plus (+).

Cara Mudah Menginstall Dan Menggunakan GIT Pada Visual Studio Code

9. Perhatikan tampilan di bawah, terdapat simbol yang artinya Added adalah file yang ditambahkan ke dalam Mode Staged

Cara Mudah Menginstall Dan Menggunakan GIT Pada Visual Studio Code

10. Selanjutnya anda dapat memberikan Message untuk melakukan Commit Lalu Klik Icon Ceklist.

Cara Mudah Menginstall Dan Menggunakan GIT Pada Visual Studio Code

11. Langkah selanjutnya Klik Icon 3 titik. Terdapat banyak sekali perintah yang bisa digunakan. Seperti Pull, Push, Sync dan masih banyak yang lain. Anda dapat mengaksesnya dengan cara Klik Source Control > View and More Actions.

Cara Mudah Menginstall Dan Menggunakan GIT Pada Visual Studio Code

12. Selanjutnya untuk mengirimkan perubahan ke master branch dari Remote Repository yang berhubungan dengan direktori Lokal, dapat menggunakan Push.

Cara Mudah Menginstall Dan Menggunakan GIT Pada Visual Studio Code

13. Selanjutnya anda dapat mengecek apakah hasil push sudah berhasil atau tidak di GitHub. Setelah di cek ternyata File Html berhasil ter Push di Github seperti tampilan dibawah ini.

Cara Mudah Menginstall Dan Menggunakan GIT Pada Visual Studio Code

B. Menambahkan New File

1. Selanjutnya anda bisa menambahkan file lagi dengan Klik New File. Sebagai contoh saya memberikan nama html.

Cara Mudah Menginstall Dan Menggunakan GIT Pada Visual Studio Code

2. Lalu Isikan Code didalamanya. Jika sudah selesai, maka simpan dengan cara Ctrl+S atau Klik menu File > Save.

Cara Mudah Menginstall Dan Menggunakan GIT Pada Visual Studio Code

3. Setelah itu Klik Icon Plus (+) Stage Change.

Cara Mudah Menginstall Dan Menggunakan GIT Pada Visual Studio Code

4. Berikan Message untuk melakukan Commit dan Klik Icon Ceklist untuk melakukan Commit.

Cara Mudah Menginstall Dan Menggunakan GIT Pada Visual Studio Code

5. Selanjutnya untuk mengirimkan perubahan ke master branch dari Remote Repository yang berhubungan dengan direktori Lokal, dapat menggunakan Push.

Cara Mudah Menginstall Dan Menggunakan GIT Pada Visual Studio Code

6. Setelah itu mengecek apakah hasil push sudah berhasil atau tidak di GitHub. Dan ternyata Html berhasil ter Push ke GitHub.

Cara Mudah Menginstall Dan Menggunakan GIT Pada Visual Studio Code

C. Merubah Isi File

1. Selanjutnya Klik File yang ingin anda ubah isi codingannya. Sebagai contoh saya ingin merubah isi codingan file html.

Cara Mudah Menginstall Dan Menggunakan GIT Pada Visual Studio Code

2. Lalu ubah isi Code didalamanya. Jika sudah selesai, maka simpan dengan cara Ctrl+S atau Klik menu File > Save.

Cara Mudah Menginstall Dan Menggunakan GIT Pada Visual Studio Code

3. Pergi ke Source Control. Terdapat simbol yang artinya Modified adalah file yang sudah dimasukkan ke dalam database Git dan sudah pernah dimodifikasi.

Cara Mudah Menginstall Dan Menggunakan GIT Pada Visual Studio Code

4. Untuk melihat perubahan yang terjadi anda hanya perlu mengKlik file tersebut.

Cara Mudah Menginstall Dan Menggunakan GIT Pada Visual Studio Code

5. Setelah itu Klik Icon Plus (+) Stage Change.

Cara Mudah Menginstall Dan Menggunakan GIT Pada Visual Studio Code

6. Berikan pesan untuk melakukan Commit dan Klik Icon Ceklist untuk melakukan Commit.

Cara Mudah Menginstall Dan Menggunakan GIT Pada Visual Studio Code

7. Selanjutnya untuk mengirimkan perubahan ke master branch dari Remote Repository yang berhubungan dengan direktori Lokal, dapat menggunakan Push.

Cara Mudah Menginstall Dan Menggunakan GIT Pada Visual Studio Code

8. Setelah itu mengecek apakah hasil Push sudah berhasil atau tidak di GitHub. Dan ternyata Html berhasil ter Push ke GitHub.

Cara Mudah Menginstall Dan Menggunakan GIT Pada Visual Studio Code

D. Menghapus File

1. Klik kanan pada file yang ingin anda hapus. Sebagai contoh saya ingin menghapus file Html, lalu pilih Delete.

Cara Mudah Menginstall Dan Menggunakan GIT Pada Visual Studio Code

2. Lalu pergi ke Source Control. Perhatikan tampilan di bawah, terdapat simbol yang artinya Deleted adalah file yang dihapus.

Cara Mudah Menginstall Dan Menggunakan GIT Pada Visual Studio Code

3. Setelah itu perhatikan menu yang ada terdapat 3 buah icon, 1. Open File, 2. Discard Changes, 3. Stage Change. Setelah yakin ingin menghapus silahkan pilih Stage Change dengan Klik Icon Plus (+).

Cara Mudah Menginstall Dan Menggunakan GIT Pada Visual Studio Code

4. Kemudian berikan pesan untuk melakukan Commit dan Klik Icon Ceklist untuk melakukan Commit.

Cara Mudah Menginstall Dan Menggunakan GIT Pada Visual Studio Code

5. Selanjutnya untuk mengirimkan perubahan ke master branch dari Remote Repository yang berhubungan dengan direktori Lokal, dapat menggunakan Push.

Cara Mudah Menginstall Dan Menggunakan GIT Pada Visual Studio Code

6. Setelah itu mengecek apakah hasil Push sudah berhasil atau tidak di GitHub. Dan ternyata Html berhasil ter Hapus di GitHub.

Cara Mudah Menginstall Dan Menggunakan GIT Pada Visual Studio Code

E. Membuat Branch

1. Selanjutnya untuk membuat dan menggunakan branch dengan cara, Klik View > Command Palette atau Ctrl + Shift + P, Lalu ketikkan ke pencarian Git: Create Branch.

Cara Mudah Menginstall Dan Menggunakan GIT Pada Visual Studio Code

2. Setelah itu berikan nama branch. Sebagai contoh saya memberikan nama branch-one. Maka anda akan dapat berkerja dalam satu branch tanpa harus takut mengubah master branch.

Cara Mudah Menginstall Dan Menggunakan GIT Pada Visual Studio Code

3. Jika anda melakukan perubahan pada file dan ingin melakukan merge antara satu branch dengan master branch, dapat dilakukan dengan cara Klik View > Command Palette atau Ctrl + Shift + P lalu pilih Git: Merge Branch.

Cara Mudah Menginstall Dan Menggunakan GIT Pada Visual Studio Code

4. Selanjutnya pilih branch yang akan dilakukan penggabungan. Contohnya disini akan melakukan penggubungan antara branch-one dengan master.

Cara Mudah Menginstall Dan Menggunakan GIT Pada Visual Studio Code

5. Anda dapat melakukan Compare and pull request untuk melakukan merge dengan branch lain melalui GitHub atau GIT Provider lainnya (jika menggunakan GIT Provider lain).

Cara Mudah Menginstall Dan Menggunakan GIT Pada Visual Studio Code

6. Selanjutnya Klik Create pull request.

Cara Mudah Menginstall Dan Menggunakan GIT Pada Visual Studio Code

7. Selanjutnya Klik Merge pull request dan confirm merge request untuk melakukan penggabungan antara branch.

Cara Mudah Menginstall Dan Menggunakan GIT Pada Visual Studio Code

8. Setelah itu lakukan Confirmasi merge.

Cara Mudah Menginstall Dan Menggunakan GIT Pada Visual Studio Code

9. Maka permintaan untuk penggabungan branch sudah berhasil. Branch dan merge sangat cocok digunakan untuk pengerjaan proyek yang dilakukan oleh beberapa orang.

Cara Mudah Menginstall Dan Menggunakan GIT Pada Visual Studio Code

10. Setelah itu, proses penggabungan branch berhasil dilakukan

Kesimpulan

Dengan menggunakan fitur Source Control pada Visual Studio Code untuk GIT Control, tentu sangat membantu tanpa harus mengetikkan perintah GIT secara manual melalui Terminal. Tools yang memudahkan seperti ini banyak digunakan oleh Developer karena sangat membantu produktivitas mereka dengan cara sedikit menghemat waktu dan fokus pada project yang di kerjakan.

Penutup

Itulah tutorial bagaimana Cara Mudah Menginstall Dan Menggunakan GIT Pada Visual Studio Code. Sebenarnya masih banyak lagi fungsi yang belum kita coba, selebihnya silahkan anda melakukan eksperimen sendiri. Semoga informasinya bermanfaat dan sampai jumpa.