8 Ekstensi Kode Visual Studio yang Kuat untuk Pengembang Front-end

Meskipun Microsoft merilis versi stabil pertama dari Visual Studio Code, editor kode yang kuat hanya beberapa bulan yang lalu, pada bulan Maret 2016, ia sudah memiliki banyak ekstensi yang tersedia yang dapat membawa pengalaman pengkodean ke tingkat berikutnya. Itu ekstensi Visual Studio Code resmi di-host di Visual Studio Code Marketplace, banyak di antaranya dapat sangat membantu pengembang web.

Untuk posting ini, saya menguji banyak ekstensi VS Code yang terkait dengan pengembangan front-end, dan membuat daftar yang paling banyak saya temukan intuitif, mudah digunakan dan nyaman. Ini bukan daftar pamungkas oleh semua. Luangkan waktu untuk menelusuri pasar sendiri, dan lihat apa lagi yang bisa ditawarkannya kepada Anda, terutama karena banyak ekstensi hebat belum datang.

Cara Memasang Ekstensi Kode VS

Menginstal ekstensi cukup mudah dalam Visual Studio Code, seperti yang Anda bisa lakukan dalam editor kode. Di VS Code Marketplace, setiap ekstensi memiliki halamannya sendiri, dan Anda dapat menemukan perintah untuk memasang ekstensi yang diberikan di atas halaman ini..

Perintah selalu dimulai dengan ext instal istilah. Untuk menginstal ekstensi, cukup tekan CTRL + P di dalam Kode VS untuk memulai panel Buka Cepat, salin-tempel perintah ini ke dalamnya, dan akhirnya mulai ulang editor kode untuk membuat ekstensi baru berfungsi.

8 Ekstensi Kode Visual Studio yang Kuat

Cuplikan HTML

Jika Anda ingin sering menulis HTML dalam Visual Studio Code, ekstensi HTML Snippets bisa berguna sebagai alat menambahkan dukungan rumit untuk HTML. Meskipun VS Code memiliki dukungan dasar untuk HTML, seperti pewarnaan sintaks, ekstensi HTML Cuplikan tahu lebih banyak.

Mungkin fitur yang paling berguna dari ekstensi ini adalah itu ketika Anda mulai mengetik nama tag HTML (tanpa braket sudut mulai), Cuplikan HTML dengan cepat menampilkan daftar dari opsi yang tersedia dengan informasi singkat tentang masing-masing.

Ketika Anda mengklik pada elemen yang Anda butuhkan, Potongan HTML menambahkan tag HTML5 lengkap dengan properti yang paling umum. Misalnya, jika Anda ingin menambahkan tautan (anchor tag) ke dokumen Anda, ketikkan saja Sebuah ke dalam VS Code, pilih opsi yang tepat di kotak sembulan, dan Cuplikan HTML akan memasukkan yang diperlukan cuplikan ke editor Anda tanpa kerumitan.

Pembuat ekstensi ini juga memperhatikan untuk menghapus elemen yang sudah usang, jadi jika Anda ingin menggunakan tag HTML yang tidak dapat Anda temukan di daftar sembulan, ada baiknya untuk memeriksa apakah itu masih valid atau tidak.
Penyelesaian Kelas HTML CSS

Penyelesaian Kelas HTML CSS dapat menjadi ekstensi yang bermanfaat jika Anda perlu menggunakan banyak Kelas CSS dalam proyek Anda. Sering terjadi pada kita pengembang, yaitu kita tidak sepenuhnya yakin dengan nama kelas yang tepat, tetapi itu hanya berada di belakang pikiran kita sebagai pengetahuan pasif.

Ekstensi cerdas ini memberikan solusi untuk masalah ini mengambil nama semua kelas CSS di ruang kerja saat ini, dan menampilkan daftar tentang mereka.

Katakanlah, Anda ingin membuat situs menggunakan Zurb Foundation, dan Anda ingin menggunakan kotak kecil. Anda tidak ingat bagaimana nama kelasnya, tetapi Anda tahu mereka memiliki nama semantik.

Dengan Penyelesaian Kelas HTML CSS, Anda hanya perlu mulai mengetik kata kecil, dan opsi yang tersedia muncul di layar Anda sekaligus, sehingga Anda dapat dengan mudah memilih yang Anda butuhkan.
Lihat di Browser

Lihat di Browser adalah ekstensi sederhana namun kuat untuk Visual Studio Code. Ini dapat memfasilitasi pengembangan front-end dengan memungkinkan Anda Lihat hasil pekerjaan Anda di peramban sambil menyandi. Anda dapat membuka file HTML di browser default Anda langsung dari VS Code dengan menekan CTRL + F1 pintasan keyboard.

Perhatikan bahwa Lihat di Browser hanya mendukung HTML, jadi jika Anda ingin melihat situs Anda, Anda harus membuka file HTML. Kamu tidak dapat langsung mengakses browser dari file CSS atau JavaScript.
Debugger untuk Chrome

Debugger untuk Chrome dibangun oleh Microsoft sendiri, dan saat ini merupakan ekstensi Visual Studio Code ke-4 yang paling sering diunduh.

Debugger untuk Chrome memungkinkan debug JavaScript di Google Chrome tanpa meninggalkan editor kode. Ini berarti Anda tidak perlu bekerja dengan JavaScript yang diubah-ubah yang dilihat browser, tetapi Anda bisa melakukan debugging langsung dari file sumber asli. Lihat demo ini untuk melihat cara kerjanya.

Ekstensi memiliki setiap fitur yang dibutuhkan oleh debugger yang layak, seperti pengaturan breakpoint, menonton variabel, melangkah, Sebuah konsol debug berguna, dan banyak lainnya (lihat daftar fitur rilis pertama).

Untuk menggunakan ekstensi ini, Anda harus memulai Chrome dengan debugging jarak jauh diaktifkan, dan mengatur yang tepat launch.json mengajukan. Yang terakhir ini mungkin memakan waktu cukup lama, tetapi Anda dapat menemukan instruksi terperinci tentang GitHub tentang cara melakukannya dengan benar.
JSHint

Ekstensi JSHint Visual Studio Code mengintegrasikan linter JSHint JavaScript populer langsung ke editor kode, jadi Anda bisa Diberitahu tentang kesalahan Anda segera setelah Anda melakukan mereka. Secara default, ekstensi JSHint menggunakan opsi default linter yang dapat Anda sesuaikan dengan bantuan file konfigurasi.

Penggunaan ekstensi ini cukup mudah, karena JSHint menandai kesalahan dengan warna merah, dan pemberitahuan dengan garis bawah hijau. Jika Anda ingin informasi lebih lanjut tentang masalah ini, arahkan kursor ke bagian yang digarisbawahi, dan JSHint akan mengapungkan label dengan deskripsi masalah sekaligus.
Cuplikan Kode jQuery

Potongan Kode jQuery dapat sangat mempercepat pengembangan front-end dalam Visual Studio Code, karena memungkinkan Anda dengan cepat menulis jQuery tanpa kesalahan sintaks dasar. Cuplikan Kode jQuery Saat ini sudah ada 130 cuplikan yang tersedia Anda dapat memohon dengan mengetik pemicu yang tepat.

Semua cuplikan jQuery kecuali satu, dimulai dengan jq awalan. Satu-satunya pengecualian adalah func memicu itu menyisipkan fungsi anonim ke dalam editor.

Ekstensi praktis ini adalah bantuan yang mudah digunakan ketika Anda tidak sepenuhnya yakin tentang sintaksis yang tepat, dan ingin meluangkan waktu untuk memeriksa dokumentasi. Ini juga memudahkan untuk menggulir dengan cepat opsi yang tersedia.
Punjung

Ekstensi Bower VS Code dapat membuat alur kerja pengembangan web Anda lebih intuitif dengan mengintegrasikan manajer paket Bower ke dalam Visual Studio Code.

Jika Anda menggunakan ekstensi ini, gunakan Anda tidak harus bolak-balik antara terminal dan editor, tetapi Anda dapat dengan mudah melakukan tugas manajemen paket Anda tepat di dalam Visual Studio Code.

Perpanjangan Bower menuntun Anda melalui pembuatan proyek Anda bower.json file, dan Anda juga dapat menginstal, mencopot, mencari, memperbarui paket, mengelola cache, dan melakukan banyak tugas lain dengannya (lihat daftar fitur lengkap).

Kamu bisa mengakses perintah terkait Bower dengan memulai Palet Perintah dengan menekan F1, mengetik “Punjung” ke dalam bilah masukan, klik pada “Punjung” pilihan dalam daftar dropdown yang muncul, dan memilih perintah Bower yang sesuai.
Sejarah Git

Git History memungkinkan ikuti perubahan proyek Git di dalam Visual Studio Code. Ekstensi ini sangat berguna ketika Anda ingin berkontribusi pada proyek Github yang lebih besar, dan perlu cara untuk cepat memeriksa modifikasi yang dibuat pengembang lain.

Dengan ekstensi Git History yang terpasang, Anda dapat melakukannya lihat sejarah seluruh file, atau jalur tertentu di dalamnya. Anda juga bisa bandingkan versi sebelumnya dari file yang sama.

Anda dapat mengakses perintah yang terkait dengan Git History jika Anda mengetikkan kata “Git” ke dalam Palet Perintah (F1), pilih “Git” di dalam daftar dropdown, dan akhirnya pilih perintah yang Anda butuhkan. Catat itu Anda perlu membuka file di mana Anda ingin melihat riwayat sebelum Anda dapat melakukan tindakan apa pun padanya.