Artikel ini meringkaskan dan mengesyorkan beberapa pemalam bahagian hadapan praktikal dalam VSCode Saya harap ia akan membantu semua orang!

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

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


inden-pelangi
- Nama pemalam:
indent-rainbow
- Fungsi: Inden Pelangi

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

Pemeriksa Ejaan Kod
- Nama pemalam:
Code Spell Checker
- Fungsi: Periksa sama ada perkataan itu dieja dengan salah (menyokong Bahasa Inggeris)

Pelari Kod
- Nama Pemalam:
Code Runner
- Fungsi: Pelaksanaan satu klik pelbagai kod bahasa (biasa digunakan untuk ujian)

Penyahpepijat untuk Chrome
- Nama pemalam:
Debugger for Chrome
- Fungsi: Hidup bahagian VSCode, kod nyahpepijat

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

Pratonton Svg
- Nama pemalam:
Svg Preview
- Fungsi: Anda boleh memaparkan gambar SVG anda dan mengeditnya

Tabnine
- Nama pemalam:
Tabnine
- Fungsi: Kod gesaan pintar, boleh meramalkan Gesaan untuk kod yang akan anda tulis

Penukar Rentetan Templat
- Nama pemalam:
Template String Converter
- Fungsi: Masukkan $ dalam rentetan untuk mencetus dan menukar rentetan menjadi templat rentetan aksara

vskod-pigmen
- Nama pemalam:
vscode-pigments
- fungsi : Pratonton masa nyata bagi warna yang ditetapkan

Petunjuk Parameter
- Nama pemalam:
Parameter Hints
- Fungsi: Jenis dan mesej parameter fungsi gesaan

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)

Serlahkan Tag Padanan
- Palam- dalam nama:
Highlight Matching Tag
- Fungsi: Apabila kursor kekal pada teg, teg yang sepadan akan diserlahkan

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



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

- Pelengkapan automatik gaya sebaris dan menyokong lonjakan dan pratonton pembolehubah SASS.

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

Kelas tema
Dracula Official
- Palam -dalam nama:
vscode-styled-components

One Dark Pro
- Nama pemalam:
One Dark Pro

ikon vskod
- Nama pemalam:
vscode-icons
-
VSCode
Ikon Folder & Fail

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

Lukisan cat

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
)
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
)
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!