Mulai Coding dengan Copilot AI di VSCode (Panduan Pemula)

Daftar Isi

• Pendahuluan

    • Menyamakan Persepsi
        • 1. Sudah Download Extention Copilot AI di dalam VSCode
        • 2. Sedikit Paham Tailwind CSS
        • 3. Sedikit Paham Github & Git
        • 4. Terbiasa Menggunakan VSCode

    • Yang Kalian Dapatkan Setelah Membaca
        • Keahlian Copilot AI VSCode
            • 1. Saran Kode Otomatis
            • 2. Bisa Mengubah, Membaca, Menalar Banyak File dalam 1 Proyek
            • 3. Copilot Chat
            • 4. Dukungan Model AI

        • Yang Perlu di Perhatikan Agar Bisa Tanya AI Lebih Efektif
            • 1. Punya Ide
            • 2. Bisa Riview
            • 3. Berusaha Tidak Lepas Kendali
            • 4. Anggap Sebagai Asisten Kita

    • Mulai Challenge Proyek (BuildWithAngga Online Course)
        • Perintah Awal
        • Error
        • Perbaiki Manual
        • Mulai Akses Hasil
        • Deploy Otomatis
        • Error
        • Bikin Repo
        • Push With AI
        • Improve Semantic
        • Review
        • Hasil Akhir
        • Push Lagi
        • Cek GitHub

• Kesimpulan

Pendahuluan

Di era pengembangan perangkat lunak yang serba cepat, efisiensi dan produktivitas menjadi kunci utama. Salah satu terobosan terbaru yang mendukung hal ini adalah GitHub Copilot, sebuah kecerdasan buatan (AI) yang dirancang untuk membantu programmer menulis kode dengan lebih cepat dan cerdas langsung di dalam Visual Studio Code (VSCode). Copilot AI mampu memberikan saran otomatis, menyusun fungsi secara utuh, hingga menjawab pertanyaan teknis melalui fitur percakapan, menjadikannya asisten coding yang sangat berguna terutama bagi pemula.

Panduan ini ditujukan bagi siapa saja yang baru mengenal Copilot dan ingin mengetahui cara mengintegrasikannya ke dalam alur kerja di VSCode. Mulai dari instalasi, penggunaan dasar, hingga tips memaksimalkan potensinya, panduan ini akan membantu Anda memulai perjalanan coding dengan dukungan AI secara lebih percaya diri dan terarah.

Menyamakan Persepsi

Sebelum melangkah lebih jauh, mari kita samakan pemahaman dan asumsi dasar agar panduan ini bisa langsung tepat sasaran. Panduan ini ditujukan bagi kita yang sudah berada pada tahap awal penggunaan Copilot AI dan familiar dengan beberapa teknologi berikut:

1. Sudah Download Extention Copilot AI di dalam VSCode

Kita harus sudah memasang ekstensi GitHub Copilot di Visual Studio Code dan mungkin sudah mencoba melihat saran otomatis yang muncul saat mengetik. Jika kita belum mengunduh ekstensi GitHub Copilot, silakan ikuti langkah-langkah berikut untuk memasangnya di Visual Studio Code:

1. Buka VSCode di komputer kita.
2. Klik ikon Extensions di sidebar kiri (atau tekan Ctrl + Shift + X).
3. Pada kolom pencarian di bagian atas, ketik: GitHub Copilot.
4. Pilih ekstensi bernama GitHub Copilot (resmi dari GitHub).
5. Klik tombol Install.
6. Setelah terpasang, kita akan diminta untuk login ke akun GitHub. Ikuti proses otentikasi hingga selesai.
7. Setelah login, Copilot akan aktif dan siap memberikan saran otomatis saat kita mulai mengetik kode.

Jika ekstensi sudah terpasang, kita bisa langsung melihat Copilot memberikan saran secara otomatis di editor baik berupa potongan kode kecil maupun fungsi yang lengkap berdasarkan konteks baris yang sedang kita tulis.

Panduan ini akan langsung membahas cara menggunakan Copilot secara efektif, jadi pastikan ekstensi sudah aktif sebelum lanjut ke bagian berikutnya.

2. Sedikit Paham Tailwind CSS

Kita tidak harus mahir, tetapi setidaknya sudah pernah menggunakan kelas-kelas seperti flex, mt-4, atau bg-blue-500 di proyek web. Hal ini akan sangat membantu karena Copilot bisa memberikan saran yang relevan untuk struktur HTML + Tailwind CSS yang lebih efisien dan bersih.

3. Sedikit Paham Github & Git

Minimal kita sudah tahu cara push & pull kode dari GitHub, membuat repository baru, dan memahami perbedaan antara lokal dan remote repo. Ini penting karena Copilot sangat terintegrasi dengan GitHub, termasuk saat bekerja di project berbasis kolaborasi.

4. Terbiasa Menggunakan VSCode

Kita sudah menjadikan VSCode sebagai editor utama, tahu cara membuat file baru, membuka folder proyek, dan menggunakan terminal bawaan. Dengan familiaritas ini, kita akan lebih cepat memahami interaksi Copilot di dalam VSCode, baik melalui inline suggestion maupun fitur chat-nya.

Yang Kalian Dapatkan Setelah Membaca

✅ Paham AI Copilot

✅ Bisa Praktek AI Copilot

✅ Menulis Code Lebih Cepat

✅ Bisa Deploy Hanya dengan AI

✅ Paham Kapan Harus Manual / Otomatis

Dll

Keahlian Copilot AI VSCode

1. Saran Kode Otomatis

Saat kita mengetik kode, Copilot secara otomatis memberikan saran dalam bentuk potongan kode atau bahkan satu fungsi lengkap yang sesuai dengan konteks. Misalnya, saat kita mulai menulis function, Copilot bisa langsung menyarankan isi dari fungsi tersebut berdasarkan pola yang umum atau yang sudah kita tulis sebelumnya. Ini bisa mempercepat proses coding dan membantu kita menghindari kesalahan kecil.

2. Bisa Mengubah, Membaca, Menalar Banyak File dalam 1 Proyek

Copilot tidak hanya fokus pada satu file yang sedang kita buka. Ia bisa membaca dan memahami struktur proyek secara keseluruhan mulai dari banyak file, dependensi, hingga pola yang digunakan. Dengan kemampuan ini, Copilot bisa menyesuaikan saran berdasarkan konteks seluruh proyek yang sedang kita kerjakan, bukan hanya potongan kode lokal.

3. Copilot Chat

Fitur Copilot Chat memungkinkan kita berinteraksi langsung dengan Copilot layaknya berdiskusi dengan rekan kerja. Kita bisa menanyakan maksud dari sebuah kode, meminta penjelasan baris demi baris, bahkan meminta Copilot untuk memperbaiki atau menyempurnakan bagian tertentu dari kode kita. Ini sangat membantu saat kita sedang belajar atau ketika menemui kendala logika dalam proyek.

4. Dukungan Model AI

Copilot kini didukung oleh model AI yang lebih canggih seperti GPT-4 (bagi pengguna Copilot Pro). Model ini memungkinkan Copilot memahami instruksi yang lebih kompleks, menjawab pertanyaan teknis secara lebih akurat, dan menghasilkan saran yang lebih relevan. Dengan dukungan ini, kita bisa mengandalkan Copilot tidak hanya untuk menyelesaikan kode, tapi juga untuk eksplorasi ide, debugging, hingga dokumentasi.

Yang Perlu di Perhatikan Agar Bisa Tanya AI Lebih Efektif

1. Punya Ide

Sebelum kita bertanya atau meminta bantuan ke Copilot, sebaiknya kita sudah punya gambaran dasar tentang apa yang ingin kita buat. AI bekerja lebih baik jika diberi arah. Misalnya, daripada hanya menulis "buatkan kode", lebih baik kita menyampaikan, "buatkan fungsi JavaScript untuk menghitung total belanja dengan diskon". Semakin jelas ide yang kita punya, semakin tepat bantuan yang diberikan Copilot.

2. Bisa Riview

Kita tetap perlu meninjau ulang semua saran yang diberikan oleh Copilot. Meskipun AI bisa sangat membantu, tidak semua hasilnya langsung bisa kita terima mentah-mentah. Dengan kemampuan review yang baik, kita bisa menyaring apakah kode tersebut aman, efisien, dan sesuai dengan gaya proyek yang sedang kita bangun.

3. Berusaha Tidak Lepas Kendali

Saat kita mulai terbiasa dengan bantuan Copilot, kadang kita tergoda untuk menyerahkan semuanya ke AI. Namun, penting untuk tetap mengontrol alur kerja kita sendiri. Jangan sampai kita hanya jadi penonton dari kode yang ditulis Copilot. Kita tetap harus aktif mengarahkan, memeriksa, dan memahami setiap baris yang dihasilkan.

4. Anggap Sebagai Asisten Kita

Kita perlu memposisikan Copilot sebagai asisten, bukan pengganti. Copilot sangat cerdas, tapi tetap butuh arahan dari kita. Kita yang bertanggung jawab atas hasil akhir dari kode yang ditulis, jadi interaksi kita dengan Copilot sebaiknya seperti kerja tim kita memimpin, dan Copilot membantu.

Mulai Challenge Proyek ( BuildWithAngga Online Course )

Perintah Awal

kita memberikan instruksi yang jelas kepada AI agar dapat menghasilkan output sesuai dengan yang kita butuhkan seperti berikut :

Selanjutnya, kita mengklik tombol Continue pada gambar di bawah ini untuk memulai proses generate :

Proses ini akan menghasilkan Konfigurasi awal Tailwind CSS.

Error

Ternyata kita mengalami error pada generatenya maka saat terjadi error, Copilot secara otomatis memperbaikinya seperti berikut:

Selanjutnya di jalan terjadi masalah yaitu AI berhenti tidak merespon dalam waktu yang cukup lama seperti berikut :

Sehingga kita perlu sentuhan manual juga.

Perbaiki Manual

kita melakukan perbaikan secara manual dengan menghapus seluruh folder terlebih dahulu, kemudian menjalankan perintah berikut untuk mengubahnya menjadi CDN agar proses lebih mudah:

kita menyetujui bagian yang berwarna hijau karena sudah kita tinjau dan pastikan kebenarannya.

Mulai Akses Hasil

Selanjutnya, kita membuka hasil generate AI tersebut di browser dengan cara Open In Default Browser ( Extention VSCode jadi perlu Install ) untuk melihat kualitasnya seperti berikut:

Deploy Otomatis

Selanjutnya, kita langsung meminta bantuan untuk melakukan deploy ke GitHub guna menguji apakah AI juga mampu melakukannya seperti berikut :

Error

Terdapat perintah yang gagal, kemudian AI secara otomatis mencari solusi dengan memisahkannya seperti contoh berikut:

Karena AI membutuhkan waktu loading yang lama dan terkesan tidak merespons, kita mengulangi perintah yang sama, dan hasilnya adalah sebagai berikut:

Ternyata proses loading yang tidak kunjung selesai disebabkan karena kita perlu membuat repository di GitHub terlebih dahulu.

Bikin Repo

Maka perlu bikin repo baru Github:

Push With AI

Setelah itu, kita menguji apakah perintah remote saja sudah cukup, yaitu dengan menggunakan perintah berikut: (git remote add origin https://……). Seperti gambar di bawah ini :

Ternyata copilot mampu push sendiri tanpa kita push manual.

Improve Semantic

Untuk mendukung struktur semantik, kita juga ingin menggunakan elemen <section> dalam HTML kita. Oleh karena itu, perintah yang kita berikan adalah sebagai berikut:

maka hasilnya :

Review

Setelah kita melakukan review, kita menyetujui perubahan dengan mengklik centang pada bagian yang memiliki latar belakang berwarna hijau. Namun, ternyata masih terdapat jumlah tag yang terlalu banyak, terlalu sedikit, atau penempatan tag yang tidak tepat (dalam hal ini, kita tidak mengetahui secara pasti letak kesalahannya). Oleh karena itu, kita meminta AI untuk melakukan debug, dan hasilnya adalah sebagai berikut:

AI berhasil menemukan Error dan memperbaikinya sendiri.

Hasil Akhir

Saat ini, kode telah diperbaiki dan disempurnakan oleh AI. Berikut hasilnya:

Push Lagi

Kita memberikan perintah kepada AI untuk melakukan push ulang ke GitHub, seperti ditunjukkan pada gambar berikut:

Cek GitHub

Selanjutnya, kita memeriksa di GitHub untuk memastikan apakah proyek sudah berhasil masuk, seperti ditunjukkan pada gambar berikut:

Kesimpulan

GitHub Copilot merupakan inovasi AI yang dirancang untuk meningkatkan efisiensi dan produktivitas dalam menulis kode di VSCode, terutama bagi pemula. Panduan ini hadir untuk membantu pengguna baru memahami cara menggunakan Copilot, mulai dari instalasi hingga praktik penggunaannya, agar dapat memulai proses coding dengan lebih percaya diri dan terstruktur.