[Atur dan kongsi] VSCode mesti memasang pemalam untuk membangunkan projek vue

Artikel ini akan menyusun beberapa VSCode pemalam yang mesti dipasang untuk membangunkan projek vue. Saya harap ia akan membantu semua orang!

Saya menggunakan webstorm untuk membangunkan projek sebelum ini Walaupun webstorm mudah digunakan, ia mempunyai dua kelemahan besar: Pertama, komputer riba yang saya beli tiga tahun lalu mempunyai masalah apabila membuka Projek pada asasnya perlu dimulakan semula setiap hari, dan ia membeku apabila membuka tiga projek Yang kedua dibayar Walaupun terdapat versi retak dalam talian, ia akan menjadi tidak sah sekali-sekala pedih.

Oleh itu, saya memutuskan untuk meninggalkannya dan menggunakan vscode, yang ringan dan percuma, dan nama penuhnya ialah Kod Visual Studio. Selepas banyak hari penerokaan, selepas memasang pemalam dalam vs kod, ia pada dasarnya telah mencapai kesan yang sama seperti webstorm atau pengalaman yang lebih baik daripadanya Mulai sekarang, saya tidak perlu lagi bimbang tentang ketinggalan dan kegagalan. [Pembelajaran yang disyorkan: "tutorial pengenalan vscode"]

Pemasangan dan arahan pemalam

1.简体中文) ) Pek Bahasa untuk Kod Visual Studio

Fungsi: Versi Cina Kod VS

Langkah-langkah pemasangan:

Arahan: Langkah Pemasangan 123 adalah sama untuk mana-mana pemalam Kebanyakan pemalam hanya mempunyai langkah 123. Pemalam ini mempunyai langkah tambahan 4, jadi anda perlu memberi perhatian khusus kepadanya.

2. Ciri Bahasa Vue (Volar)

Fungsi: Fail vue lalai dalam kod vs semuanya mempunyai teks yang sama dan tidak boleh diklik. Pemalam ini membenarkan kandungan fail vue dikodkan warna dan menyokong klik pada fail laluan relatif untuk melompat dan menggayakan kedudukan nama kelas (dengan syarat nama dan gaya kelas mestilah dalam fail yang sama)

3. vue-helper

fungsi: Apabila anda mengklik pada komponen vue, pembolehubah vue atau kaedah vue dalam templat, anda boleh mencari fail atau lokasi yang sepadan Apabila anda klik pada komponen vue, anda boleh melompat ke fail yang sepadan Premisnya ialah komponen dipasang dengan laluan relatif (iaitu pengenalan alias tidak disokong), dan nama komponen adalah sama dengan nama fail komponen. Contohnya, nama fail komponen ialah select.vue, tetapi apabila komponen diperkenalkan, ia tidak boleh diklik Anda perlu menukar nama fail komponen kepada common-select.vue

4 intip

Fungsi: Apabila anda mengklik komponen vue dalam templat, anda boleh melompat ke fail yang sepadan Ia boleh menyokong komponen vue yang diperkenalkan oleh alias. Sebagai contoh, kaedah import ini disokong: import commonSelect daripada '@/components/common-select' yang menebus kekurangan pemalam 3.

5. css peek

Fungsi: menyokong lompat nama kelas silang fail, iaitu nama kelas dan gayanya bukan dalam fail yang sama, membentuk untuk plug-in 2 kekurangan.

6. Alias ​​​​path jump

Fungsi: Menyokong pelarasan kaedah pengenalan fail alias untuk mengimbangi kekurangan pemalam 2 (projek yang tidak menggunakan alias tidak perlu memasangnya)

7 Auto Rename Tag

Fungsi: Namakan semula tag secara automatik, iaitu, ubah suai teg mula dan. tag akhir juga akan diubah suai secara automatik

8 .Pemeriksa Ejaan Kod

Fungsi: Semakan ejaan perkataan, perkataan yang dieja dengan salah akan diingatkan dengan baris beralun

<.>

9. GitLens — Git supercharged

Fungsi: Apabila kursor tetikus kekal pada mana-mana baris kod, maklumat pengubahsuaian git bagi baris kod tersebut akan dipaparkan, yang boleh mengelak dengan berkesan mengambil kesalahan apabila terdapat masalah kod

10 Git Graph

Fungsi: Selepas pemasangan selesai, butang Git Graph akan muncul di sudut kiri bawah. . Klik untuk melihat maklumat terperinci semua komit git dan perubahan jelas dalam kod setiap komit

11 . anda boleh mengkonfigurasi fail untuk diformatkan semasa menyimpan failLangkah: Selepas memasang pemalam, cari setting.json

Salin kod berikut Dua baris pertama diperlukan untuk pemalam, dan dua yang terakhir ialah pemalam 12 dan pemalam 13. Apa yang diperlukan, jika anda tidak memasang pemalam 12. dan 13, anda boleh memadam dua baris terakhir

Jika anda ingin mengkonfigurasi peraturan lain, anda boleh mencipta fail .prettierrc baharu dalam direktori akar projek dan letakkan yang berikut Salin kod, dan maksud setiap baris ialah: 1. Petikan tunggal, 2. Tiada koma dalam elemen terakhir objek, 3. Tiada kurungan apabila fungsi anak panah hanya mempunyai satu parameter, 4. Baris baharu jika lebih daripada 100 aksara.

{
  "editor.formatOnSave": true, // 保存时是否格式化
  "editor.defaultFormatter": "esbenp.prettier-vscode", // 格式化插件
  "editor.tabSize": 2, // tab健空格
  "editor.fontSize": 14, // 字体大小
  "workbench.iconTheme": "vscode-great-icons",
  "workbench.colorTheme": "One Dark Pro"
}

12. VSCode Ikon Hebat

{
  "singleQuote": true,
  "trailingComma": "none",
  "arrowParens": "avoid",
  "printWidth": 100
}

Fungsi: Jadikan struktur projek mempunyai ikon yang sepadan di hadapannya, yang kelihatan lebih cantik (tidak perlu)

13 One Dark Pro

Fungsi: Skin for vs code untuk menjadikan antara muka lebih cantik (tidak perlu)

<.>

14. Markdown Preview Enhanced

Fungsi: Biasanya terdapat fail README.md dalam setiap projek Selepas memasangnya, anda boleh klik kanan pada setiap fail md untuk melihat kesannya

15. koroFileHeader

Fungsi: Terutamanya digunakan untuk komen pengepala fail dan ulasan fungsi, iaitu, menekan kekunci pintasan secara automatik menjana komen yang anda konfigurasikan , jika tiada konfigurasi, anotasi lalai pemalam akan dijana.

Kekunci pintasan ulasan pengepala fail

:window,ctrl win i:macctrl cmd i

Kekunci pintasan ulasan fungsi

:window,ctrl win t:mac, anda perlu meletakkan kursor pada baris fungsi dahulu dan kemudian tekan kekunci pintasan. ctrl cmd t

Dokumentasi konfigurasi: https://github.com/OBKoro1/koro1FileHeader/wiki/Pemasangan dan Mula Pantas

Untuk pengetahuan lanjut tentang VSCode, sila lawati:

vscode tutorial!

Atas ialah kandungan terperinci [Atur dan kongsi] VSCode mesti memasang pemalam untuk membangunkan projek vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!