Artikel ini akan berkongsi dengan anda 22 pemalam VSCode yang bagus dalam pembangunan web untuk membantu pembangun meningkatkan kecekapan pembangunan. Mari lihat!
[Pembelajaran yang disyorkan: "tutorial vskod"]
Percayalah, nyahpepijat JavaScript Jangan hanya tulis console.log() (walaupun ini adalah pendekatan yang paling biasa). Chrome mempunyai beberapa ciri terbina dalam untuk pengalaman penyahpepijatan yang lebih baik. Pemalam ini membolehkan anda menggunakan semua (atau hampir semua) ciri penyahpepijatan ini dalam Kod VS.
2. Coretan Kod Javascript (ES6)Menyahpepijat JavaScript dalam Chrome dan Kod Visual Studio.
https://scotch.io/tutorials /debugging-javascript-in-google-chrome-and-visual-studio-code
Saya suka pemalam Snippet . Saya tidak merasakan keperluan untuk menaip sekeping kod yang sama berulang kali. Pemalam ini memberikan anda coretan kod JavaScript (ES6) yang popular.
Nota... Jika anda tidak menggunakan ciri es6javascript - gunakannya sekarang!
3 ESLint
Ingin menulis kod yang lebih baik? Adakah seluruh pasukan perlu menggunakan format yang konsisten? Pasang ESLint. Pemalam ini boleh dikonfigurasikan untuk memformat kod secara automatik dan "berteriak" dengan ralat atau amaran. Kod VS, dengan konfigurasi yang sesuai, boleh menunjukkan kepada anda petua ini.
Buat perubahan dalam editor kod, tukar kepada penyemak imbas dan muat semula untuk melihat perubahan. Itulah gelung yang tidak berkesudahan untuk pembangun, tetapi bagaimana jika penyemak imbas dimuat semula secara automatik apabila anda membuat perubahan? Di sinilah Pelayan Langsung masuk!
Ia juga menjalankan aplikasi anda pada pelayan tempatan. Sesetengah perkara hanya boleh diuji apabila aplikasi berjalan pada pelayan, jadi itu adalah satu kelebihan.
5. Pasangan Kurungan Colorizor
Kurungan ialah hukuman yang menghalang pembangun daripada terus hidup. Dengan banyak kod bersarang, hampir mustahil untuk menentukan kurungan yang sepadan antara satu sama lain. Bracket Pair Colorizor (seperti yang anda jangkakan) memadankan warna kurungan untuk menjadikan kod lebih mudah dibaca. Percayalah, anda mahukannya!
Perlu menamakan semula elemen dalam HTML? Nah, dengan "Auto Rename Tag", anda hanya perlu menamakan semula teg permulaan atau penamat, dan teg lain akan dinamakan semula secara automatik. Mudah tetapi berkesan!
Perlukan tempat yang pantas untuk menguji beberapa JavaScript? Saya pernah membuka konsol dalam Chrome dan memasukkan beberapa kod di dalamnya, tetapi terdapat banyak kelemahan. Quokka memberi anda pad gores JavaScript (dan TypeScript) dalam Kod VS. Ini bermakna anda boleh menguji sekeping kod dalam editor kegemaran anda!
Dalam projek besar, mungkin menyusahkan untuk mengingati nama fail tertentu dan direktori di mana fail tersebut berada. Pemalam ini akan memberikan anda petua pintar. Apabila anda mula menaip laluan dalam petikan, anda akan melihat gesaan pintar untuk nama direktori dan fail. Ini akan menjimatkan banyak masa anda menyemak imbas fail :)
https://marketplace.visualstudio.com/items?itemName=alefragnani.project-manager
Satu perkara yang saya benci ialah bertukar antara projek dalam Kod VS. Setiap kali saya perlu membuka penjelajah fail dan mencari item pada komputer saya. Tetapi ini berubah dengan aplikasi Pengurus Projek. Menggunakan pemalam ini anda boleh membuka menu tambahan dalam menu sisi projek anda. Anda boleh menukar antara projek dengan cepat, menyimpan kegemaran atau mengesan projek Git secara automatik daripada sistem fail.
Jika anda membangunkan berbilang projek berbeza, ini adalah cara terbaik untuk kekal teratur dan meningkatkan kecekapan.
https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig
Editor Config ialah standard untuk segelintir gaya pengekodan yang disokong dalam editor/IDE teks utama. Cara ia berfungsi adalah seperti berikut. Anda menyimpan fail konfigurasi dalam repositori yang disokong oleh editor anda. Dalam kes ini, anda perlu menambah sambungan pada Kod VS supaya ia menghormati profil ini. Ia sangat mudah untuk disediakan dan sesuai untuk projek pasukan.
https://marketplace.visualstudio.com/items?itemName=ms-vscode.sublime-keybindings
Adakah anda seorang pengguna Sublime yang gemar dan tidak mahu bertukar kepada VS Code? Sambungan ini akan menjadikan suis anda lancar dengan menukar semua pintasan agar sepadan dengan pintasan Sublime. Sekarang, apakah sebab yang anda ada untuk tidak membuat suis?
https://marketplace.visualstudio.com/items?itemName=auchenberg.vscode-browser-preview
Saya suka sambungan Pelayan Langsung (disebutkan di atas), tetapi yang ini melangkah lebih jauh dari segi kemudahan. Ia memberi anda pratonton muat semula secara langsung di dalam Kod VS. Tidak perlu melihat pelayar anda lagi untuk melihat perubahan kecil!
https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens
Terdapat banyak pemalam git, tetapi salah satu daripadanya adalah yang paling berkuasa dan mempunyai fungsi yang paling banyak. Anda mendapat maklumat tentang amaran, sejarah baris dan fail, melakukan carian dan banyak lagi. Jika anda memerlukan bantuan dengan aliran kerja Git anda, mulakan dengan pemalam ini!
https://marketplace.visualstudio.com/items?itemName=pnp.polacode
Anda tahu tangkapan skrin kod cantik yang anda lihat di blog dan di Twitter? Kemungkinan besar mereka datang dari Polacode. Ia sangat mudah untuk digunakan. Salin sekeping kod ke papan keratan anda, buka sambungan, tampal kod dan klik Simpan Imej!
https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
Jangan luangkan masa memformat kod anda...selesai. Terdahulu, saya menyebut ESLint, yang menyediakan pemformatan dan pemeriksaan. Jika anda tidak memerlukan pemeriksaan lint, pergi ke Prettier. Ia sangat mudah untuk disediakan dan boleh dikonfigurasikan untuk memformat kod secara automatik semasa disimpan.
https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments
Pemalam ini mewarnakan pelbagai jenis komen untuk memberi mereka makna yang berbeza dan menonjol daripada kod yang lain. Saya telah menggunakan ini untuk petua. Sukar untuk mengabaikan gesaan oren besar yang memberitahu saya ada kerja yang belum selesai.
Terdapat juga kod warna untuk soalan, makluman dan sorotan. Anda juga boleh menambah yang tersuai anda sendiri!
https://marketplace.visualstudio.com/items?itemName=qezhu.gitlink
Jika anda ingin melihat fail yang sedang anda kerjakan dalam Github, pemalam ini adalah untuk anda. Setelah dipasang, cuma klik kanan pada fail dan anda akan melihat pilihan untuk membuka fail dalam Github. Jika anda tidak menggunakan pemalam Git Lens, pemalam ini bagus untuk menyemak sejarah, versi cawangan, dsb.
https://marketplace.visualstudio.com/items?itemName=robertohuertasm.vscode-icons
Tahukah anda bahawa anda boleh menyesuaikan ikon dalam Kod VS? Jika anda melihat tetapan, anda akan melihat pilihan untuk "Tema Ikon Fail." Dari sana, anda boleh memilih daripada ikon yang diprapasang atau memasang pek ikon. Pemalam ini memberikan anda pek ikon yang sangat comel dan digunakan oleh 11 juta orang!
https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme
Adakah anda peminat reka bentuk Bahan Google? Nah, lihat pek ikon "Tema Bahan" ini. Terdapat beratus-ratus ikon yang berbeza dan ia kelihatan hebat!
https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync
Pembangun (termasuk saya sendiri) menghabiskan banyak masa untuk menyesuaikan persekitaran pembangunan, terutamanya penyunting teks. Menggunakan pemalam "Settings Sync" anda boleh menyimpan tetapan dalam Github. Mereka kemudiannya boleh dimuatkan ke dalam mana-mana versi baharu Kod VS menggunakan satu arahan.
https://marketplace.visualstudio.com/items?itemName=wwm.better-align
Jika anda jenis orang yang sukakan penjajaran sempurna dalam kod anda, maka anda memerlukan Penjajaran Lebih Baik. Anda boleh menyelaraskan berbilang pengisytiharan pembolehubah, ulasan mengekori, coretan kod, dsb. Tiada cara yang lebih baik untuk melihat betapa hebatnya pemalam ini daripada memasangnya dan mencubanya!
https://marketplace.visualstudio.com/items?itemName=vscodevim.vim
Adakah anda pengguna VIM yang mendalam? Jika ya, tahniah, anda telah menguasai semua operasi hebat VIM dan boleh menggunakannya terus dalam Kod VS. Saya secara peribadi tidak hebat dalam hal ini, tetapi saya tahu betapa produktifnya menggunakan VIM untuk potensinya, memberikan anda lebih banyak fungsi.
Alamat asal: https://scotch.io/bar-talk/22-best-visual-studio-code-extensions-for-web-development
Pengarang asal: James Quick
Untuk lebih banyak pengetahuan berkaitan pengaturcaraan, sila lawati: Video Pengaturcaraan! !
Atas ialah kandungan terperinci 22 pemalam VSCode yang baik untuk pembangunan web (kongsi). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
