Walaupun terdapat banyak IDE bahagian hadapan, seperti vim, notepad, sublime text3, atom..., semua orang tahu siapa IDE terkuat di bumi, jadi saya sudah tentu tidak perlu berkata lebih lanjut.
Saya adalah pengguna yang telah menggunakan VSCode selama lebih daripada 7 tahun Saya mula menggunakan VSCode dari tahun pertama apabila ia dikeluarkan secara rasmi Sehingga kini, saya adalah pengguna senior dan produktiviti gila.
Artikel ini terutamanya memperkenalkan beberapa pemalam yang baik yang telah saya gunakan dalam proses menggunakan VSCode selama ini. [Kajian yang disyorkan: "Pengenalan kepada Tutorial vscode"]
Ramai orang mengadu bahawa VSCode telanjang tidak mudah digunakan, sama seperti Obsidian telanjang Intipati mereka terletak pada pengembangan (orang Cina suka panggil ia Plug-in, kesemuanya akan dipanggil plug-in di bawah). VSCode yang disediakan dengan baik tidak lain adalah Swiss Army Knife, artifak produktiviti.
Baiklah, mari mulakan!
Sentuh untuk ikan
Nugget
Yang pertama sudah tentu.
Sebagai pemain senior Nugget, jika anda tidak tahu cara bermain Nugget dalam VSCode, bagaimana anda boleh berani untuk mengatakan bahawa anda berada di kalangan bahagian hadapan?
Ini ialah tema gelap:
![[Atur dan kongsi] 50 pemalam VSCode praktikal, datang dan kumpulkannya untuk digunakan!](https://img.php.cn/upload/image/614/559/926/166191461384516%5BAtur%20dan%20kongsi%5D%2050%20pemalam%20VSCode%20praktikal,%20datang%20dan%20kumpulkannya%20untuk%20digunakan! "166191461384516[Atur dan kongsi] 50 pemalam VSCode praktikal, datang dan kumpulkannya untuk digunakan!")
Ini ialah tema terang:
![[Atur dan kongsi] 50 pemalam VSCode praktikal, datang dan kumpulkannya untuk digunakan!](https://img.php.cn/upload/image/965/993/429/166191462326572%5BAtur%20dan%20kongsi%5D%2050%20pemalam%20VSCode%20praktikal,%20datang%20dan%20kumpulkannya%20untuk%20digunakan! "166191462326572[Atur dan kongsi] 50 pemalam VSCode praktikal, datang dan kumpulkannya untuk digunakan!")
Ini adalah halaman artikel :
![[Atur dan kongsi] 50 pemalam VSCode praktikal, datang dan kumpulkannya untuk digunakan!](https://img.php.cn/upload/image/121/575/107/166191463252546%5BAtur%20dan%20kongsi%5D%2050%20pemalam%20VSCode%20praktikal,%20datang%20dan%20kumpulkannya%20untuk%20digunakan! "166191463252546[Atur dan kongsi] 50 pemalam VSCode praktikal, datang dan kumpulkannya untuk digunakan!")
Terdapat juga mod sembang, mod Zen dan fungsi lain, datang dan alaminya!
![[Atur dan kongsi] 50 pemalam VSCode praktikal, datang dan kumpulkannya untuk digunakan!](https://img.php.cn/upload/image/997/984/878/166191464171118%5BAtur%20dan%20kongsi%5D%2050%20pemalam%20VSCode%20praktikal,%20datang%20dan%20kumpulkannya%20untuk%20digunakan! "166191464171118[Atur dan kongsi] 50 pemalam VSCode praktikal, datang dan kumpulkannya untuk digunakan!")
Alamat muat turun: marketplace.visualstudio.com/items?itemN…
Likou
Anda boleh log masuk ke akaun Likou anda dan membaca soalan serta menulis penyelesaian terus dalam VSCode!
![[Atur dan kongsi] 50 pemalam VSCode praktikal, datang dan kumpulkannya untuk digunakan!](https://img.php.cn/upload/image/463/514/225/1661914659981149.gif "1661914659981149.gif")
Alamat muat turun: marketplace.visualstudio.com/items?itemN…
Little Overlord
Ingin bermain permainan dalam VSCode? Ia boleh dilakukan!
Tetapi saya tidak bermain permainan dan saya tidak mengesyorkan bermain permainan semasa waktu bekerja. Boleh sapu Nugget atau dunk kuat-kuat.
![[Atur dan kongsi] 50 pemalam VSCode praktikal, datang dan kumpulkannya untuk digunakan!](https://img.php.cn/upload/image/202/166/267/1661914672794651.gif "1661914672794651.gif")
Alamat muat turun: marketplace.visualstudio.com/items?itemN…
Kelas Pengalaman Kod
copilot
Artifak segera kod, sejak saya menggunakan itu, saya pada asasnya tidak menggunakan tangan saya semasa menulis kod.
Lihat, saya memasukkan f, dan ia telah memikirkan semua yang saya mahu lakukan, termasuk nama fungsi, parameter dan jenis parameter.
Kelemahannya ialah kadangkala kekok dan mengenakan bayaran.
![[Atur dan kongsi] 50 pemalam VSCode praktikal, datang dan kumpulkannya untuk digunakan!](https://img.php.cn/upload/image/894/670/143/166191550165271%5BAtur%20dan%20kongsi%5D%2050%20pemalam%20VSCode%20praktikal,%20datang%20dan%20kumpulkannya%20untuk%20digunakan! "166191550165271[Atur dan kongsi] 50 pemalam VSCode praktikal, datang dan kumpulkannya untuk digunakan!")
Alamat muat turun: marketplace.visualstudio.com/items?itemN…
Tabnine
Fungsi tabnine dan copilot sangat serupa. Ia juga berdasarkan AI untuk membantu kami melengkapkan kod secara automatik.
Walau bagaimanapun, tabnine lebih mahal sedikit daripada copilot, tetapi ia juga mempunyai lebih banyak fungsi. Anda boleh memilih antara
dan copilot, tetapi saya membeli kedua-duanya.
Alamat muat turun: marketplace.visualstudio.com/items?itemN…
turbo-console-log
Saya ingin bertanya kepada pelajar yang menulis JS, apakah kod yang paling banyak kita tulis? Kemudian console.log pasti ada dalam senarai!
Dengan pemalam ini, anda hanya perlu mengalihkan kursor ke atas pembolehubah untuk dicetak, tekan ctrl pilihan l dan console.log akan dimasukkan secara automatik pada baris seterusnya dan nama fail, nombor baris, pembolehubah nama, dsb. Saya telah membawa semua maklumat bersama saya, bukankah ia mudah?
![[Atur dan kongsi] 50 pemalam VSCode praktikal, datang dan kumpulkannya untuk digunakan!](https://img.php.cn/upload/image/820/222/381/166191551079906%5BAtur%20dan%20kongsi%5D%2050%20pemalam%20VSCode%20praktikal,%20datang%20dan%20kumpulkannya%20untuk%20digunakan! "166191551079906[Atur dan kongsi] 50 pemalam VSCode praktikal, datang dan kumpulkannya untuk digunakan!")
Alamat muat turun: marketplace.visualstudio.com/items?itemN…
indent-pelangi
Lekukan pelangi, apabila struktur sarang kod kami lebih kompleks, ia boleh membantu kami menyemak penguncian. Setiap inden mempunyai warna pelangi berselang-seli yang berbeza.
![[Atur dan kongsi] 50 pemalam VSCode praktikal, datang dan kumpulkannya untuk digunakan!](https://img.php.cn/upload/image/916/507/665/166191552085689%5BAtur%20dan%20kongsi%5D%2050%20pemalam%20VSCode%20praktikal,%20datang%20dan%20kumpulkannya%20untuk%20digunakan! "166191552085689[Atur dan kongsi] 50 pemalam VSCode praktikal, datang dan kumpulkannya untuk digunakan!")
Alamat muat turun: marketplace.visualstudio.com/items?itemN…
indent-pelangi- palet
Palet warna kecerunan inden pelangi. Jika anda menggunakan inden pelangi tetapi ingin menggunakan warna kecerunan lain, maka anda memerlukan pemalam ini! Ia kini menyokong 16 warna kecerunan.
![[Atur dan kongsi] 50 pemalam VSCode praktikal, datang dan kumpulkannya untuk digunakan!](https://img.php.cn/upload/image/754/859/117/166191553799665%5BAtur%20dan%20kongsi%5D%2050%20pemalam%20VSCode%20praktikal,%20datang%20dan%20kumpulkannya%20untuk%20digunakan! "166191553799665[Atur dan kongsi] 50 pemalam VSCode praktikal, datang dan kumpulkannya untuk digunakan!")
Alamat muat turun: marketplace.visualstudio.com/items?itemN…
highlight-matching- tag
tag diserlahkan. Apabila kami mempunyai struktur DOM yang kompleks, kami boleh menggunakan pemalam ini untuk menyerlahkan teg penutup, dengan itu menghalang kami daripada membuat beberapa kesilapan peringkat rendah.
![[Atur dan kongsi] 50 pemalam VSCode praktikal, datang dan kumpulkannya untuk digunakan!](https://img.php.cn/upload/image/738/406/625/166191554827889%5BAtur%20dan%20kongsi%5D%2050%20pemalam%20VSCode%20praktikal,%20datang%20dan%20kumpulkannya%20untuk%20digunakan! "166191554827889[Atur dan kongsi] 50 pemalam VSCode praktikal, datang dan kumpulkannya untuk digunakan!")
Alamat muat turun: marketplace.visualstudio.com/items?itemN…
vscode-colorize
Sorotan warna.
Serlahkan pembolehubah warna dengan mengisinya dengan warna latar belakang.
Menyokong CSS:
![[Atur dan kongsi] 50 pemalam VSCode praktikal, datang dan kumpulkannya untuk digunakan!](https://img.php.cn/upload/image/406/415/382/166191587689008%5BAtur%20dan%20kongsi%5D%2050%20pemalam%20VSCode%20praktikal,%20datang%20dan%20kumpulkannya%20untuk%20digunakan! "166191587689008[Atur dan kongsi] 50 pemalam VSCode praktikal, datang dan kumpulkannya untuk digunakan!")
Juga menyokong JavaScript:
![6-[Atur dan kongsi] 50 pemalam VSCode praktikal, datang dan kumpulkannya untuk digunakan!](https://img.php.cn/upload/image/142/667/457/166191587228520%5BAtur%20dan%20kongsi%5D%2050%20pemalam%20VSCode%20praktikal,%20datang%20dan%20kumpulkannya%20untuk%20digunakan! "166191587228520[Atur dan kongsi] 50 pemalam VSCode praktikal, datang dan kumpulkannya untuk digunakan!")
Ia juga menyokong semua jenis fail , anda hanya perlu mengkonfigurasinya.
Alamat muat turun: marketplace.visualstudio.com/items?itemN…
vscode-todo-highlight
Item tugasan diserlahkan.
Dalam proses menulis kod, kami sering mendapati beberapa perkara yang perlu dilakukan dan pepijat yang perlu diperbaiki, tetapi kami tidak mempunyai masa untuk menyelesaikannya sekarang, jadi kami akan menulis ulasan. Untuk membuat komen ini sukar diabaikan, kita boleh menggunakan pemalam ini.
Ia akan menyerlahkan kata kunci TODO dan FIXME secara lalai.
Kami juga boleh mengkonfigurasi kata kunci lain dan menetapkan warna sorotan.
![[Atur dan kongsi] 50 pemalam VSCode praktikal, datang dan kumpulkannya untuk digunakan!](https://img.php.cn/upload/image/209/824/362/166191588878983%5BAtur%20dan%20kongsi%5D%2050%20pemalam%20VSCode%20praktikal,%20datang%20dan%20kumpulkannya%20untuk%20digunakan! "166191588878983[Atur dan kongsi] 50 pemalam VSCode praktikal, datang dan kumpulkannya untuk digunakan!")
Alamat muat turun: marketplace.visualstudio.com/items?itemN…
komen yang lebih baik
Penyertaan anotasi.
Pemalam ini membantu kami memasukkan lebih banyak ulasan mesra pengguna ke dalam kod.
Selain TODO dan FIXME, ia juga boleh menentukan beberapa jenis untuk ulasan.
![[Atur dan kongsi] 50 pemalam VSCode praktikal, datang dan kumpulkannya untuk digunakan!](https://img.php.cn/upload/image/805/677/195/166191589935204%5BAtur%20dan%20kongsi%5D%2050%20pemalam%20VSCode%20praktikal,%20datang%20dan%20kumpulkannya%20untuk%20digunakan! "166191589935204[Atur dan kongsi] 50 pemalam VSCode praktikal, datang dan kumpulkannya untuk digunakan!")
Kami juga boleh menyesuaikan jenis ulasan lain.
Alamat muat turun: marketplace.visualstudio.com/items?itemN…
vscode-import-cost
Tunjukkan saiz pakej yang diimport.
Apabila kami menulis projek JavaScript, kami akan mengimport banyak perpustakaan.
Pemalam ini boleh membantu kami menyemak saiz pakej yang diimport.
![[Atur dan kongsi] 50 pemalam VSCode praktikal, datang dan kumpulkannya untuk digunakan!](https://img.php.cn/upload/image/998/390/926/1661915909982580.png "1661915909982580.png")
Alamat muat turun: marketplace.visualstudio.com/items?itemN…
auto-tutup- tag
menutup teg secara automatik.
Apabila kita memasukkan <div>, ia secara automatik akan menambah kurungan berikut. <p>Walaupun ia adalah fungsi yang sangat mudah, ia adalah satu keperluan! </p>
<p><img src="https://img.php.cn/upload/image/191/846/797/166191622632230%5BAtur%20dan%20kongsi%5D%2050%20pemalam%20VSCode%20praktikal,%20datang%20dan%20kumpulkannya%20untuk%20digunakan!" title="166191622632230[Atur dan kongsi] 50 pemalam VSCode praktikal, datang dan kumpulkannya untuk digunakan!" alt="[Atur dan kongsi] 50 pemalam VSCode praktikal, datang dan kumpulkannya untuk digunakan!"></p>
<p>Alamat muat turun: <a href="https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag" target="_blank" textvalue="marketplace.visualstudio.com/items?itemN…">marketplace.visualstudio.com/items?itemN…</a></p>
<p><strong><span style="font-size: 16px;">kod-eja- penyemak</span></strong></p>
<p>Pemeriksa ralat ejaan. </p>
<p>Apabila kami menulis kod, kadangkala perkataan akan tersalah eja ini boleh menyemak kemungkinan perkataan yang salah eja dan mempunyai peringatan baris beralun. </p>
<p>Ia menyokong tatatanda sarung unta. </p>
<p><img src="https://img.php.cn/upload/image/744/455/624/166191670658301%5BAtur%20dan%20kongsi%5D%2050%20pemalam%20VSCode%20praktikal,%20datang%20dan%20kumpulkannya%20untuk%20digunakan!" title="166191670658301[Atur dan kongsi] 50 pemalam VSCode praktikal, datang dan kumpulkannya untuk digunakan!" alt="1[Atur dan kongsi] 50 pemalam VSCode praktikal, datang dan kumpulkannya untuk digunakan!"></p>
<p>Alamat muat turun: <a href="https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker" target="_blank" textvalue="marketplace.visualstudio.com/items?itemN…">marketplace.visualstudio.com/items?itemN…</a></p>
<p><strong><span style="font-size: 16px;">path-intellisense</span></strong></p>
<p> Kesedaran laluan pintar boleh membantu kami menambah nama fail secara automatik. </p>
<p><img src="https://img.php.cn/upload/image/345/662/845/166191673873924%5BAtur%20dan%20kongsi%5D%2050%20pemalam%20VSCode%20praktikal,%20datang%20dan%20kumpulkannya%20untuk%20digunakan!" title="166191673873924[Atur dan kongsi] 50 pemalam VSCode praktikal, datang dan kumpulkannya untuk digunakan!" alt="1[Atur dan kongsi] 50 pemalam VSCode praktikal, datang dan kumpulkannya untuk digunakan!"></p>
<p>Alamat muat turun: <a href="https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense" target="_blank" textvalue="marketplace.visualstudio.com/items?itemN…">marketplace.visualstudio.com/items?itemN…</a></p>
<p><strong><span style="font-size: 16px;">Togol Petikan</span></strong></p>
<p>Rentetan JavaScript boleh menyokong tiga bentuk, petikan tunggal, petikan berganda dan sudut tajam Kadangkala apabila kita ingin menyambungkan rentetan, kita perlu menukar petikan tunggal atau petikan berganda untuk tanduk . Untuk menggunakan pemalam ini, hanya tekan kekunci pintasan <code>cmd '.
![[Atur dan kongsi] 50 pemalam VSCode praktikal, datang dan kumpulkannya untuk digunakan!](https://img.php.cn/upload/image/195/689/298/1661916745527778.gif "1661916745527778.gif")
Alamat muat turun: marketplace.visualstudio.com/items?itemN…
Penukar Rentetan Templat
Ia boleh menukar rentetan templat JavaScript secara automatik.
Tidak seperti ToggleQuotes, ia diselesaikan secara automatik.
Alamat muat turun: marketplace.visualstudio.com/items?itemN…
IntelliSense untuk kelas CSS Petua pintar autolengkap untuk nama dalam kelas
HTML.
Alamat muat turun: marketplace.visualstudio.com/items?itemN…
Tailwind CSS IntelliSense
tailwind Petua pintar pelengkapan automatik CSS.
Jika anda menggunakan tailwind CSS, anda boleh melumpuhkan IntelliSense untuk nama kelas CSS dalam HTML.
Alamat muat turun: marketplace.visualstudio.com/items?itemN…
npm Intellisense
Pemalam ini Ia boleh membantu kami mengesan modul yang akan diimport dengan bijak.
Ia akan lengkap secara automatik apabila kami menaip import.
Alamat muat turun: marketplace.visualstudio.com/items?itemN…
change-case
Kadangkala kami ingin mengubah suai peraturan penamaan pembolehubah, seperti sempang, garis bawah, semua huruf besar, dsb.
Pemalam ini boleh membantu kami mengubah suai nama pembolehubah.
Nampaknya tidak berguna untuk hanya mengubah suai nama berubah. Tetapi kelebihannya ialah ia boleh mengubah suai banyak nama pembolehubah pada masa yang sama.
![1[Atur dan kongsi] 50 pemalam VSCode praktikal, datang dan kumpulkannya untuk digunakan!](https://img.php.cn/upload/image/835/837/885/166191688314982%5BAtur%20dan%20kongsi%5D%2050%20pemalam%20VSCode%20praktikal,%20datang%20dan%20kumpulkannya%20untuk%20digunakan! "166191688314982[Atur dan kongsi] 50 pemalam VSCode praktikal, datang dan kumpulkannya untuk digunakan!")
Alamat muat turun: marketplace.visualstudio.com/items?itemN…
Komen Bersarang
Komen bersarang sentiasa menjadi masalah.
Kerana ulasan bersarang akan digabungkan dengan permulaan ulasan pertama untuk membentuk ulasan yang sah, dan bahagian berikut akan diabaikan.
![1[Atur dan kongsi] 50 pemalam VSCode praktikal, datang dan kumpulkannya untuk digunakan!](https://img.php.cn/upload/image/107/523/302/166191700220068%5BAtur%20dan%20kongsi%5D%2050%20pemalam%20VSCode%20praktikal,%20datang%20dan%20kumpulkannya%20untuk%20digunakan! "166191700220068[Atur dan kongsi] 50 pemalam VSCode praktikal, datang dan kumpulkannya untuk digunakan!")
Pemalam ini boleh membantu kami menukar ulasan bersarang kepada aksara, dan kemudian memulihkan ulasan bersarang apabila kami menyahsekat ulasan luar.
Alamat muat turun: marketplace.visualstudio.com/items?itemN…
Auto Rename Tag
Namakan semula tag secara automatik Anda boleh mengubah suainya di hadapan atau di belakang, dan ia akan diubah suai secara serentak.
![[Atur dan kongsi] 50 pemalam VSCode praktikal, datang dan kumpulkannya untuk digunakan!](https://img.php.cn/upload/image/958/795/146/1661916951506888.gif "1661916951506888.gif")
Alamat muat turun: marketplace.visualstudio.com/items?itemN…
ES7 React/Redux /React-Native coretan
Pemalam ini menyediakan ES7/React/Redux/React-Native dan coretan kod lain.
Anda boleh membuat kod templat dengan cepat dan meningkatkan kecekapan pembangunan kami.
Sebagai contoh, gunakan React's useState Hook, yang boleh menukar kaedah penamaan kotak unta setXXX secara automatik dan melompat ke kedudukan kursor secara automatik.
Alamat muat turun: marketplace.visualstudio.com/items?itemN…
ESLint
Pemalam ini menyepadukan ESLint ke dalam VSCode Kami boleh menyemak kod ruang kerja melalui pemalam ini.
Alamat muat turun: marketplace.visualstudio.com/items?itemN…
Lebih Cantik
Palam yang sangat klasik -dalam, pemalam ini boleh memformatkan pelbagai kandungan fail.
![[Atur dan kongsi] 50 pemalam VSCode praktikal, datang dan kumpulkannya untuk digunakan!](https://img.php.cn/upload/image/684/117/510/1661917024972973.gif "1661917024972973.gif")
Alamat muat turun: marketplace.visualstudio.com/items?itemN…
Glean
Ia boleh mengekstrak JSX kompleks ke dalam komponen atau fail berasingan, yang sangat berguna semasa pemfaktoran semula.
![[Atur dan kongsi] 50 pemalam VSCode praktikal, datang dan kumpulkannya untuk digunakan!](https://img.php.cn/upload/image/875/560/356/1661917044791891.gif "1661917044791891.gif")
Alamat muat turun: marketplace.visualstudio.com/items?itemN…
htmltagwrap
Pemalam ini sangat berguna apabila kita perlu membungkus teg DOM tertentu.
Kita boleh memilih teg DOM dan kemudian menahan Pilihan w untuk mencipta teg di lapisan luar.
![[Atur dan kongsi] 50 pemalam VSCode praktikal, datang dan kumpulkannya untuk digunakan!](https://img.php.cn/upload/image/271/956/565/166191705574005%5BAtur%20dan%20kongsi%5D%2050%20pemalam%20VSCode%20praktikal,%20datang%20dan%20kumpulkannya%20untuk%20digunakan! "166191705574005[Atur dan kongsi] 50 pemalam VSCode praktikal, datang dan kumpulkannya untuk digunakan!")
Alamat muat turun: marketplace.visualstudio.com/items?itemN…
Versi Lens
Anda boleh menyemak versi terkini pakej npm yang bergantung kepada projek dan naik taraf kepada versi terkini.
![2[Atur dan kongsi] 50 pemalam VSCode praktikal, datang dan kumpulkannya untuk digunakan!](https://img.php.cn/upload/image/198/683/647/166191706438233%5BAtur%20dan%20kongsi%5D%2050%20pemalam%20VSCode%20praktikal,%20datang%20dan%20kumpulkannya%20untuk%20digunakan! "166191706438233[Atur dan kongsi] 50 pemalam VSCode praktikal, datang dan kumpulkannya untuk digunakan!")
Alamat muat turun: marketplace.visualstudio.com/items?itemN…
Lapar Padam
Pemalam ini membantu kami memadamkan berbilang baris kosong dengan satu klik.
Tahan Pilihan Padam untuk memadam berbilang baris kosong.
![[Atur dan kongsi] 50 pemalam VSCode praktikal, datang dan kumpulkannya untuk digunakan!](https://img.php.cn/upload/image/343/161/498/166191726443903%5BAtur%20dan%20kongsi%5D%2050%20pemalam%20VSCode%20praktikal,%20datang%20dan%20kumpulkannya%20untuk%20digunakan! "166191726443903[Atur dan kongsi] 50 pemalam VSCode praktikal, datang dan kumpulkannya untuk digunakan!")
Alamat muat turun: marketplace.visualstudio.com/items?itemN…
Tampal JSON sebagai Kod
Apabila kami menyalin sekeping JSON dan ingin menjana struktur JSON yang sepadan berdasarkan sekeping JSON ini, kami boleh menggunakan pemalam ini.
Ia menyokong banyak bahasa pengaturcaraan, seperti TypeScript, Python, Go, Java, dll.
![2[Atur dan kongsi] 50 pemalam VSCode praktikal, datang dan kumpulkannya untuk digunakan!](https://img.php.cn/upload/image/992/801/944/166191727385914%5BAtur%20dan%20kongsi%5D%2050%20pemalam%20VSCode%20praktikal,%20datang%20dan%20kumpulkannya%20untuk%20digunakan! "166191727385914[Atur dan kongsi] 50 pemalam VSCode praktikal, datang dan kumpulkannya untuk digunakan!")
Alamat muat turun: marketplace.visualstudio.com/items?itemN…
Dot Env
Sama ada projek bahagian hadapan atau projek bahagian belakang, kebanyakannya menggunakan fail .env untuk menyimpan pembolehubah persekitaran.
Pemalam ini boleh menyerlahkan fail .env.
![2[Atur dan kongsi] 50 pemalam VSCode praktikal, datang dan kumpulkannya untuk digunakan!](https://img.php.cn/upload/image/559/196/165/166191728146707%5BAtur%20dan%20kongsi%5D%2050%20pemalam%20VSCode%20praktikal,%20datang%20dan%20kumpulkannya%20untuk%20digunakan! "166191728146707[Atur dan kongsi] 50 pemalam VSCode praktikal, datang dan kumpulkannya untuk digunakan!")
Alamat muat turun: marketplace.visualstudio.com/items?itemN…
Kelas tema
Dracula Official
Tema rasmi Dracula, yang paling Salah satu tema klasik dan kegemaran saya.
![2[Atur dan kongsi] 50 pemalam VSCode praktikal, datang dan kumpulkannya untuk digunakan!](https://img.php.cn/upload/image/792/903/739/166191729093262%5BAtur%20dan%20kongsi%5D%2050%20pemalam%20VSCode%20praktikal,%20datang%20dan%20kumpulkannya%20untuk%20digunakan! "166191729093262[Atur dan kongsi] 50 pemalam VSCode praktikal, datang dan kumpulkannya untuk digunakan!")
Alamat muat turun: marketplace.visualstudio.com/items?itemN…
Tema Bahan
Tema Bahan menyediakan tema gaya Bahan untuk menjadikan kod kelihatan lebih sejuk.
![2[Atur dan kongsi] 50 pemalam VSCode praktikal, datang dan kumpulkannya untuk digunakan!](https://img.php.cn/upload/image/558/220/357/166191729850170%5BAtur%20dan%20kongsi%5D%2050%20pemalam%20VSCode%20praktikal,%20datang%20dan%20kumpulkannya%20untuk%20digunakan! "166191729850170[Atur dan kongsi] 50 pemalam VSCode praktikal, datang dan kumpulkannya untuk digunakan!")
Alamat muat turun: marketplace.visualstudio.com/items?itemN…
One Dark Pro
Jika anda pengguna Atom atau pembangun yang menyukai tema Atom, anda boleh mencuba pemalam tema ini.
![2[Atur dan kongsi] 50 pemalam VSCode praktikal, datang dan kumpulkannya untuk digunakan!](https://img.php.cn/upload/image/177/412/650/166191730674928%5BAtur%20dan%20kongsi%5D%2050%20pemalam%20VSCode%20praktikal,%20datang%20dan%20kumpulkannya%20untuk%20digunakan! "166191730674928[Atur dan kongsi] 50 pemalam VSCode praktikal, datang dan kumpulkannya untuk digunakan!")
Alamat muat turun: marketplace.visualstudio.com/items?itemN…
ikon vskod
Apabila kita menyemak imbas folder, jika terdapat ikon di hadapan fail, ia akan menjadi sangat mudah untuk membezakannya.
Pemalam Ikon VSCode ada di sini untuk melakukan perkara itu!
Struktur direktori lalai VSCode kelihatan seperti ini:
![[Atur dan kongsi] 50 pemalam VSCode praktikal, datang dan kumpulkannya untuk digunakan!](https://img.php.cn/upload/image/962/395/250/166191731934724%5BAtur%20dan%20kongsi%5D%2050%20pemalam%20VSCode%20praktikal,%20datang%20dan%20kumpulkannya%20untuk%20digunakan! "166191731934724[Atur dan kongsi] 50 pemalam VSCode praktikal, datang dan kumpulkannya untuk digunakan!")
Selepas menggunakan Ikon VSCode, ikon menjadi seperti ini:
![[Atur dan kongsi] 50 pemalam VSCode praktikal, datang dan kumpulkannya untuk digunakan!](https://img.php.cn/upload/image/189/102/589/1661917331718903.gif "1661917331718903.gif")
Alamat muat turun: marketplace.visualstudio.com/items?itemN…
ikon fail
Satu lagi pemalam tema ikon.
![3[Atur dan kongsi] 50 pemalam VSCode praktikal, datang dan kumpulkannya untuk digunakan!](https://img.php.cn/upload/image/241/689/846/166191733878895%5BAtur%20dan%20kongsi%5D%2050%20pemalam%20VSCode%20praktikal,%20datang%20dan%20kumpulkannya%20untuk%20digunakan! "166191733878895[Atur dan kongsi] 50 pemalam VSCode praktikal, datang dan kumpulkannya untuk digunakan!")
Alamat muat turun: Marketplace.visualstudio.com/items?itemn ...
Tema ikon bahan hampir hampir hampir Ia adalah pemalam tema ikon yang paling komprehensif.
Menyokong begitu banyak jenis fail:
![3[Atur dan kongsi] 50 pemalam VSCode praktikal, datang dan kumpulkannya untuk digunakan!](https://img.php.cn/upload/image/231/502/560/166191734638345%5BAtur%20dan%20kongsi%5D%2050%20pemalam%20VSCode%20praktikal,%20datang%20dan%20kumpulkannya%20untuk%20digunakan! "166191734638345[Atur dan kongsi] 50 pemalam VSCode praktikal, datang dan kumpulkannya untuk digunakan!")
Menyokong begitu banyak jenis folder:
![3[Atur dan kongsi] 50 pemalam VSCode praktikal, datang dan kumpulkannya untuk digunakan!](https://img.php.cn/upload/image/173/589/365/166191735599786%5BAtur%20dan%20kongsi%5D%2050%20pemalam%20VSCode%20praktikal,%20datang%20dan%20kumpulkannya%20untuk%20digunakan! "166191735599786[Atur dan kongsi] 50 pemalam VSCode praktikal, datang dan kumpulkannya untuk digunakan!")
Alamat muat turun:
marketplace.visualstudio.com/items?itemN…
Alat
todo-tree
todo tree boleh mengurus projek melalui ulasan TODO dan FIXME.
Kami boleh melihat fail beranotasi dengan cepat.
![3[Atur dan kongsi] 50 pemalam VSCode praktikal, datang dan kumpulkannya untuk digunakan!](https://img.php.cn/upload/image/305/551/288/166191736298137%5BAtur%20dan%20kongsi%5D%2050%20pemalam%20VSCode%20praktikal,%20datang%20dan%20kumpulkannya%20untuk%20digunakan! "166191736298137[Atur dan kongsi] 50 pemalam VSCode praktikal, datang dan kumpulkannya untuk digunakan!")
Alamat muat turun:
marketplace.visualstudio.com/items?itemN…
vscode-peacock Apabila kami menjalankan berbilang tetingkap VSCode pada masa yang sama, kami boleh menetapkan warna yang berbeza untuk setiap tetingkap untuk membezakan projek yang berbeza. Warna yang disokong secara lalai ialah Angular red, Microsoft blue, JS yellow, mandalorian blue, Node green, React blue, dsb.
![3[Atur dan kongsi] 50 pemalam VSCode praktikal, datang dan kumpulkannya untuk digunakan!](https://img.php.cn/upload/image/834/669/380/166191746092826%5BAtur%20dan%20kongsi%5D%2050%20pemalam%20VSCode%20praktikal,%20datang%20dan%20kumpulkannya%20untuk%20digunakan! "166191746092826[Atur dan kongsi] 50 pemalam VSCode praktikal, datang dan kumpulkannya untuk digunakan!")
Alamat muat turun: ![3[Atur dan kongsi] 50 pemalam VSCode praktikal, datang dan kumpulkannya untuk digunakan!](https://img.php.cn/upload/image/317/971/640/166191746766064%5BAtur%20dan%20kongsi%5D%2050%20pemalam%20VSCode%20praktikal,%20datang%20dan%20kumpulkannya%20untuk%20digunakan! "166191746766064[Atur dan kongsi] 50 pemalam VSCode praktikal, datang dan kumpulkannya untuk digunakan!")
marketplace.visualstudio.com/items?itemN…
Quokka.js
Apabila kami ingin mengesahkan sekeping kod JS atau TS dengan cepat, kami boleh menggunakan pemalam ini. Ia menyediakan taman permainan untuk mengesahkan logik kod dengan lebih baik.
Pautan muat turun: ![3[Atur dan kongsi] 50 pemalam VSCode praktikal, datang dan kumpulkannya untuk digunakan!](https://img.php.cn/upload/image/285/618/546/166191748395604%5BAtur%20dan%20kongsi%5D%2050%20pemalam%20VSCode%20praktikal,%20datang%20dan%20kumpulkannya%20untuk%20digunakan! "166191748395604[Atur dan kongsi] 50 pemalam VSCode praktikal, datang dan kumpulkannya untuk digunakan!")
marketplace.visualstudio.com/items?itemN…
rest-client
Terdapat banyak cara untuk menguji API, seperti PostMan kelas berat dan keriting ringan. Tetapi tiada satu pun daripada mereka yang begitu mudah digunakan dalam VSCode. REST Client ialah pemalam yang baik yang boleh membantu kami menguji API dalam VSCode dengan mudah.
Muat turun alamat:
Marketplace.visualstudio.com/items?itemn, ![3[Atur dan kongsi] 50 pemalam VSCode praktikal, datang dan kumpulkannya untuk digunakan!](https://img.php.cn/upload/image/713/818/502/166191749182181%5BAtur%20dan%20kongsi%5D%2050%20pemalam%20VSCode%20praktikal,%20datang%20dan%20kumpulkannya%20untuk%20digunakan! "166191749182181[Atur dan kongsi] 50 pemalam VSCode praktikal, datang dan kumpulkannya untuk digunakan!")
EditorConfig untuk vs kod
Apabila projek kami dibangunkan dengan berbilang alat editor, jika anda ingin menyatukan gaya kod, anda perlu mengkonfigurasi fail konfigurasi alat yang berbeza. Alat ini membolehkan kami menjadikan peraturan ini biasa dalam semua editor dengan menulis hanya satu .editorconfig. Alamat muat turun: marketplace.visualstudio.com/items?itemN…
Git Lens
Walaupun VSCode Terdapat fungsi Git terbina dalam, tetapi ia tidak cukup kuat. Git Lens menambah fungsi git Kita boleh melihat maklumat penyerahan dalam setiap baris kod Ia juga boleh membandingkan perbezaan Komit yang berbeza dan beberapa fungsi Git yang berguna.
Alamat muat turun:
marketplace.visualstudio.com/items?itemN…
![3[Atur dan kongsi] 50 pemalam VSCode praktikal, datang dan kumpulkannya untuk digunakan!](https://img.php.cn/upload/image/688/689/922/166191749821408%5BAtur%20dan%20kongsi%5D%2050%20pemalam%20VSCode%20praktikal,%20datang%20dan%20kumpulkannya%20untuk%20digunakan! "166191749821408[Atur dan kongsi] 50 pemalam VSCode praktikal, datang dan kumpulkannya untuk digunakan!")
Buka dalam GitHub
Anda boleh membuka projek, fail, Tindakan, PR, dsb. dengan cepat dalam Github.
![[Atur dan kongsi] 50 pemalam VSCode praktikal, datang dan kumpulkannya untuk digunakan!](https://img.php.cn/upload/image/553/306/282/166191750572398%5BAtur%20dan%20kongsi%5D%2050%20pemalam%20VSCode%20praktikal,%20datang%20dan%20kumpulkannya%20untuk%20digunakan! "166191750572398[Atur dan kongsi] 50 pemalam VSCode praktikal, datang dan kumpulkannya untuk digunakan!")
Alamat muat turun: marketplace.visualstudio.com/items?itemN…
buka dalam penyemak imbas
Menyokong membuka fail HTML dengan cepat dalam penyemak imbas.
Klik kanan pada fail HTML, akan ada dua pilihan dalam menu, atau gunakan kekunci pintasan yang sepadan.
![4[Atur dan kongsi] 50 pemalam VSCode praktikal, datang dan kumpulkannya untuk digunakan!](https://img.php.cn/upload/image/730/311/614/166191751310985%5BAtur%20dan%20kongsi%5D%2050%20pemalam%20VSCode%20praktikal,%20datang%20dan%20kumpulkannya%20untuk%20digunakan! "166191751310985[Atur dan kongsi] 50 pemalam VSCode praktikal, datang dan kumpulkannya untuk digunakan!")
Alamat muat turun: marketplace.visualstudio.com/items?itemN…
Pelayan Langsung
Apabila kami mengubah suai kandungan html dan mahu penyemak imbas konsisten dengan kod, kami memerlukan pemalam ini.
Ia akan memulakan pelayan secara setempat, memantau perubahan fail dan menyegarkan penyemak imbas.
Klik kanan pada fail HTML, akan ada dua pilihan dalam menu, atau gunakan kekunci pintasan yang sepadan.
![4[Atur dan kongsi] 50 pemalam VSCode praktikal, datang dan kumpulkannya untuk digunakan!](https://img.php.cn/upload/image/609/708/338/166191752050181%5BAtur%20dan%20kongsi%5D%2050%20pemalam%20VSCode%20praktikal,%20datang%20dan%20kumpulkannya%20untuk%20digunakan! "166191752050181[Atur dan kongsi] 50 pemalam VSCode praktikal, datang dan kumpulkannya untuk digunakan!")
Alamat muat turun: marketplace.visualstudio.com/items?itemN…
Pratonton Langsung
Ia boleh pratonton HTML dalam VSCode dalam masa nyata.
Tetapi ia tidak menyokong aplikasi yang dibangunkan dengan rangka kerja seperti React dan Angular.
![4[Atur dan kongsi] 50 pemalam VSCode praktikal, datang dan kumpulkannya untuk digunakan!](https://img.php.cn/upload/image/572/772/120/166191753225798%5BAtur%20dan%20kongsi%5D%2050%20pemalam%20VSCode%20praktikal,%20datang%20dan%20kumpulkannya%20untuk%20digunakan! "166191753225798[Atur dan kongsi] 50 pemalam VSCode praktikal, datang dan kumpulkannya untuk digunakan!")
Alamat muat turun: marketplace.visualstudio.com/items?itemN…
Pengurus Projek
Apabila kami mempunyai berbilang projek, kami boleh mengurus projek melalui pemalam ini dan bertukar dengan cepat antara projek, teg dan fungsi lain.
![4[Atur dan kongsi] 50 pemalam VSCode praktikal, datang dan kumpulkannya untuk digunakan!](https://img.php.cn/upload/image/579/109/358/166191754023255%5BAtur%20dan%20kongsi%5D%2050%20pemalam%20VSCode%20praktikal,%20datang%20dan%20kumpulkannya%20untuk%20digunakan! "166191754023255[Atur dan kongsi] 50 pemalam VSCode praktikal, datang dan kumpulkannya untuk digunakan!")
Alamat muat turun: marketplace.visualstudio.com/items?itemN…
Kongsi Langsung
Adakah anda mahu berkongsi kod anda dengan orang lain untuk pengeditan dan penyahpepijatan kerjasama masa nyata? Pemalam ini boleh berkongsi projek yang dibangunkan dalam mana-mana bahasa pengaturcaraan atau sebarang jenis projek dengan orang lain. Pihak lain boleh menulis kod terus dalam persekitaran anda tanpa memasang sebarang persekitaran tambahan atau SDK.
Anda juga boleh mengedit secara kolaboratif terus di web!
![4[Atur dan kongsi] 50 pemalam VSCode praktikal, datang dan kumpulkannya untuk digunakan!](https://img.php.cn/upload/image/311/148/955/166191754779493%5BAtur%20dan%20kongsi%5D%2050%20pemalam%20VSCode%20praktikal,%20datang%20dan%20kumpulkannya%20untuk%20digunakan! "166191754779493[Atur dan kongsi] 50 pemalam VSCode praktikal, datang dan kumpulkannya untuk digunakan!")
Alamat muat turun: marketplace.visualstudio.com/items?itemN…
Markdown PDF
Walaupun namanya ialah PDF markdown, markdown sebenarnya boleh dieksport ke fail dalam pelbagai format.
Menyokong begitu banyak format eksport.
![4[Atur dan kongsi] 50 pemalam VSCode praktikal, datang dan kumpulkannya untuk digunakan!](https://img.php.cn/upload/image/561/305/504/166191755549105%5BAtur%20dan%20kongsi%5D%2050%20pemalam%20VSCode%20praktikal,%20datang%20dan%20kumpulkannya%20untuk%20digunakan! "166191755549105[Atur dan kongsi] 50 pemalam VSCode praktikal, datang dan kumpulkannya untuk digunakan!")
Alamat muat turun: marketplace.visualstudio.com/items?itemN…
Markdown Pratonton Penggayaan Github
Pratonton Fail Markdown dalam gaya Github.
![4[Atur dan kongsi] 50 pemalam VSCode praktikal, datang dan kumpulkannya untuk digunakan!](https://img.php.cn/upload/image/530/540/707/166191756421376%5BAtur%20dan%20kongsi%5D%2050%20pemalam%20VSCode%20praktikal,%20datang%20dan%20kumpulkannya%20untuk%20digunakan! "166191756421376[Atur dan kongsi] 50 pemalam VSCode praktikal, datang dan kumpulkannya untuk digunakan!")
Alamat muat turun: marketplace.visualstudio.com/items?itemN…
Ringkasan
Saya telah memperkenalkan begitu banyak, pergi dan bina IDE yang paling pantas, paling stabil dan paling sesuai untuk anda!
Jika artikel ini membantu anda, sila like.
Jika anda mempunyai pemalam VSCode yang lebih praktikal dan berharga, sila tinggalkan mesej di ruangan komen.
Untuk pengetahuan lanjut tentang VSCode, sila lawati: tutorial vscode!
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
