Beranda>Terkait pemrograman>Kode Sumber AI
Unduh

WXML - Layanan Bahasa

Pembaruan terkini 【CHANGELOG.md】

@iChenLei telah mengambil alih pemeliharaan plugin ini. Setiap orang dipersilakan untuk memberikan komentar di grup DingTalk atau masalah Github.

Fungsi utama

  • Buat komponen program mini dengan satu klik
  • Nama tag dan pelengkapan otomatis atribut
  • Berdasarkan properti komponen yang ada, kumpulan properti terkait yang didukung akan difilter secara otomatis.
  • Penyelesaian otomatis nilai atribut
  • Klik fungsi atau atribut dalam file template untuk melompat ke tempat di mana js/ts didefinisikan (hanya didukung oleh file wxml atau pug murni, tidak sepenuhnya didukung oleh file vue)
  • Penyelesaian otomatis nama gaya (hanya didukung oleh file wxml atau pug murni, tidak sepenuhnya didukung oleh file vue)
  • Itu juga dapat diselesaikan secara otomatis dalam file template vue dan mendukung bahasa pug.
  • Tautan dukungan (hanya didukung oleh file wxml atau pug murni, tidak didukung oleh file vue)
  • Penyelesaian otomatis komponen khusus (hanya didukung oleh file wxml murni, tidak didukung oleh file vue atau pug)
  • Menyorot variabel js dalam file template (hanya didukung oleh file wxml atau pug murni, tidak didukung oleh file vue)
  • Cuplikan bawaan
  • Mendukung metode penulisan emmet
  • pemformatan wxml

Semua data template yang diisi secara otomatis berasal dari dokumen resmi dan diperoleh secara otomatis melalui skrip.

Buat komponen program mini dengan satu klik

  • Klik kanan untuk melihat opsi New Miniprogram Component . Masukkan nama komponen untuk membuat folder .wxml / .js / .wxss / .json dan komponen dengan satu klik
  • Buka file js secara otomatis setelah pembuatan berhasil
  • Membuat komponen mendukung konfigurasi akhiran css/wxml/js, misalnya, proyek menggunakan less/vue/ts 
 {
  "minapp-vscode.cssExtname" : "less" , // 默认 wxss，支持 styl sass scss less css
  "minapp-vscode.wxmlExtname" : "vue" , // 默认 wxml，支持 vue wpy
  "minapp-vscode.jsExtname" : "ts" // 默认 js，支持 ts coffee
}

Nama tag dan nama atribut dilengkapi secara otomatis

  • Di wxml, Anda perlu memasukkan < untuk memicu penyelesaian tag, sedangkan dalam bahasa pug, Anda hanya perlu menulis awal tag untuk memicu penyelesaian tag.
  • Memasukkan spasi akan memicu penyelesaian atribut dari tag terkait.

Berdasarkan properti komponen yang ada, kumpulan properti terkait yang didukung akan difilter secara otomatis.

  • Saat memilih mode = "pemilih", terdapat atribut range dan range-key
  • Saat pemilih mode = "waktu", ada atribut start dan end .

Penyelesaian nilai atribut secara otomatis (penyelesaian hanya akan dipicu jika ada nilai opsional)

  • Hal ini dapat dipicu dengan memasukkan spasi pada nilai atribut, dan spasi tersebut akan secara otomatis ditimpa setelah selesai.

Klik fungsi atau atribut dalam file template untuk melompat ke tempat di mana js/ts didefinisikan (hanya didukung oleh file wxml atau pug murni, tidak sepenuhnya didukung oleh file vue)

Fungsinya belum sempurna, hanya akan mencari file script dengan nama yang sama dengan template saat ini, sehingga definisi di JS mungkin tidak ditemukan.

Penyelesaian otomatis nama gaya (hanya didukung oleh file wxml atau pug murni, tidak sepenuhnya didukung oleh file vue)

Sistem akan secara otomatis mendapatkan semua nama gaya dalam file gaya dengan nama yang sama dengan templat saat ini, dan juga dapat memperoleh dokumen di /** */ pada nama gaya; jika ada gaya global, Anda perlu menggunakan konfigurasi item minapp-vscode.globalStyleFiles ditentukan.

  • Secara default, nama file gaya akan diperoleh dengan nama yang sama dengan template saat ini.

    Catatan: Jika file gaya @import file gaya lain, program tidak akan mendapatkan nama gaya dalam file yang diimpor.

  • Selain itu, Anda dapat menggunakan minapp-vscode.globalStyleFiles untuk menentukan beberapa file gaya global, sehingga nama gaya dalam file ini juga akan muncul setelah memasukkan class=""

    App.wxss dari program mini umumnya bergaya global, jadi Anda perlu menentukannya secara manual melalui konfigurasi ini, seperti mengonfigurasi minapp-vscode.globalStyleFiles: ["src/app.wxss"]

  • Selain itu, Anda juga dapat menggunakan minapp-vscode.styleExtensions untuk menentukan akhiran file gaya yang digunakan oleh sistem.

    Disarankan untuk mengonfigurasi item ini. Sistem akan mencari file gaya dengan berbagai sufiks secara default. Untuk menghindari kehilangan kinerja yang tidak perlu, yang terbaik adalah mengonfigurasinya ke sufiks yang digunakan dalam proyek!

Catatan: File gaya penyusunan huruf indentasi seperti sass tidak didukung.

Itu juga dapat diselesaikan secara otomatis dalam file template vue dan mendukung bahasa pug.

Papan templat di vue mendukung dua properti:

  1. lang dapat diatur ke "wxml" atau "pug" untuk menunjukkan bahasa yang digunakan ( menentukan atribut lang dalam kerangka mirip vue dapat menyebabkan kesalahan kompilasi. Anda dapat menggunakan xlang sebagai gantinya, tetapi ini akan menyebabkan penyelesaian vue dan minapp di waktu yang sama )
  2. minapp dapat diatur ke "native" , "wepy" , "mpx" atau "mpvue" , ​​menunjukkan kerangka kerja yang digunakan, defaultnya adalah "mpvue"

menyukai:

  • <template lang="wxml" minapp="native"> berarti menggunakan bahasa wxml tanpa menggunakan framework apa pun
  • <template lang="pug" minapp="mpvue"> berarti menggunakan bahasa pug dan menggunakan framework mpvue

Perhatikan bahwa menentukan lang="wxml" di mpvue akan melaporkan kesalahan dan Anda harus menunggu hingga penulis memperbaikinya! Namun, Anda dapat menggunakan xlang="wxml" untuk sementara, tetapi ini juga akan memicu penyelesaian otomatis vue.

Menentukan nilai minapp yang berbeda akan memicu penyelesaian otomatis kerangka kerja yang sesuai. Karena saya belum mengembangkan menggunakan wepy dan mpvue, penyelesaian otomatis ini ditambahkan sesuai dengan dokumentasi resmi src/plugin/lib/bahasa.ts)

Tautan dukungan (hanya didukung oleh file wxml atau pug murni, tidak didukung oleh file vue)

  • Secara default, hanya tag src yang akan ditautkan, dan file harus ada, tautan tidak akan ditambahkan.
  • Anda dapat mengonfigurasi minapp-vscode.linkAttributeNames untuk memperluas tag tambahan yang mendukung tautan.
  • minapp-vscode.resolveRoots dapat dikonfigurasi untuk menggunakan direktori relatif untuk menyelesaikan jalur gambar

Penyelesaian otomatis komponen khusus (hanya didukung oleh file wxml murni, tidak didukung oleh file vue atau pug)

  • Dapatkan informasi komponen secara otomatis dalam file json yang sesuai
  • Prioritaskan komponen khusus
  • Dapatkan deskripsi properti dalam komponen secara otomatis

Menyorot variabel js dalam file template (hanya didukung oleh file wxml atau pug murni, tidak didukung oleh file vue)

  • Penyorotan dinonaktifkan secara default. Anda dapat mengonfigurasi minapp-vscode.disableDecorate ke true untuk mengaktifkan penyorotan.
  • Warna sorotan default adalah ungu. Anda dapat mengonfigurasi minapp-vscode.decorateType untuk menggunakan warna favorit Anda, seperti {"color": "red"}
  • Secara default, semua karakter antara "{{" dan "}}" akan disorot. Anda dapat mengonfigurasi minapp-vscode.decorateComplexInterpolation ke false , sehingga hanya variabel (seperti: foo , foo.prop , foo[1] ) yang akan disorot. akan disorot, dan ekspresi (seperti: foo + bar , foo < 3 ) tidak akan disorot dan warna asli akan digunakan.

Untuk mempercepat penguraian, penyorotan warna menggunakan pencocokan ekspresi reguler, sehingga kesalahan pencocokan mungkin terjadi; jika Anda tidak puas, Anda dapat mengonfigurasi minapp-vscode.disableDecorate untuk menonaktifkan fungsi penyorotan warna.

Masalah yang diketahui:

  • Variabel dalam komentar dalam bahasa pug juga akan disorot (pug didasarkan pada lekukan, dan ekspresi reguler tidak mudah ditangani)

Cuplikan bawaan

  • Dilengkapi dengan wiper/icon/button/picker time/picker date/picker region/checkbox-group/radio-group, lihat filenya
  • Anda dapat menentukan cuplikan Anda sendiri melalui item konfigurasi minapp-vscode.snippets

Bedanya dengan Snippet resmi, Snippet disini hanya perlu menentukan key dan body, dan deskripsi komponen akan otomatis didapat berdasarkan key tersebut (selain itu, konfigurasinya nanti bisa digabungkan dengan data bawaan)

Mendukung metode penulisan emmet

lembar contekan emmet

format wxml

Mendukung prettyHtml , js-beautify , dan prettier (beberapa konten perlu ditulis dengan cara yang kompatibel dengan HTML)

  • wxml bawaan 
 "minapp-vscode.wxmlFormatter" : "wxml" , // 指定格式化工具
  • js-mempercantik 
 "minapp-vscode.wxmlFormatter" : "jsBeautifyHtml" , // 指定格式化工具
// 使用 vscode settings.json 中的 `html.format.[配置字段]` 配置字段, 详见下方 tips.4
"minapp-vscode.jsBeautifyHtml" : "useCodeBuiltInHTML" ,
// 使用自定义配置
"minapp-vscode.jsBeautifyHtml" : { // jsBeautify 默认配置
    "content_unformatted" : "text" ,
    "wrap_attributes" : "force" ,
    "indent_size" : 2 ,
    "wrap_attributes_indent_size" : 2 ,
    "void_elements" : "image,input,video" ,
    "indent_scripts" : "keep"
}
  • cantikHtml 
 "minapp-vscode.wxmlFormatter" : "prettyHtml" , // 指定格式化工具
"minapp-vscode.prettyHtml" : { // prettyHtml 默认配置
  "useTabs" : false ,
  "tabWidth" : 2 ,
  "printWidth" : 100 ,
  "singleQuote" : false ,
  "usePrettier" : true ,
  "wrapAttributes" : false , // 设置成 true 强制属性换行
  "sortAttributes" : false
}
  • lebih cantik 
 "minapp-vscode.wxmlFormatter" : "prettier" , // 指定格式化工具
"minapp-vscode.prettier" : { // prettier 更多参考 https://prettier.io/docs/en/options.html
  "useTabs" : false ,
  "tabWidth" : 2 ,
  "printWidth" : 100 ,
  "singleQuote" : false
}
  • tip:
    1. Untuk mode prettyHtml dan prettier , file konfigurasi di bawah proyek akan dibaca secara otomatis, file konfigurasi yang lebih cantik .editorconfig
    2. Beralih alat pemformatan memerlukan memulai ulang VSCode
    3. Untuk prettyHtml , sintaks HTML5 yang diadopsi oleh prettier tidak sepenuhnya konsisten dengan wxml. Harap perhatikan kompatibilitas saat menulis.
    4. Untuk jsBeautifyHtml , ketika nilainya adalah "useCodeBuiltInHTML" , informasi konfigurasi akan dibaca dari dokumen bidang konfigurasi html.format.* dalam konfigurasi vscode dan dikonversi ke konfigurasi js-beautify

Pertanyaan Umum

Pelengkapan otomatis tidak muncul setelah menginstal plugin

  1. Pastikan Anda telah me-restart VSCode setelah instalasi
  2. Pastikan format file saat ini adalah wxml atau wxml-pug atau vue (Anda tidak dapat melihat akhiran file karena mungkin terkait dengan format file lain di file konfigurasi; Anda perlu melihat jenis file yang ditampilkan di bawah sudut kanan vscode)

Dalam proyek non-program mini, file pug tidak menginginkan penyelesaian program mini secara otomatis.

Plugin minapp akan secara otomatis mengaitkan file .pug ke jenis file wxml-pug . Jadi, Anda hanya perlu mengonfigurasi asosiasi file di proyek tertentu.

  • Dalam proyek non-program mini, kaitkan file dengan akhiran .pug ke jenis file pug
  • Dalam proyek program mini, kaitkan file dengan akhiran .pug ke jenis file wxml-pug
Memperluas
Informasi Tambahan
Aplikasi Terkait
Direkomendasikan untuk Anda
Informasi Terkait Semua