Artikel ini meringkaskan dan mengesyorkan beberapa pemalam bahagian hadapan praktikal dalam VSCode Saya harap ia akan membantu semua orang!
![Syorkan beberapa pemalam bahagian hadapan praktikal dalam VSCode (ringkasan)](/static/imghw/default1.png)
Cadangkan gelombang pemalam penting untuk pembangunan bahagian hadapan, yang pastinya akan meningkatkan produktiviti anda sekeliling. [Pembelajaran yang disyorkan: "tutorial vskod"]
Syor komprehensif untuk pembangunan
Lompat laluan Alias
plug-in Name: Alias path jump
Arahan penggunaan: Alias path jump plug-in, menyokong sebarang projek,
Senario penggunaan: Bila anda sedang membangunkan halaman, anda ingin mengklik Apabila mengimport komponen melalui laluan alias (demo di bawah)
Arahan konfigurasi
Paparan kesan
![163391840030048Syorkan beberapa pemalam bahagian hadapan praktikal dalam VSCode (ringkasan) Syorkan beberapa pemalam bahagian hadapan praktikal dalam VSCode (ringkasan)](/static/imghw/default1.png)
Path alias smart prompt
- Nama pemalam:
path-alias
- Senario: Apabila mengimport komponen, apabila menggunakan laluan alias tidak berguna (boleh digunakan pada masa yang sama dengan alias lompat laluan, tiada konflik)
- Tutorial penggunaan terperinci (sangat mudah)
Kesan dan fungsi pemasangan
![163391841029769Syorkan beberapa pemalam bahagian hadapan praktikal dalam VSCode (ringkasan) Syorkan beberapa pemalam bahagian hadapan praktikal dalam VSCode (ringkasan)](/static/imghw/default1.png)
![163391841476940Syorkan beberapa pemalam bahagian hadapan praktikal dalam VSCode (ringkasan) Syorkan beberapa pemalam bahagian hadapan praktikal dalam VSCode (ringkasan)](/static/imghw/default1.png)
inden-pelangi
- Nama pemalam:
indent-rainbow
- Fungsi: Inden Pelangi
![163391841910603Syorkan beberapa pemalam bahagian hadapan praktikal dalam VSCode (ringkasan) Syorkan beberapa pemalam bahagian hadapan praktikal dalam VSCode (ringkasan)](/static/imghw/default1.png)
Pewarna Pasangan Kurungan 2
- Nama pemalam:
Bracket Pair Colorizer 2
- Fungsi: Beri padanan kurungan () atau objek { }.. Tambahkan warna yang sepadan untuk membezakan
Auto Rename Tag
- Nama pemalam:
Auto Rename Tag
- Fungsi : Namakan semula tag secara automatik
![163391852072105Syorkan beberapa pemalam bahagian hadapan praktikal dalam VSCode (ringkasan) Syorkan beberapa pemalam bahagian hadapan praktikal dalam VSCode (ringkasan)](/static/imghw/default1.png)
Pemeriksa Ejaan Kod
- Nama pemalam:
Code Spell Checker
- Fungsi: Periksa sama ada perkataan itu dieja dengan salah (menyokong Bahasa Inggeris)
![163391856166557Syorkan beberapa pemalam bahagian hadapan praktikal dalam VSCode (ringkasan) Syorkan beberapa pemalam bahagian hadapan praktikal dalam VSCode (ringkasan)](/static/imghw/default1.png)
Pelari Kod
- Nama Pemalam:
Code Runner
- Fungsi: Pelaksanaan satu klik pelbagai kod bahasa (biasa digunakan untuk ujian)
![163391856672649Syorkan beberapa pemalam bahagian hadapan praktikal dalam VSCode (ringkasan) Syorkan beberapa pemalam bahagian hadapan praktikal dalam VSCode (ringkasan)](/static/imghw/default1.png)
Penyahpepijat untuk Chrome
- Nama pemalam:
Debugger for Chrome
- Fungsi: Hidup bahagian VSCode, kod nyahpepijat
![163391857281935Syorkan beberapa pemalam bahagian hadapan praktikal dalam VSCode (ringkasan) Syorkan beberapa pemalam bahagian hadapan praktikal dalam VSCode (ringkasan)](/static/imghw/default1.png)
Live ServerPP
- Nama pemalam:
Live ServerPP
- Fungsi: Buka fail anda pada bahagian pelayan dan paparkan kod anda yang diubah suai dalam masa nyata
- Menyokong perkhidmatan mesej websocket, yang boleh digunakan untuk menyahpepijat pelanggan websocket
- Menyokong maya boleh atur cara fail, yang boleh digunakan untuk mensimulasikan antara muka API sebelah pelayan
![163391869975899Syorkan beberapa pemalam bahagian hadapan praktikal dalam VSCode (ringkasan) Syorkan beberapa pemalam bahagian hadapan praktikal dalam VSCode (ringkasan)](/static/imghw/default1.png)
Pratonton Svg
- Nama pemalam:
Svg Preview
- Fungsi: Anda boleh memaparkan gambar SVG anda dan mengeditnya
![163391979897895Syorkan beberapa pemalam bahagian hadapan praktikal dalam VSCode (ringkasan) 0-Syorkan beberapa pemalam bahagian hadapan praktikal dalam VSCode (ringkasan)](/static/imghw/default1.png)
Tabnine
- Nama pemalam:
Tabnine
- Fungsi: Kod gesaan pintar, boleh meramalkan Gesaan untuk kod yang akan anda tulis
![163391876616391Syorkan beberapa pemalam bahagian hadapan praktikal dalam VSCode (ringkasan) 1Syorkan beberapa pemalam bahagian hadapan praktikal dalam VSCode (ringkasan)](/static/imghw/default1.png)
Penukar Rentetan Templat
- Nama pemalam:
Template String Converter
- Fungsi: Masukkan $ dalam rentetan untuk mencetus dan menukar rentetan menjadi templat rentetan aksara
![163391882391678Syorkan beberapa pemalam bahagian hadapan praktikal dalam VSCode (ringkasan) 1Syorkan beberapa pemalam bahagian hadapan praktikal dalam VSCode (ringkasan)](/static/imghw/default1.png)
vskod-pigmen
- Nama pemalam:
vscode-pigments
- fungsi : Pratonton masa nyata bagi warna yang ditetapkan
![163391883068624Syorkan beberapa pemalam bahagian hadapan praktikal dalam VSCode (ringkasan) 1Syorkan beberapa pemalam bahagian hadapan praktikal dalam VSCode (ringkasan)](/static/imghw/default1.png)
Petunjuk Parameter
- Nama pemalam:
Parameter Hints
- Fungsi: Jenis dan mesej parameter fungsi gesaan
![163391883697907Syorkan beberapa pemalam bahagian hadapan praktikal dalam VSCode (ringkasan) 1Syorkan beberapa pemalam bahagian hadapan praktikal dalam VSCode (ringkasan)](/static/imghw/default1.png)
Quokka.js
- Nama pemalam :
Quokka.js
- Penggunaan: Selepas memasang pemalam,
ctrl shift p
masukkan Quokka new JavaScr..
untuk menggunakan
- Fungsi: paparkan cetakan dalam masa nyata, dan terokai lebih banyak fungsi sendiri (biasa digunakan untuk ujian)
![1633918842816160.gif 1Syorkan beberapa pemalam bahagian hadapan praktikal dalam VSCode (ringkasan)](/static/imghw/default1.png)
Serlahkan Tag Padanan
- Palam- dalam nama:
Highlight Matching Tag
- Fungsi: Apabila kursor kekal pada teg, teg yang sepadan akan diserlahkan
![163391884841462Syorkan beberapa pemalam bahagian hadapan praktikal dalam VSCode (ringkasan) 1Syorkan beberapa pemalam bahagian hadapan praktikal dalam VSCode (ringkasan)](/static/imghw/default1.png)
Pemalam popular
- pada asasnya tersedia Pemasangan tidak akan diperkenalkan secara terperinci
Pemalam
-
Bookmarks
- Fungsi: Biasa digunakan untuk membaca kod sumber untuk menandakan baris, Lompat (tanda kod lompat cepat)
-
ESLint
- Fungsi: Semakan spesifikasi kod
-
Prettier - Code formatter
- Fungsi: Pengindahan kod, diformat secara automatik ke dalam format piawai
-
Project Manager
- Fungsi: Pemalam pengurusan projek, apabila membangunkan berbilang projek, Boleh melompat dengan pantas
-
Path Intellisense
- Ciri-ciri: Laluan pintar menggesa
-
Image preview
- Fungsi: Apabila laluan import ialah imej, anda boleh pratonton imej semasa
-
GitLens
- Fungsi: Fungsi
git
telah dipertingkatkan untuk menyokong paparan pengarang, masa pengubahsuaian, dsb.
-
open in browser
- Fungsi: Buka fail semasa dalam penyemak imbas
Vue Development Disyorkan
vue-component
- Nama pemalam:
vue-component
- Fungsi: Masukkan nama komponen untuk mengimport komponen yang ditemui secara automatik, mengimport laluan dan komponen secara automatik
- Selepas pemilihan , masukkan nama komponen secara automatik (termasuk atribut yang diperlukan), pernyataan import, atribut komponen
![163391921719220Syorkan beberapa pemalam bahagian hadapan praktikal dalam VSCode (ringkasan) Syorkan beberapa pemalam bahagian hadapan praktikal dalam VSCode (ringkasan)](/static/imghw/default1.png)
![163391922377704Syorkan beberapa pemalam bahagian hadapan praktikal dalam VSCode (ringkasan) Syorkan beberapa pemalam bahagian hadapan praktikal dalam VSCode (ringkasan)](/static/imghw/default1.png)
![163391922887962Syorkan beberapa pemalam bahagian hadapan praktikal dalam VSCode (ringkasan) Syorkan beberapa pemalam bahagian hadapan praktikal dalam VSCode (ringkasan)](/static/imghw/default1.png)
Vetur
- Nama pemalam:
Vetur
- Diperlukan untuk membangunkan Vue
Vue 3 Snippet
Syor pembangunan React
React Style Helper
- Plug- dalam nama:
React Style Helper
- Fungsi: Tulis gaya sebaris dengan lebih pantas dalam
React
dan berikan bantuan hebat untuk CSS, LESS, SASS dan fail gaya lain Fungsi pembangunan
- Autolengkap
- Lompat ke gaya dan lokasi definisi berubah
- Buat gaya sebaris JSX/TSX
- Pratonton gaya dan kandungan berubah
![163391923338401Syorkan beberapa pemalam bahagian hadapan praktikal dalam VSCode (ringkasan) Syorkan beberapa pemalam bahagian hadapan praktikal dalam VSCode (ringkasan)](/static/imghw/default1.png)
- Pelengkapan automatik gaya sebaris dan menyokong lonjakan dan pratonton pembolehubah SASS.
![1633919330901320.gif Syorkan beberapa pemalam bahagian hadapan praktikal dalam VSCode (ringkasan)](/static/imghw/default1.png)
ES7 Reactsnippet
- Nama pemalam:
ES7 React/Redux/React-Native/JS snippets
- Fungsi: Banyak
React
coretan kod, sangat mudah untuk pembangunan
komponen gaya vskod
- Nama pemalam:
vscode-styled-components
- Fungsi: Semasa menulis gaya dalam
JS
fail, ada Petua perisikan
![163391935773352Syorkan beberapa pemalam bahagian hadapan praktikal dalam VSCode (ringkasan) Syorkan beberapa pemalam bahagian hadapan praktikal dalam VSCode (ringkasan)](/static/imghw/default1.png)
Kelas tema
Dracula Official
- Palam -dalam nama:
vscode-styled-components
![163391925722613Syorkan beberapa pemalam bahagian hadapan praktikal dalam VSCode (ringkasan) Syorkan beberapa pemalam bahagian hadapan praktikal dalam VSCode (ringkasan)](/static/imghw/default1.png)
One Dark Pro
- Nama pemalam:
One Dark Pro
![163391926240926Syorkan beberapa pemalam bahagian hadapan praktikal dalam VSCode (ringkasan) Syorkan beberapa pemalam bahagian hadapan praktikal dalam VSCode (ringkasan)](/static/imghw/default1.png)
ikon vskod
- Nama pemalam:
vscode-icons
-
VSCode
Ikon Folder & Fail
![163391926762151Syorkan beberapa pemalam bahagian hadapan praktikal dalam VSCode (ringkasan) Syorkan beberapa pemalam bahagian hadapan praktikal dalam VSCode (ringkasan)](/static/imghw/default1.png)
Syor lain
- Pemalam berikut mungkin tidak biasa digunakan jika anda berminat, anda boleh mencubanya
Nilai Awal CSS
- Nama pemalam:
vscode-icons
- Fungsi: Paparkan nilai awal setiap sifat CSS apabila kursor kekal pada sifat
css
![163391927110859Syorkan beberapa pemalam bahagian hadapan praktikal dalam VSCode (ringkasan) Syorkan beberapa pemalam bahagian hadapan praktikal dalam VSCode (ringkasan)](/static/imghw/default1.png)
Lukisan cat
![1633919504788870.gif 1Syorkan beberapa pemalam bahagian hadapan praktikal dalam VSCode (ringkasan)](/static/imghw/default1.png)
Pemalam Petua Pintar Echars
Nama pemalam: echarts-vscode-extension
Penggunaan: Selepas memasang pemalam, ctrl shift p
masukkan active Echars
untuk membukanya Smart prompt
fungsi: Gesa pelbagai Echar中Option
atribut, sangat berkuasa
![163391928179527Syorkan beberapa pemalam bahagian hadapan praktikal dalam VSCode (ringkasan) 1Syorkan beberapa pemalam bahagian hadapan praktikal dalam VSCode (ringkasan)](https://img.php.cn/upload/image/370/850/563/163391928179527Syorkan%20beberapa%20pemalam%20bahagian%20hadapan%20praktikal%20dalam%20VSCode%20(ringkasan))
Pemalam terjemahan
Pemalam nama: A-super-translate
-
Penggunaan: Pilih baris, Ctrl Shift p untuk memasukkan terjemahan
- Taip ctrl ` dan kemudian tekan ctrl 1 untuk menggantikan terus kawasan yang dipilih untuk terjemahan
-
Fungsi: Terjemah bahagian ulasan dalam kod pengecaman tanpa mengganggu bacaan. Menyokong bahasa yang berbeza, komen satu baris dan berbilang baris,
Ringkasan (dengan gambar semua pemalam)
- Mengikut keperluan anda, anda hanya boleh memasang pemalam yang sepadan (jika anda memasang terlalu banyak pemalam, VSCode akan tersekat)
- Sudah tentu, konfigurasi komputer cukup berkuasa Apabila saya tidak mengatakan
![163391941835956Syorkan beberapa pemalam bahagian hadapan praktikal dalam VSCode (ringkasan) 1Syorkan beberapa pemalam bahagian hadapan praktikal dalam VSCode (ringkasan)](https://img.php.cn/upload/image/521/912/812/163391941835956Syorkan%20beberapa%20pemalam%20bahagian%20hadapan%20praktikal%20dalam%20VSCode%20(ringkasan))
Untuk lebih banyak pengetahuan berkaitan pengaturcaraan, sila lawati. : Video Pengaturcaraan! !
Atas ialah kandungan terperinci Syorkan beberapa pemalam bahagian hadapan praktikal dalam VSCode (ringkasan). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!