VSCode: Ekstensi, Emmet, Pintasan
Pasang ekstensi penting, gunakan singkatan Emmet untuk menulis HTML dan CSS secara instan, serta pelajari pintasan papan ketik yang mempercepat penyuntingan.
VSCode: Ekstensi, Emmet, Pintasan adalah pelajaran Frontend Academy gratis di CoddyKit. Ini adalah pelajaran 2 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Frontend Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Frontend Academy mencakup 4 pelajaran total.
Mengapa VSCode?
Visual Studio Code adalah editor kode paling populer untuk pengembangan antarmuka. Editor ini gratis, bersumber terbuka, cepat, dan memiliki ekosistem ekstensi yang sangat besar. Sebagian besar tim pengembang antarmuka menjadikannya standar.
Ekstensi Esensial
Ekstensi yang wajib dimiliki untuk pengembangan antarmuka: ESLint (linting sebaris), Prettier (pemformatan otomatis), GitLens (penelusuran atribusi Git sebaris), Path Intellisense (pelengkapan otomatis jalur berkas), dan Auto Rename Tag (mengganti nama tag HTML berpasangan).
Ekstensi Khusus Bahasa
Untuk TypeScript: TypeScript and JavaScript Language Features (bawaan). Untuk React: ES7+ React/Redux snippets. Untuk Vue: Volar (resmi). Untuk Tailwind: Tailwind CSS IntelliSense.
Apa Itu Emmet?
Emmet sudah tersedia di dalam VSCode. Ketik singkatan lalu tekan Tab untuk mengembangkannya menjadi HTML atau CSS lengkap. Emmet sangat mempercepat penulisan markah.
<!-- Type then press Tab: -->
nav>ul>li*3>a{Link $}
<!-- Expands to: -->
<nav>
<ul>
<li><a href="">Link 1</a></li>
<li><a href="">Link 2</a></li>
<li><a href="">Link 3</a></li>
</ul>
</nav>Singkatan Emmet yang Umum
Pelajari pintasan Emmet berikut: ! → kerangka HTML, div.container → div dengan kelas, ul>li*5 → daftar dengan 5 item, input:email → masukan email, form:post → formulir dengan method=post.
<!-- type: div.card>img+h3{Title}+p{Description} → -->
<div class="card">
<img src="" alt="">
<h3>Title</h3>
<p>Description</p>
</div>Pintasan Papan Ketik Esensial
Pintasan yang paling menghemat waktu: Ctrl/Cmd+P (membuka berkas dengan cepat), Ctrl/Cmd+Shift+P (palet perintah), Alt+Click (banyak kursor), Ctrl/Cmd+D (memilih kemunculan berikutnya), dan Ctrl/Cmd+/ (mengaktifkan atau menonaktifkan komentar).
Pengeditan dengan Banyak Kursor
Alt+Click menambahkan kursor. Ctrl+Alt+Up/Down menambahkan kursor di atas atau di bawah. Ctrl+D memilih kemunculan berikutnya dari pilihan. Dengan banyak kursor, semua pengeditan terjadi secara bersamaan — sangat berguna untuk mengganti nama variabel dalam cakupan kecil.
Terminal Terintegrasi
Buka terminal di dalam VSCode dengan Ctrl+` (tanda aksen terbalik). Anda dapat membaginya untuk menjalankan server pengembangan di satu panel dan menjalankan pengujian di panel lain tanpa meninggalkan editor.
Pengaturan Ruang Kerja
Buat berkas .vscode/settings.json di proyek Anda untuk menetapkan pengaturan khusus proyek yang mengesampingkan pengaturan pengguna. Komit berkas ini agar semua rekan satu tim memperoleh pengalaman yang sama: pemformatan saat disimpan, ukuran tab, dan kolom penggaris.
// .vscode/settings.json
{
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.tabSize": 2
}IntelliSense dan Impor Otomatis
IntelliSense milik VSCode menyediakan pelengkapan otomatis, petunjuk parameter, dan dokumentasi saat kursor diarahkan. Untuk proyek TypeScript, IntelliSense juga mengimpor simbol secara otomatis saat Anda menerima suatu pelengkapan — tidak perlu melakukan impor secara manual.
Menuju Definisi dan Referensi
Ctrl+Click (atau F12) pada simbol apa pun untuk menuju definisinya. Shift+F12 menampilkan semua referensi. Ctrl+Shift+F mencari di seluruh berkas. Fitur-fitur ini sangat penting untuk menavigasi basis kode besar.
Panel Masalah
Panel Problems (Ctrl+Shift+M) mencantumkan semua galat dan peringatan ESLint serta TypeScript di seluruh berkas yang terbuka. Ini adalah cara tercepat untuk melihat hal-hal yang perlu diperbaiki sebelum melakukan komit.
Pemeriksaan Singkat
Menjadi apa singkatan Emmet ul>li*3 saat dikembangkan di VSCode?
Rangkuman: Alur Kerja VSCode
Pasang ESLint, Prettier, dan ekstensi khusus bahasa. Gunakan Emmet untuk menulis HTML/CSS dengan cepat. Pelajari pintasan papan ketik (Cmd+P, Cmd+Shift+P, Cmd+D). Tetapkan formatOnSave di .vscode/settings.json. Gunakan pengeditan dengan banyak kursor untuk perubahan berulang. Gunakan Go to Definition untuk menavigasi kode.
Belajar HTML dengan tutor AI — gratis
Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.
- Kursus
- 41
- Pelajaran
- 163
Pertanyaan yang Sering Diajukan
Apakah pelajaran “VSCode: Ekstensi, Emmet, Pintasan” gratis?
Ya — teks lengkap “VSCode: Ekstensi, Emmet, Pintasan” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Frontend Academy, upgrade ke CoddyKit PRO. Kursus Frontend Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “VSCode: Ekstensi, Emmet, Pintasan”?
Pasang ekstensi penting, gunakan singkatan Emmet untuk menulis HTML dan CSS secara instan, serta pelajari pintasan papan ketik yang mempercepat penyuntingan. Kamu berlatih Frontend Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai Frontend Academy?
Tidak diperlukan pengalaman sebelumnya. Frontend Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 2 dari 4.
Berapa lama pelajaran “VSCode: Ekstensi, Emmet, Pintasan” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran Frontend Academy ini?
Ya. Setiap pelajaran Frontend Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- Chrome DevTools: Elemen, Konsol, Jaringan
- VSCode: Ekstensi, Emmet, Pintasan
- Pengaturan Prettier dan ESLint
- Kompatibilitas Browser dan caniuse.com