Web-Dev-For-Beginners/translations/ms/8-code-editor/1-using-a-code-editor/README.md

Menggunakan editor kod

Pelajaran ini merangkumi asas penggunaan VSCode.dev, sebuah editor kod berasaskan web, supaya anda boleh membuat perubahan pada kod anda dan menyumbang kepada projek tanpa perlu memasang apa-apa pada komputer anda.

Objektif pembelajaran

Dalam pelajaran ini, anda akan belajar bagaimana untuk:

• Menggunakan editor kod dalam projek kod
• Menjejaki perubahan dengan kawalan versi
• Menyesuaikan editor untuk pembangunan

Prasyarat

Sebelum anda bermula, anda perlu membuat akaun dengan GitHub. Pergi ke GitHub dan buat akaun jika anda belum memilikinya.

Pengenalan

Editor kod adalah alat penting untuk menulis program dan bekerjasama dalam projek kod sedia ada. Setelah anda memahami asas editor dan cara menggunakan ciri-cirinya, anda boleh menerapkannya semasa menulis kod.

Bermula dengan VSCode.dev

VSCode.dev adalah editor kod di web. Anda tidak perlu memasang apa-apa untuk menggunakannya, sama seperti membuka laman web lain. Untuk bermula dengan editor ini, buka pautan berikut: https://vscode.dev. Jika anda belum log masuk ke GitHub, ikuti arahan untuk log masuk atau buat akaun baru dan kemudian log masuk.

Setelah dimuatkan, ia sepatutnya kelihatan seperti gambar ini:

Terdapat tiga bahagian utama, bermula dari kiri ke kanan:

1. Activity bar yang mengandungi beberapa ikon, seperti kaca pembesar 🔎, gear ⚙️, dan beberapa lagi.
2. Side bar yang merupakan bar aktiviti yang diperluas, secara lalai dipanggil Explorer.
3. Dan akhirnya, kawasan kod di sebelah kanan.

Klik pada setiap ikon untuk memaparkan menu yang berbeza. Setelah selesai, klik pada Explorer supaya anda kembali ke tempat asal.

Apabila anda mula mencipta kod atau mengubah kod sedia ada, ia akan berlaku di kawasan terbesar di sebelah kanan. Anda juga akan menggunakan kawasan ini untuk melihat kod sedia ada, yang akan anda lakukan seterusnya.

Membuka repositori GitHub

Perkara pertama yang anda perlukan ialah membuka repositori GitHub. Terdapat beberapa cara untuk membuka repositori. Dalam bahagian ini, anda akan melihat dua cara berbeza untuk membuka repositori supaya anda boleh mula membuat perubahan.

1. Dengan editor

Gunakan editor itu sendiri untuk membuka repositori jauh. Jika anda pergi ke VSCode.dev, anda akan melihat butang "Open Remote Repository":

Anda juga boleh menggunakan command palette. Command palette adalah kotak input di mana anda boleh menaip sebarang perkataan yang merupakan sebahagian daripada arahan atau tindakan untuk mencari arahan yang betul untuk dilaksanakan. Gunakan menu di bahagian atas kiri, kemudian pilih View, dan kemudian pilih Command Palette, atau gunakan pintasan papan kekunci berikut: Ctrl-Shift-P (pada MacOS ia adalah Command-Shift-P).

Setelah menu dibuka, taip open remote repository, dan kemudian pilih pilihan pertama. Beberapa repositori yang anda sertai atau yang telah anda buka baru-baru ini akan muncul. Anda juga boleh menggunakan URL GitHub penuh untuk memilih satu. Gunakan URL berikut dan tampal ke dalam kotak:

https://github.com/microsoft/Web-Dev-For-Beginners

✅ Jika berjaya, anda akan melihat semua fail untuk repositori ini dimuatkan dalam editor teks.

2. Menggunakan URL

Anda juga boleh menggunakan URL secara langsung untuk memuatkan repositori. Sebagai contoh, URL penuh untuk repositori semasa ialah https://github.com/microsoft/Web-Dev-For-Beginners, tetapi anda boleh menukar domain GitHub dengan VSCode.dev/github dan memuatkan repositori secara langsung. URL yang terhasil ialah https://vscode.dev/github/microsoft/Web-Dev-For-Beginners.

Mengedit fail

Setelah anda membuka repositori pada pelayar/vscode.dev, langkah seterusnya ialah membuat kemas kini atau perubahan pada projek.

1. Cipta fail baru

Anda boleh mencipta fail di dalam folder sedia ada, atau menciptanya di direktori/folder akar. Untuk mencipta fail baru, buka lokasi/direktori di mana anda mahu fail disimpan dan pilih ikon 'New file ...' pada activity bar (kiri), beri nama dan tekan enter.

2. Edit dan simpan fail pada repositori

Menggunakan vscode.dev sangat berguna apabila anda ingin membuat kemas kini cepat pada projek anda tanpa perlu memuatkan sebarang perisian secara tempatan.
Untuk mengemas kini kod anda, klik ikon 'Explorer', yang juga terletak pada activity bar untuk melihat fail & folder dalam repositori.
Pilih fail untuk membukanya di kawasan kod, buat perubahan anda dan simpan.

Setelah anda selesai mengemas kini projek anda, pilih ikon source control yang mengandungi semua perubahan baru yang telah anda buat pada repositori anda.

Untuk melihat perubahan yang anda buat pada projek, pilih fail dalam folder Changes di activity bar yang diperluas. Ini akan membuka 'Working Tree' untuk anda melihat secara visual perubahan yang anda buat pada fail. Warna merah menunjukkan penghapusan pada projek, manakala warna hijau menunjukkan penambahan.

Jika anda berpuas hati dengan perubahan yang anda buat, letakkan kursor pada folder Changes dan klik butang + untuk stage perubahan tersebut. Staging bermaksud menyediakan perubahan anda untuk dikomitkan ke GitHub.

Jika anda tidak selesa dengan beberapa perubahan dan ingin membatalkannya, letakkan kursor pada folder Changes dan pilih ikon undo.

Kemudian, taipkan commit message (Deskripsi perubahan yang anda buat pada projek), klik ikon check untuk commit dan push perubahan anda.

Setelah selesai bekerja pada projek anda, pilih ikon hamburger menu di bahagian atas kiri untuk kembali ke repositori di github.com.

Menggunakan sambungan (extensions)

Memasang sambungan pada VSCode membolehkan anda menambah ciri baru dan pilihan persekitaran pembangunan yang disesuaikan pada editor anda untuk meningkatkan aliran kerja pembangunan anda. Sambungan ini juga membantu anda menambah sokongan untuk pelbagai bahasa pengaturcaraan dan sering kali sama ada sambungan generik atau sambungan berasaskan bahasa.

Untuk menyemak senarai semua sambungan yang tersedia, klik ikon Extensions pada activity bar dan mula menaip nama sambungan pada medan teks yang dilabelkan 'Search Extensions in Marketplace'.
Anda akan melihat senarai sambungan, setiap satu mengandungi nama sambungan, nama penerbit, deskripsi satu ayat, jumlah muat turun dan penilaian bintang.

Anda juga boleh melihat semua sambungan yang telah dipasang sebelum ini dengan mengembangkan folder Installed, sambungan popular yang digunakan oleh kebanyakan pembangun dalam folder Popular, dan sambungan yang disyorkan untuk anda sama ada oleh pengguna dalam ruang kerja yang sama atau berdasarkan fail yang baru dibuka dalam folder Recommended.

1. Pasang Sambungan

Untuk memasang sambungan, taip nama sambungan dalam medan carian dan klik padanya untuk melihat maklumat tambahan tentang sambungan tersebut di kawasan kod setelah ia muncul di activity bar yang diperluas.

Anda boleh klik butang install biru pada activity bar yang diperluas untuk memasang atau gunakan butang pasang yang muncul di kawasan kod setelah anda memilih sambungan untuk memuatkan maklumat tambahan.

2. Sesuaikan Sambungan

Setelah memasang sambungan, anda mungkin perlu mengubah tingkah lakunya dan menyesuaikannya berdasarkan keutamaan anda. Untuk melakukan ini, pilih ikon Extensions, dan kali ini, sambungan anda akan muncul dalam folder Installed, klik pada ikon Gear dan navigasi ke Extensions Setting.

3. Urus Sambungan

Setelah memasang dan menggunakan sambungan anda, vscode.dev menawarkan pilihan untuk mengurus sambungan anda berdasarkan keperluan yang berbeza. Sebagai contoh, anda boleh memilih untuk:

• Disable: (Anda boleh melumpuhkan sambungan buat sementara waktu apabila anda tidak lagi memerlukannya tetapi tidak mahu menyahpasangnya sepenuhnya)

  Pilih sambungan yang dipasang pada activity bar yang diperluas > klik ikon Gear > pilih 'Disable' atau 'Disable (Workspace)' ATAU Buka sambungan pada kawasan kod dan klik butang Disable biru.

• Uninstall: Pilih sambungan yang dipasang pada activity bar yang diperluas > klik ikon Gear > pilih 'Uninstall' ATAU Buka sambungan pada kawasan kod dan klik butang Uninstall biru.

---

Tugasan

Cipta laman web resume menggunakan vscode.dev

Kajian & Pembelajaran Kendiri

Baca lebih lanjut tentang VSCode.dev dan beberapa ciri lain yang ditawarkannya.

---

Penafian:
Dokumen ini telah diterjemahkan menggunakan perkhidmatan terjemahan AI Co-op Translator. Walaupun kami berusaha untuk memastikan ketepatan, sila ambil maklum bahawa terjemahan automatik mungkin mengandungi kesilapan atau ketidaktepatan. Dokumen asal dalam bahasa asalnya harus dianggap sebagai sumber yang berwibawa. Untuk maklumat penting, terjemahan manusia profesional adalah disyorkan. Kami tidak bertanggungjawab atas sebarang salah faham atau salah tafsir yang timbul daripada penggunaan terjemahan ini.