Visual Studio Code, disingkat VS Code adalah aplikasi pengkodean untuk HTML dengan fitur dan ekstensi bawaan untuk meningkatkan pengalaman pengkodean pengembang
Saat kami mulai menulis kode HTML, notepad adalah editor pilihan kami. Tapi sejak itu, banyak yang berubah. Editor teks yang lebih baru dan lebih efisien telah masuk ke pasar, memberi kami banyak pilihan. Salah satu editor pengkodean sumber terbuka yang bebas digunakan adalah Visual Studio Code (dikenal sebagai VS Code). Pintasan inbuilt, banyak ekstensi - baik gratis maupun berbayar dan beberapa fitur eksklusif lainnya menjadikannya salah satu dari jenisnya. Salah satu contohnya adalah Ekstensi Server Langsung
Mengapa Menggunakan Ekstensi Server Langsung?
Perubahan dilakukan secara otomatis pada browser default dengan bantuan ekstensi server langsung
Di antara banyak ekstensi yang dihosting VS Code kami, ekstensi server langsung adalah salah satunya
Biasanya, ketika kita sedang coding & kita perlu melihat perubahannya secara langsung, kita harus memuat ulang halaman secara manual. Kami memberi kode 1 baris, dan kami menyegarkannya sekali. Proses ini berulang-ulang sampai kita selesai melakukan perubahan & proyek kita siap. Itu bisa melelahkan. Tetapi tidak dengan ekstensi live-server
Dengan mengaktifkan ekstensi server langsung VS Code, proses ini otomatis. Dengan satu klik, localhost yang beroperasi sendiri berjalan di browser yang memperbarui kode kami dengan setiap penambahan, penghapusan, dan perubahan yang dilakukan
Instalasi & Konfigurasi
Langkah-langkah berikut akan membantu dalam penginstalan dan konfigurasi server langsung
1) Penting untuk mengunduh aplikasi VS Code. Di sisi paling kiri layar selamat datang, klik ikon terakhir untuk mengunduh ekstensi server langsung
2) Pastikan beberapa pengkodean telah dilakukan untuk menguji ekstensi
3) Di kanan bawah, klik tombol "Go live" untuk melihat ekstensi berfungsi
Di bagian ini, kita akan berbicara tentang menginstal server langsung dan mengonfigurasi masalah umum saat menjalankannya
Cara Memasang Ekstensi Kode VS
1) Langkah pertama pastikan VS Code sudah terinstall di komputer
Ekstensi Kode VS yang Direkomendasikan untuk HTML
Sebelas ekstensi teratas untuk diunduh adalah
1) Tag Akhir HTML Label yang mengomentari kelas dan id di sebelah tag penutup untuk navigasi yang lebih baik
2) Tag Tutup Otomatis menutup elemen HTML setelah '>' diketik
3) Highlight Matching Tag menggarisbawahi tag pembuka dan penutup dengan warna yang sama untuk identifikasi yang jelas
4) Tag Ganti Nama Otomatis mengubah tag penutup jika tag pembuka diganti namanya
5) Komentar yang Lebih Baik mengkategorikan komentar menjadi enam jenis untuk kolaborasi yang efisien
6) Pemeriksa Ejaan Kode memberikan saran untuk memperbaiki ejaan yang salah melalui menu
7) Indent Rainbow menyoroti tag yang cocok menggunakan empat warna bergantian yang membuat lekukan lebih jelas
8) Lebih cantik membuat pemformatan otomatis lebih mudah dengan memasukkan setiap elemen dalam baris baru
9) Cuplikan menyimpan baris kode untuk digunakan kembali. Ini memiliki fitur lain seperti impor dan ekspor yang membuatnya lebih bermanfaat
10) Ekstensi berbasis AI, Tabnine, digunakan untuk penyelesaian kode oleh individu dan tim pengembang
11) Linter Aksesibilitas kapak berfokus pada kode yang dapat diakses dan mengidentifikasi kesalahan terkait bersama dengan perbaikan yang disarankan
Seperti ekstensi server langsung, banyak lainnya membuat pengalaman pengkodean kami lebih baik dan lebih efisien. Mari kita lihat sebelas teratas di bawah ini
Label Tag Akhir HTML
Jika pengkodean dilakukan dalam skala besar, menavigasi ke kode sebelumnya bisa membingungkan. Begitu banyak elemen yang sama tertanam satu sama lain, dan mana yang mewakili kelas atau id mana yang dapat mengurangi kecepatan dan efisiensi kami. Ekstensi Label Tag Akhir HTML menambahkan label kelas dan id sebagai komentar di samping elemen penutup setiap tag
Unduh ekstensi yang dikembangkan oleh Ante Primorac, dan fitur ini diterapkan secara otomatis pada semua file yang dibuka di VS Code
Tag Tutup Otomatis
Ada beberapa tag yang akan digunakan di setiap proyek. Seperti namanya, Tag Tutup Otomatis secara otomatis menutup tag setelah '>' diketik di tag HTML pembuka
Ada banyak alternatif untuk ini dengan nama berbeda, tetapi yang diterbitkan oleh Jun Han memiliki jumlah unduhan tertinggi
Sorot Tag Pencocokan
Highlight Matching Tag mengidentifikasi tag pembuka dan penutup elemen HTML dengan menggarisbawahinya dengan warna yang sama. Ini biasanya membantu dalam kasus ketika banyak elemen HTML serupa ditumpuk bersama & kita bisa bingung tentang mana yang dimulai/diakhiri di mana
Ini memberikan opsi penataan gaya khusus yang ekstensif untuk elemen HTML kita. Diterbitkan oleh Vincaslt, ekstensi ini aktif secara otomatis secara global
Tag Ganti Nama Otomatis
Saat membuat kode proyek dengan ribuan baris, kami tiba-tiba ingin mengubah nama elemen. Kami mencari tag awalnya dan mengubahnya & mungkin ratusan baris di bawahnya adalah tag penutup. Jika kami mengubah tag penutup yang salah, kode kami akan menampilkan kesalahan & akan melelahkan untuk mengetahui kesalahan yang tidak terlalu umum ini. Tag Ganti Nama Otomatis mengganti nama tag penutup kami secara otomatis pada saat kami mengubah tag pembuka. Seberapa nyaman, bukan?
Diterbitkan oleh Jun Huan, seperti kebanyakan ekstensi, ini juga diaktifkan secara otomatis
Komentar adalah bagian penting dari kehidupan developer, terutama selama kolaborasi. Beberapa hal yang perlu dilakukan dan bagian kode yang tidak berfungsi diawali dengan komentar yang menentukan tugas tertentu. Tetapi semua komentar ini memiliki desain yang serupa dan dapat membingungkan pengembang dalam menavigasi kode. Karenanya, Komentar Lebih Baik membantu mengkategorikan semua komentar ke dalam enam kategori
Sekarang tidak perlu mempertahankan dokumen terpisah atau komentar yang membingungkan dengan tugas yang ada. Ini diterbitkan oleh Aaron Bond
Pemeriksa Ejaan Kode
Kesalahan pengejaan terjadi setiap saat, baik itu saat mengkodekan nama elemen atau memasukkan tajuk yang menarik untuk situs web kami. VS Code tidak menyediakan pemeriksa ejaan bawaan. Apakah kita ingin menyimpan kamus dan kode? . Karenanya, ekstensi Pemeriksa Ejaan Kode adalah suatu keharusan. Ini menggarisbawahi kata yang salah eja secara zig-zag di sepanjang menu untuk memperbaikinya
Street Side Software telah menerbitkan ekstensi ini
Indentasi Pelangi
“Hal-hal kecil itulah yang diperhitungkan. ”
Demikian pula, dalam pengkodean, bagian seperti lekukan dan komentar dapat membuat perbedaan besar tidak hanya dalam pemahaman dasar tetapi juga dalam hal presentasi. Kami telah melihat ekstensi untuk komentar yang lebih baik. Indentasi dapat lebih mudah dibaca dengan menggunakan ekstensi Indent Rainbow. Ini memberikan UI yang lebih baik dari apa yang sedang kami kerjakan karena menemukan tag yang cocok lebih mudah dengan cara ini
Itu diterbitkan oleh Oderwat dan menggunakan empat warna bergantian untuk menyorot tag yang cocok di setiap langkah
Lebih cantik
Pemformatan otomatis tidak pernah semudah ini sebelumnya. Dengan lebih cantik, semua tag dipecah menjadi barisnya dengan menyisipkan spasi putih. Terkadang kita membutuhkan dua tag (seperti li) pada baris yang sama. Dalam kasus tersebut, komentar menyatakan /* prettier-ignore */ dapat dimasukkan untuk mencapai tujuan
Jika Anda menyukai pemformatan otomatis, unduh ekstensi ini yang diterbitkan dengan nama Prettier
Cuplikan
Beberapa cuplikan dapat digunakan berulang kali, misalnya kode untuk detail item makanan yang mencantumkan kartu. Pada kesempatan seperti itu, Cuplikan bisa bermanfaat. Ekstensi cuplikan mengambil bagian dari kode untuk menamainya sesuai preferensi kami. Detail ini kemudian disimpan di penjelajah dan dapat diambil untuk digunakan kembali. Dikembangkan oleh Devon Ray, itu juga memberikan fungsionalitas untuk mencari atau mengelompokkan cuplikan kode dan mengimpor atau mengekspornya. Langkah-langkah berikut dapat membantu Anda menggunakan ekstensi ini dengan benar
1) Setelah mendownloadnya, pastikan Anda memiliki beberapa bagian dari kode yang siap untuk dijadikan snippet
2) Pilih seluruh kode & klik opsi "Buat Cuplikan" setelah mengklik kanan
3) Viola, cuplikan Anda telah dibuat dan siap digunakan kembali
tabn
Ada beberapa pola, jargon, dan atribut yang sering digunakan pengembang. Tapi itu perlu ditulis berulang kali saat dibutuhkan. Dalam skala yang lebih kecil, waktu yang dibutuhkan untuk menulis kode semacam itu minimal, tetapi dapat bervariasi saat berbicara dalam skala besar. Tabnine adalah asisten berbasis AI dalam bentuk ekstensi untuk individu & tim yang mengantisipasi kebutuhan pengkodean kami untuk membantu meningkatkan produktivitas kami ke level selanjutnya
kapak Aksesibilitas Linter
Membuat situs web dan aplikasi web dapat diakses oleh semua orang adalah mantra baru yang harus diikuti oleh setiap pengembang. Namun kesadaran dan pendidikan tentang hal yang sama masih sedikit yang dapat membuat kita bingung bagaimana berkontribusi untuk membuat dunia dapat diakses. Ekstensi Linter Aksesibilitas kapak secara otomatis memeriksa kode sumber untuk masalah terkait aksesibilitas dan menyarankan perbaikan. Dibuat oleh sistem Deque, ekstensi ini membantu menghemat waktu dan uang dengan mengatasi masalah umum di fase awal pengembangan