22 pemalam VSCode yang baik untuk pembangunan web (kongsi)

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"]

1

https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome

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.

Jika anda ingin mengetahui lebih lanjut, anda boleh membaca:

Menyahpepijat JavaScript dalam Chrome dan Kod Visual Studio.

https://scotch.io/tutorials /debugging-javascript-in-google-chrome-and-visual-studio-code

2. Coretan Kod Javascript (ES6)

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

https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-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.

4. Pelayan langsung

https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer

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

https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer

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!

6. Teg Nama Automatik

https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag

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!

7. Quokka

https://marketplace.visualstudio.com/items?itemName=WallabyJs.quokka-vscode

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!

8. Path Intellisense

https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense

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

9. Pengurus Projek

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.

10. Konfigurasi Editor

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.

11. Peta Kunci Teks Sublime

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?

12. Pratonton Penyemak Imbas

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!

13. Git Lens

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!

14 Polacode

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!

15 Lebih Cantik

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.

16 Komen yang Lebih Baik

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!

17 Pautan Git

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.

18. Ikon Kod VS

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!

19. Tema Ikon Bahan

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!

20 Penyegerakan Tetapan

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.

21. Menjajarkan Lebih Baik

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!

22. VIM

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!