leestott
88264e8bfd
|
2 months ago | |
|---|---|---|
| .. | ||
| README.md | 2 months ago | |
| assignment.md | 3 months ago | |
README.md
Menggunakan Editor Kode: Menguasai VSCode.dev
Selamat datang!
Pelajaran ini akan membawa Anda dari dasar hingga penggunaan tingkat lanjut VSCode.dev—editor kode berbasis web yang kuat. Anda akan belajar cara mengedit kode dengan percaya diri, mengelola proyek, melacak perubahan, menginstal ekstensi, dan berkolaborasi seperti seorang profesional—semuanya langsung dari browser Anda, tanpa perlu instalasi.
Tujuan Pembelajaran
Pada akhir pelajaran ini, Anda akan dapat:
- Menggunakan editor kode secara efisien untuk proyek apa pun, di mana saja
- Melacak pekerjaan Anda dengan kontrol versi bawaan
- Mempersonalisasi dan meningkatkan alur kerja pengembangan Anda dengan kustomisasi editor dan ekstensi
Prasyarat
Untuk memulai, daftar akun GitHub gratis, yang memungkinkan Anda mengelola repositori kode dan berkolaborasi secara global. Jika Anda belum memiliki akun, buat di sini.
Mengapa Menggunakan Editor Kode Berbasis Web?
Editor kode seperti VSCode.dev adalah pusat kendali Anda untuk menulis, mengedit, dan mengelola kode. Dengan antarmuka yang intuitif, banyak fitur, dan akses langsung melalui browser, Anda dapat:
- Mengedit proyek di perangkat apa pun
- Menghindari kerumitan instalasi
- Berkolaborasi dan berkontribusi secara instan
Setelah Anda terbiasa dengan VSCode.dev, Anda akan siap menghadapi tugas coding dari mana saja, kapan saja.
Memulai dengan VSCode.dev
Akses VSCode.dev—tanpa instalasi, tanpa unduhan. Masuk dengan GitHub untuk membuka akses penuh, termasuk sinkronisasi pengaturan, ekstensi, dan repositori Anda. Jika diminta, hubungkan akun GitHub Anda.
Setelah dimuat, ruang kerja Anda akan terlihat seperti ini:
, ⚙️ (Pengaturan), file, kontrol sumber, dll.
- Sidebar: Berubah konteks berdasarkan ikon activity bar yang dipilih (default ke Explorer untuk menampilkan file).
- Area editor/kode: Bagian terbesar di sebelah kanan—tempat Anda benar-benar mengedit dan melihat kode.
Klik ikon untuk menjelajahi fitur, tetapi kembali ke Explorer untuk tetap berada di tempat Anda.
Membuka Repositori GitHub
Metode 1: Dari Editor
-
Pergi ke VSCode.dev. Klik "Open Remote Repository."
.
 dan tekan Enter.
Jika berhasil, Anda akan melihat seluruh proyek dimuat dan siap untuk diedit!
Metode 2: Langsung melalui URL
Ubah URL repo GitHub apa pun untuk langsung membukanya di VSCode.dev dengan mengganti github.com dengan vscode.dev/github.
Contoh:
- GitHub:
https://github.com/microsoft/Web-Dev-For-Beginners - VSCode.dev:
https://vscode.dev/github/microsoft/Web-Dev-For-Beginners
Fitur ini mempercepat akses cepat ke proyek APA PUN.
Mengedit File dalam Proyek Anda
Setelah repo Anda terbuka, Anda dapat:
1. Membuat File Baru
- Di sidebar Explorer, navigasikan ke folder yang diinginkan atau gunakan root.
- Klik ikon ‘New file ...’.
- Beri nama file Anda, tekan Enter, dan file Anda muncul seketika.
 dan penghapusan (merah).
![View changes](../images/working-tree.png perubahan dengan mengklik+di sebelah file untuk mempersiapkan commit. - Batalkan perubahan yang tidak diinginkan dengan mengklik ikon undo.
- Ketik pesan commit yang jelas, lalu klik tanda centang untuk melakukan commit dan push.
Untuk kembali ke repositori Anda di GitHub, pilih menu hamburger di kiri atas.
![Stage & commit changes](../images/edit-vscode.dev Up dengan Ekstensi
Ekstensi memungkinkan Anda menambahkan bahasa, tema, debugger, dan alat produktivitas ke VSCode.dev—membuat hidup coding Anda lebih mudah dan menyenangkan.
Menjelajahi dan Mengelola Ekstensi
-
Klik ikon Extensions di activity bar.
-
Cari ekstensi di kotak 'Search Extensions in Marketplace'.
![Extension details](../images/extension-details:
- Installed: Semua ekstensi yang telah Anda tambahkan
- Popular: Favorit industri
- Recommended: Disesuaikan dengan alur kerja Anda
![View extensions](
1. Menginstal Ekstensi
-
Masukkan nama ekstensi di pencarian, klik, dan tinjau detailnya di editor.
-
Tekan tombol Install biru di sidebar atau di area kode utama.
![Install extensions](../images/install-extension 2. Menyesuaikan Ekstensi
-
Temukan ekstensi yang telah diinstal.
-
Klik ikon Gear → pilih Extension Settings untuk menyesuaikan perilaku sesuai keinginan Anda.
![Modify extension settings](../images/extension-settings 3. Mengelola Ekstensi Anda dapat:
-
Disable: Mematikan sementara ekstensi sambil tetap mempertahankannya terinstal
-
Uninstall: Menghapusnya secara permanen jika tidak lagi diperlukan
Temukan ekstensi, tekan ikon Gear, dan pilih ‘Disable’ atau ‘Uninstall,’ atau gunakan tombol biru di area kode.
Tugas
Uji kemampuan Anda: Buat situs web resume menggunakan vscode.dev
Eksplorasi Lebih Lanjut dan Belajar Mandiri
- Pelajari lebih dalam dengan Dokumentasi Resmi VSCode Web.
- Jelajahi fitur ruang kerja tingkat lanjut, pintasan keyboard, dan pengaturan.
Sekarang Anda siap untuk coding, membuat, dan berkolaborasi—dari mana saja, di perangkat apa pun, menggunakan VSCode.dev!
Penafian:
Dokumen ini telah diterjemahkan menggunakan layanan penerjemahan AI Co-op Translator. Meskipun kami berupaya untuk memberikan hasil yang akurat, harap diketahui bahwa terjemahan otomatis mungkin mengandung kesalahan atau ketidakakuratan. Dokumen asli dalam bahasa aslinya harus dianggap sebagai sumber yang otoritatif. Untuk informasi yang penting, disarankan menggunakan jasa penerjemahan manusia profesional. Kami tidak bertanggung jawab atas kesalahpahaman atau penafsiran yang keliru yang timbul dari penggunaan terjemahan ini.