Mengelola repositori GitHub untuk pengembangan JavaScript di Visual Studio Code

Visual Studio Code menyediakan integrasi Git dan GitHub yang komprehensif untuk pengembang JavaScript. Panduan ini menunjukkan kepada Anda cara mengelola repositori GitHub langsung dari lingkungan pengembangan Anda, menyederhanakan alur kerja Anda dari pembuatan kode ke penyebaran.

Anda akan belajar membuka repositori yang ada, menginisialisasi proyek baru, membuat cabang fitur, menerapkan perubahan, dan mendorong ke GitHub—semua tanpa meninggalkan Visual Studio Code. Panduan ini mencakup beberapa pendekatan untuk setiap tugas, termasuk bilah aktivitas, palet perintah, bilah status, dan terminal terintegrasi, sehingga Anda dapat memilih metode yang paling sesuai untuk gaya pengembangan Anda.

Prasyarat

• Git terinstal di komputer lokal Anda
• Visual Studio Kode diinstal
• Akun GitHub

Buka repositori jarak jauh Anda

Buka repositori jarak jauh Anda di komputer lokal Anda.

Bilah aktivitas

1. Menginstal ekstensi repositori jarak jauh
2. Pilih indikator jarak jauh di kiri bawah Visual Studio Code.
3. Ikuti petunjuk.

Bilah status

Tindakan ini tidak tersedia melalui fitur ini. Pilih tab lain.

Palet perintah

1. Buka palet perintah dengan kombinasi kunci dari Ctrl + Shift + P.
2. Pada prompt palet perintah, masukkan , pilih gitcl, lalu pilih Kloning dari GitHub dan tekan Enter.
3. Saat diminta URL Repositori, pilih klon dari GitHub, lalu tekan Enter.
4. Jika Anda diminta untuk masuk ke GitHub, selesaikan proses masuk.
5. Masukkan azure-samples/js-e2e-express-server di bidang URL Repositori.
6. Pilih (atau buat) direktori lokal tempat Anda ingin mengkloning proyek lalu pilih Pilih sebagai Tujuan Repositori.
7. Saat Anda menerima pemberitahuan yang menanyakan apakah Anda ingin membuka repositori yang diklon, pilih Buka.

Terminal terintegrasi

1. Buka terminal terintegrasi dari Terminal -> Terminal Baru.

2. Klon repositori Anda dengan perintah git berikut:

   git clone https://github.com/<ACCOUNT>/<REPOSITORY>
   

3. Buka di Visual Studio Code:

   code <REPOSITORY>
   

Visual Studio Code menggunakan autentikasi Git yang disediakan oleh sistem operasi (seperti macOS KeyChain atau pengelola Kredensial Windows) dengan fungsionalitas git apa pun. Keluaran dapat dilihat di Command Palette > Git: Tampilkan Keluaran Git.

Menghubungkan ke Domain GitHub Kustom

Secara default, Visual Studio Code mengasumsikan repositori Anda dihosting di github.com. Jika Anda perlu terhubung ke repositori di domain yang berbeda (misalnya, GitHub perusahaan seperti github.<company_name>.com), Anda harus mengonfigurasi jalur Git Anda.

Untuk memperbarui jalur Git di Visual Studio Code, buka Pengaturan → Preferensi → File dan cari Git: Path. Pengaturan ini memungkinkan Anda menentukan jalur absolut ke Git executable yang berfungsi dengan domain GitHub kustom Anda.

Atau, Anda dapat menambahkan atau memperbarui pengaturan git.path langsung dalam file settings.json Anda untuk memastikan Visual Studio Code menggunakan biner Git yang benar untuk semua operasi repositori.

Buka repositori lokal Anda

Jika Anda memiliki repositori yang ada di komputer lokal Anda dan ingin membukanya di Visual Studio Code, cukup buka folder . Visual Studio Code mengenali subfolder .git dan menampilkan informasi yang relevan.

Bilah aktivitas

1. Pilih Ctrl + K + O.
2. Pilih folder.

Bilah status

Tindakan ini tidak tersedia melalui fitur ini. Pilih tab lain.

Palet perintah

1. Buka palet perintah dengan kombinasi kunci dari Ctrl + Shift + P.
2. Filter dengan Git, lalu pilih Open repository.
3. Pilih folder untuk dipilih sebagai akar repositori.

Terminal terintegrasi

1. Buka terminal terintegrasi dari Terminal -> Terminal Baru.

2. Buka instans baru Visual Studio Code untuk direktori repositori:

   code ../dir1/dir2/my-repo
   

Menginisialisasi repositori baru

Gunakan prosedur berikut untuk membuat repositori kode sumber lokal dengan git.

Bilah aktivitas

1. Pilih kontrol sumber dari bilah aktivitas, atau gunakan kombinasi kunci Ctrl + Shift + G.

2. Pilih Inisialisasi repositori.

   

Bilah status

Tindakan ini tidak tersedia melalui fitur ini. Pilih tab lain.

Palet perintah

1. Buka palet perintah dengan kombinasi kunci dari Ctrl + Shift + P.
2. Filter dengan Git, lalu pilih Initialize repository.
3. Pilih folder untuk dipilih sebagai akar repositori.

Terminal terintegrasi

1. Buka terminal terintegrasi dari Terminal -> Terminal Baru.

2. Inisialisasi folder Anda dengan git dengan perintah git berikut:

   git init
   

Setelah repositori diinisialisasi, buat repositori di GitHub. Kemudian tambahkan repositori tersebut sebagai jarak jauh ke proyek lokal Anda dari palet Perintah: cari Git: Add remote.

Buat cabang untuk perubahan

Buat cabang baru untuk menangkap perubahan dan mengisolasi dari cabang utama atau default.

Bilah aktivitas

1. Pilih kontrol sumber dari bilah aktivitas.
2. Pilih elipsis (...) di samping Kontrol Sumber Daya.
3. Pilih Cabang ->Buat Cabang.

Bilah status

1. Pilih nama cabang di bilah status. Langkah Ini membuka palet perintah.

   Bilah status ditemukan di bagian bawah Visual Studio Code.

2. Di palet perintah, pilih +Buat cabang baru.

3. Masukkan nama cabang baru Anda.

4. Masukkan nama cabang baru. Nama cabang terlihat di bilah status.

   

Palet perintah

1. Buka palet perintah dengan kombinasi kunci dari Ctrl + Shift + P.

2. Cari git branch dan pilih Git: Create Branch.

   

3. Masukkan nama cabang baru, seperti test.

4. Nama cabang terlihat di bilah status.

   

Terminal terintegrasi

1. Buka terminal terintegrasi dari Terminal -> Terminal Baru.

2. Buat cabang baru bernama MY-BRANCH dengan perintah git berikut:

   git checkout -b MY-BRANCH
   

Melakukan perubahan secara lokal

Setelah Anda membuat perubahan pada file di cabang Anda, terapkan perubahan.

Bilah aktivitas

1. Pilih kontrol sumber dari bilah aktivitas.

2. Masukkan pesan penerapan Anda, lalu pilih Terapkan.

   

Bilah status

Tindakan ini tidak tersedia melalui fitur ini. Pilih tab lain.

Palet perintah

1. Buka palet perintah dengan kombinasi kunci dari Ctrl + Shift + P.
2. Di palet perintah, filter dengan Git kemudian pilih Commit.
3. Masukkan pesan komit Anda, lalu tekan Enter.

Terminal terintegrasi

1. Buka terminal terintegrasi dari Terminal -> Terminal Baru.

2. Buat cabang baru bernama MY-BRANCH dengan perintah git berikut:

   git commit -m "YOUR COMMIT MESSAGE"
   

Dorong cabang lokal ke GitHub

Bilah aktivitas

1. Pilih ikon Kontrol Sumber dari bilah aktivitas.
2. Pilih Terbitkan Cabang. Jika repositori tidak ada di GitHub, repositori akan dibuat untuk Anda.

Bilah status

1. Pada bilah status Visual Studio Code, pilih ikon push di sebelah kanan nama cabang.

   

2. Pilih nama remote dari kotak pop-up. Jika Anda hanya memiliki satu remote, Anda tidak akan diminta untuk memilih nama remote.

Palet perintah

1. Buka palet perintah dengan kombinasi kunci dari Ctrl + Shift + P.
2. Di palet perintah, filter dengan Git kemudian pilih Push.
3. Jika Anda memiliki beberapa remote upstream, pilih salah satu nama remote lalu tekan Enter.

Terminal terintegrasi

1. Buka terminal terintegrasi dari Terminal -> Terminal Baru.

2. Buat cabang baru bernama MY-BRANCH dengan perintah git berikut:

   git push <remote-name> <branch-name>
   

Lihat output Git

Anda dapat melihat output perintah Git saat menggunakan ekstensi Kontrol sumber. Output ini membantu men-debug ketika perintah gagal.

1. Pilih ikon Kontrol Sumber dari bilah aktivitas.

2. Pilih (...) elipsis lalu pilih Show Git Output .

   

Alat Visual Studio Code untuk bekerja dengan Git dan GitHub

Bekerja di Visual Studio Code dengan repositori menggunakan alat terpisah.

Ikon	Informasi	Akses dari
	Perintah Git dalam palet perintah	F1
	Ekstensi kontrol sumber	Bar aktivitas
	Ekstensi Tarik Permintaan dan Masalah GitHub	Bar aktivitas
	Ekstensi Repositori GitHub	Anda dapat dengan cepat dan mudah membuka repositori GitHub baik dengan mencari Repositori GitHub: Buka Repositori... dari Palet Perintah, F1, atau dengan memilih Open GitHub Repository... dari indikator jarak jauh (tombol hijau di sudut kiri bawah bilah status).

Sumber daya terkait

• Cara menyebarkan aplikasi web
• Bekerja dengan GitHub di Visual Studio Code
• Menggunakan Visual Studio Code dengan penyedia kontrol versi lain