8 Pelanjutan Kod Studio Visual yang kuat untuk Pemaju Barisan hadapan

Walaupun Microsoft mengeluarkan versi stabil Visual Studio Code yang pertama, editor kod kuatnya hanya beberapa bulan yang lalu, menjelang Mac 2016, ia sudah mempunyai banyak sambungan yang boleh mengambil pengalaman pengekodan ke peringkat seterusnya. The sambungan Visual Studio Kod rasmi dihoskan di Visual Studio Code Marketplace, banyak yang boleh menjadi pertolongan besar untuk pemaju web.

Untuk jawatan ini, saya telah menguji sekumpulan sambungan VS Code yang berkaitan dengan pembangunan front-end, dan membuat senarai mereka yang paling banyak saya temui intuitif, mudah digunakan dan mudah. Ia bukan senarai muktamad oleh semua. Luangkan waktu untuk melayari pasaran untuk diri sendiri, dan lihat apa lagi yang boleh ditawarkan kepada anda, terutamanya kerana banyak pelanjutan hebat belum sampai.

Cara Pasang Pelanjutan Kod VS

Memasang lanjutan cukup jelas dalam Visual Studio Code, seperti yang anda boleh lakukan dalam editor kod. Dalam VS Code Marketplace setiap lanjutan mempunyai laman sendiri, dan anda boleh mencari arahan yang anda boleh pasang lanjutan yang diberikan dengan di atas halaman ini.

Perintah selalu bermula dengan pemasangan pas terma. Untuk memasang pelanjutan, hanya tekan CTRL + P di dalam Kod VS untuk memulakan panel Pantas Terbuka, copy-paste arahan ini ke dalamnya, dan akhirnya mulakan semula editor kod untuk membuat kerja lanjutan baru.

8 Sambungan Kod Visual Studio yang kuat

Cetakan HTML

Jika anda ingin menulis HTML secara kerap dalam Kod Visual Studio, pelanjutan Snippet HTML boleh datang sebagai alat yang berguna, kerana ia menambah sokongan rumit untuk HTML. Walaupun Kod VS mempunyai sokongan asas untuk HTML, seperti pewarna sintaks, Sambungan HTML Snippet tahu lebih banyak lagi.

Mungkin ciri yang paling berguna dalam pelanjutan ini ialah apabila anda mula menaip nama tag HTML (tanpa pendakap sudut permulaan), Snipet HTML dengan cepat memaparkan senarai dari pilihan yang tersedia dengan maklumat pendek tentang setiap.

Apabila anda mengklik pada elemen yang anda perlukan, Snippet HTML menambah tag HTML5 penuh dengan sifatnya yang paling umum. Sebagai contoh, jika anda mahu menambah pautan (tanda anchor) ke dokumen anda, hanya taipkan a ke dalam Kod VS, pilih pilihan yang betul dalam kotak pop timbul, dan Snippet HTML akan memasukkan yang diperlukan coretan ke dalam editor anda tanpa sebarang masalah.

Penulis pelanjutan ini juga memberi perhatian untuk menghapus unsur-unsur yang tidak diulang, jadi jika anda ingin menggunakan tag HTML yang tidak dapat anda temukan dalam senarai popup, patut diperiksa apakah masih sah atau tidak.
Penyempurnaan Kelas CSS HTML

Penyempurnaan Kelas CSS HTML boleh menjadi lanjutan yang berguna jika anda perlu menggunakan banyak Kelas CSS dalam projek anda. Ia sering berlaku kepada kami pemaju, bahawa kita tidak pasti dengan nama kelas yang tepat, tetapi ia hanya duduk di belakang minda kita sebagai pengetahuan pasif.

Sambungan pintar ini memberikan penyelesaian untuk masalah ini, kerana ia mengambil nama semua kelas CSS di ruang kerja semasa, dan memaparkan senarai tentang mereka.

Katakan, anda ingin membuat laman web menggunakan Yayasan Zurb, dan anda mahu menggunakan grid kecil. Anda tidak ingat bagaimana kelasnya dinamakan, tetapi anda tahu mereka mempunyai nama semantik.

Dengan Penyelesaian Kelas CSS HTML, anda hanya perlu mula menaip perkataan kecil, dan pilihan yang tersedia muncul pada skrin anda sekaligus, jadi anda boleh memilih yang anda perlukan dengan mudah.
Lihat dalam Penyemak Imbas

Lihat dalam Penyemak Imbas adalah lanjutan yang mudah tetapi berkuasa untuk Kod Visual Studio. Ia boleh memudahkan pembangunan front-end dengan membenarkan anda lihat dengan pantas hasil kerja anda dalam penyemak imbas semasa pengekodan. Anda boleh membuka fail HTML anda dalam penyemak imbas lalai anda secara langsung dari Kod VS dengan menekan butang CTRL + F1 pintasan papan kekunci.

Perhatikan bahawa Lihat dalam Penyemak Imbas hanya menyokong HTML, jadi jika anda ingin melihat tapak anda, anda perlu membuka fail HTML. Anda tidak dapat mengakses penyemak imbas secara terus dari fail CSS atau JavaScript.
Debugger untuk Chrome

Debugger untuk Chrome dibina oleh Microsoft sendiri, dan pada masa ini ia merupakan lanjutan kod Visual Studio yang paling diminati ke-4.

Debugger untuk Chrome membolehkannya debug JavaScript dalam Google Chrome tanpa meninggalkan editor kod. Ini bermakna anda tidak perlu bekerjasama dengan JavaScript yang disebarkan oleh penyemak imbas yang dilihat, tetapi anda boleh laksanakan debugging kanan dari fail sumber asal. Lihat demo ini untuk melihat bagaimana ia berfungsi.

Pelanjutan ini mempunyai setiap ciri yang memerlukan debugger yang baik, seperti penetapan breakpoint, menonton pembolehubah, melangkah, a konsol debug berguna, dan banyak lagi (lihat senarai ciri pelepasan pertama).

Untuk menggunakan sambungan ini anda perlu memulakan Chrome dengan debugging jauh diaktifkan, dan sediakan yang betul launch.json fail. Yang terakhir ini mungkin mengambil sedikit masa, tetapi anda boleh mendapatkan arahan terperinci mengenai GitHub tentang cara melakukannya dengan betul.
JSHint

Sambungan JSHint Visual Studio Kod mengintegrasikan pintar JSHint JavaScript popular masuk ke editor kod, supaya anda boleh dimaklumkan tentang kesilapan anda sebaik sahaja anda membuatnya. Secara lalai, sambungan JSHint menggunakan pilihan lalai pencipta yang boleh anda suaikan dengan bantuan fail konfigurasi.

Penggunaan pelanjutan ini agak mudah, kerana JSHint menandakan kesilapan dengan merah, dan pemberitahuan dengan garis bawah hijau. Sekiranya anda mahukan maklumat lebih lanjut tentang isu-isu, cuma hover ke atas bahagian yang digariskan, dan JSHint akan mengapungkan label dengan keterangan masalah sekaligus.
Snipet Kod jQuery

Snipet Kod jQuery boleh mempercepatkan pembangunan front-end dalam Visual Studio Code, kerana ia membolehkan anda dengan cepat menulis jQuery tanpa kesilapan sintaks dasar. Snipet Kod jQuery kini ada 130 potongan yang ada anda boleh memanggil dengan menaip pencetus yang betul.

Semua coretan jQuery tetapi satu permulaan dengan jq awalan. Satu pengecualian ialah func mencetuskannya menyisipkan fungsi anonim ke dalam editor.

Pelanjutan berguna ini adalah bantuan yang mudah apabila anda tidak benar-benar yakin tentang sintaks yang betul, dan ingin meluangkan masa untuk memeriksa dokumentasi. Ia juga menjadikannya mudah untuk menatal dengan pilihan yang tersedia.
Bower

Pelanjutan Kod Bower VS boleh membuat aliran kerja pembangunan web anda lebih intuitif dengan mengintegrasikan pengurus pakej Bower ke dalam Visual Studio Code.

Jika anda meletakkan pelanjutan ini untuk menggunakan anda tidak perlu bertukar-tukar antara terminal dan editor, tetapi anda boleh melaksanakan tugas pengurusan pakej dengan mudah di dalam Visual Studio Code.

Lanjutan Bower membawa anda melalui penciptaan projek anda bower.json fail, dan anda juga boleh memasang, menyahpasang, mencari, mengemas kini pakej, mengurus cache, dan melaksanakan banyak tugas lain dengannya (lihat senarai ciri penuh).

Awak boleh akses arahan yang berkaitan dengan Bower dengan memulakan Palette Command dengan menekan F1, menaip “Bower” ke dalam bar input, klik pada “Bower” pilihan dalam senarai jatuh turun yang muncul, dan memilih arahan Bower yang sesuai.
Sejarah Git

Sejarah Git membolehkannya ikuti perubahan projek Git di dalam Visual Studio Code. Pelanjutan ini sangat berguna apabila anda ingin menyumbang kepada projek Github yang lebih besar, dan memerlukan satu cara untuk memeriksa dengan cepat pengubahsuaian yang dibuat oleh pemaju lain.

Dengan pelanjutan Sejarah Git dipasang, anda boleh lihat sejarah daripada keseluruhan fail, atau a garis tertentu di dalamnya. Anda juga boleh bandingkan versi terdahulu fail yang sama.

Anda boleh mengakses arahan yang berkaitan dengan Sejarah Git jika anda menaip perkataan “Git” ke Palette Command (F1), pilih “Git” dalam senarai jatuh turun, dan akhirnya pilih arahan yang anda perlukan. Perhatikan bahawa anda perlu membuka fail tersebut yang mana anda mahu melihat sejarah sebelum anda boleh melakukan apa-apa tindakan di atasnya.