minapp vscode

WXML - บริการภาษา

อัพเดทล่าสุด【CHANGELOG.md】

@iChenLei ได้เข้ามาดูแลการบำรุงรักษาปลั๊กอินนี้แล้ว ทุกคนสามารถแสดงความคิดเห็นได้ในกลุ่ม DingTalk หรือปัญหา Github

ฟังก์ชั่นหลัก

• สร้างส่วนประกอบของโปรแกรมขนาดเล็กได้ด้วยคลิกเดียว
• ชื่อแท็กและแอตทริบิวต์การเติมข้อมูลอัตโนมัติ
• ตามคุณสมบัติที่มีอยู่ของส่วนประกอบ ชุดคุณสมบัติที่รองรับที่เกี่ยวข้องจะถูกกรองออกโดยอัตโนมัติ
• ค่าแอตทริบิวต์เติมอัตโนมัติ
• คลิกฟังก์ชันหรือแอตทริบิวต์ในไฟล์เทมเพลตเพื่อข้ามไปยังตำแหน่งที่กำหนด js/ts (รองรับเฉพาะไฟล์ wxml หรือ pug เท่านั้น ไม่รองรับไฟล์ vue อย่างสมบูรณ์)
• การเติมชื่อสไตล์อัตโนมัติ (รองรับเฉพาะไฟล์ wxml หรือ pug ล้วนๆ เท่านั้น ไม่รองรับไฟล์ vue อย่างสมบูรณ์)
• นอกจากนี้ยังสามารถดำเนินการให้เสร็จสมบูรณ์โดยอัตโนมัติในไฟล์เทมเพลต vue และรองรับภาษาปั๊ก
• ลิงก์สนับสนุน (รองรับเฉพาะไฟล์ wxml หรือ pug เท่านั้น ไม่รองรับไฟล์ vue)
• การทำให้ส่วนประกอบที่กำหนดเองสมบูรณ์โดยอัตโนมัติ (รองรับเฉพาะไฟล์ wxml ล้วนๆ ไม่รองรับโดยไฟล์ vue หรือ pug)
• การเน้นตัวแปร js ในไฟล์เทมเพลต (รองรับเฉพาะไฟล์ wxml หรือ pug เท่านั้น ไม่รองรับไฟล์ vue)
• ตัวอย่างในตัว
• สนับสนุนวิธีการเขียน emmet
• การจัดรูปแบบ wxml

ข้อมูลเทมเพลตที่กรอกโดยอัตโนมัติทั้งหมดมาจากเอกสารอย่างเป็นทางการและได้รับผ่านสคริปต์โดยอัตโนมัติ

สร้างส่วนประกอบของโปรแกรมขนาดเล็กได้ด้วยคลิกเดียว

• คลิกขวาเพื่อดูตัวเลือก New Miniprogram Component ป้อนชื่อส่วนประกอบเพื่อสร้าง .wxml / .js / .wxss / .json และโฟลเดอร์ส่วนประกอบได้ในคลิกเดียว
• เปิดไฟล์ js โดยอัตโนมัติหลังจากสร้างสำเร็จ

• การสร้างส่วนประกอบรองรับการกำหนดค่าส่วนต่อท้าย css/wxml/js ตัวอย่างเช่น โปรเจ็กต์ใช้ 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
}

ชื่อแท็กและชื่อแอตทริบิวต์จะเสร็จสมบูรณ์โดยอัตโนมัติ

• ใน wxml คุณต้องป้อน < เพื่อทริกเกอร์แท็กให้เสร็จสิ้น ในขณะที่เป็นภาษาปั๊ก คุณจะต้องเขียนเพียงส่วนต้นของแท็กเพื่อทริกเกอร์แท็กให้เสร็จสิ้น
• การเว้นวรรคจะทำให้แอตทริบิวต์ของแท็กที่เกี่ยวข้องสมบูรณ์

ตามคุณสมบัติที่มีอยู่ของส่วนประกอบ ชุดคุณสมบัติที่รองรับที่เกี่ยวข้องจะถูกกรองออกโดยอัตโนมัติ

• เมื่อตัวเลือกของ mode="selector" มี range และ range-key แอตทริบิวต์
• เมื่อตัวเลือกของ mode="time" มีแอตทริบิวต์ start และ end

การเติมค่าแอตทริบิวต์ให้สมบูรณ์โดยอัตโนมัติ (การเติมให้สมบูรณ์จะถูกทริกเกอร์ก็ต่อเมื่อมีค่าที่เป็นทางเลือก)

• สามารถทริกเกอร์ได้โดยการเว้นวรรคในค่าแอตทริบิวต์ และช่องว่างจะถูกเขียนทับโดยอัตโนมัติหลังจากเสร็จสิ้น

คลิกฟังก์ชันหรือแอตทริบิวต์ในไฟล์เทมเพลตเพื่อข้ามไปยังตำแหน่งที่กำหนด js/ts (รองรับเฉพาะไฟล์ wxml หรือ pug เท่านั้น ไม่รองรับไฟล์ vue อย่างสมบูรณ์)

ฟังก์ชั่นนี้ยังไม่สมบูรณ์แบบ โดยจะค้นหาเฉพาะไฟล์สคริปต์ที่มีชื่อเดียวกับเทมเพลตปัจจุบัน ดังนั้นอาจไม่พบคำจำกัดความใน JS

การเติมชื่อสไตล์อัตโนมัติ (รองรับเฉพาะไฟล์ wxml หรือ pug ล้วนๆ เท่านั้น ไม่รองรับไฟล์ vue อย่างสมบูรณ์)

ระบบจะรับชื่อสไตล์ทั้งหมดในไฟล์สไตล์ที่มีชื่อเดียวกันกับเทมเพลตปัจจุบัน และยังสามารถรับเอกสารใน /** */ ในชื่อสไตล์ได้ หากมีสไตล์สากล คุณจะต้องใช้การกำหนดค่า รายการ minapp-vscode.globalStyleFiles ระบุ

• ตามค่าเริ่มต้น ชื่อในไฟล์สไตล์ที่มีชื่อเดียวกันกับเทมเพลตปัจจุบันจะได้รับ

  หมายเหตุ: หากไฟล์สไตล์ @import ไฟล์สไตล์อื่น โปรแกรมจะไม่ได้รับชื่อสไตล์ในไฟล์ที่นำเข้า

• นอกจากนี้ คุณสามารถใช้ minapp-vscode.globalStyleFiles เพื่อระบุไฟล์สไตล์สากลบางไฟล์ เพื่อให้ชื่อสไตล์ในไฟล์เหล่านี้ปรากฏขึ้นหลังจากป้อน class=""

  โดยทั่วไป app.wxss ของมินิโปรแกรมจะเป็นสไตล์สากล ดังนั้นคุณต้องระบุมันด้วยตนเองผ่านการกำหนดค่านี้ เช่น การกำหนดค่า minapp-vscode.globalStyleFiles: ["src/app.wxss"]

• นอกจากนี้ คุณยังสามารถใช้ minapp-vscode.styleExtensions เพื่อระบุส่วนต่อท้ายของไฟล์สไตล์ที่ระบบใช้

  ขอแนะนำให้กำหนดค่ารายการนี้ ระบบจะค้นหาไฟล์สไตล์ที่มีส่วนต่อท้ายต่างๆ ตามค่าเริ่มต้น เพื่อหลีกเลี่ยงการสูญเสียประสิทธิภาพโดยไม่จำเป็น วิธีที่ดีที่สุดคือกำหนดค่าให้เป็นส่วนต่อท้ายที่ใช้ในโปรเจ็กต์!

หมายเหตุ: ไม่รองรับไฟล์สไตล์การเรียงพิมพ์ที่มีการเยื้องเช่น sass

นอกจากนี้ยังสามารถดำเนินการให้เสร็จสมบูรณ์โดยอัตโนมัติในไฟล์เทมเพลต vue และรองรับภาษาปั๊ก

บอร์ดเทมเพลตใน vue รองรับสองคุณสมบัติ:

1. lang สามารถตั้งค่าเป็น "wxml" หรือ "pug" เพื่อระบุภาษาที่ใช้ ( การระบุแอตทริบิวต์ lang ในกรอบงานแบบ vue-like อาจทำให้เกิดข้อผิดพลาดในการคอมไพล์ คุณสามารถใช้ xlang แทนได้ แต่จะทำให้ vue และ minapp เสร็จสมบูรณ์ที่ ในเวลาเดียวกัน )
2. minapp สามารถตั้งค่าเป็น "native" , "wepy" , "mpx" หรือ "mpvue" โดยระบุเฟรมเวิร์กที่ใช้ ค่าเริ่มต้นคือ "mpvue"

ชอบ:

• <template lang="wxml" minapp="native"> หมายถึงการใช้ภาษา wxml โดยไม่ต้องใช้กรอบงานใดๆ
• <template lang="pug" minapp="mpvue"> หมายถึงการใช้ภาษาปั๊กและการใช้เฟรมเวิร์ก mpvue

โปรดทราบว่าการระบุ lang="wxml" ใน mpvue จะรายงานข้อผิดพลาด และคุณต้องรอให้ผู้เขียนแก้ไขก่อน อย่างไรก็ตาม คุณสามารถใช้ xlang="wxml" ได้ชั่วคราว แต่การดำเนินการนี้จะกระตุ้นให้ vue ดำเนินการเสร็จสิ้นโดยอัตโนมัติด้วย

การระบุค่า minapp ที่แตกต่างกันจะทำให้เกิดความสมบูรณ์อัตโนมัติของเฟรมเวิร์กที่เกี่ยวข้อง เนื่องจากฉันไม่ได้พัฒนาโดยใช้ wepy และ mpvue การเติมข้อมูลอัตโนมัติเหล่านี้จึงถูกเพิ่มตามเอกสารอย่างเป็นทางการ หากมีข้อผิดพลาด PR ก็ยินดีต้อนรับ (เพียงแค่ต้องแก้ไข ไฟล์ src/plugin/lib/ language.ts)

ลิงก์สนับสนุน (รองรับเฉพาะไฟล์ wxml หรือ pug เท่านั้น ไม่รองรับไฟล์ vue)

• ตามค่าเริ่มต้น เฉพาะแท็ก src เท่านั้นที่จะลิงก์ และจำเป็นต้องมีไฟล์นี้ หากไม่มี ลิงก์จะไม่ถูกเพิ่ม
• คุณสามารถกำหนดค่า minapp-vscode.linkAttributeNames เพื่อขยายแท็กเพิ่มเติมที่รองรับลิงก์ได้ กำหนดค่านี้เป็นอาร์เรย์ว่างเพื่อปิดใช้งานฟังก์ชันลิงก์
• minapp-vscode.resolveRoots สามารถกำหนดค่าให้ใช้ไดเรกทอรีสัมพันธ์เพื่อแก้ไขเส้นทางรูปภาพ

การทำให้ส่วนประกอบที่กำหนดเองสมบูรณ์โดยอัตโนมัติ (รองรับเฉพาะไฟล์ wxml ล้วนๆ ไม่รองรับโดยไฟล์ vue หรือ pug)

• รับข้อมูลส่วนประกอบในไฟล์ json ที่เกี่ยวข้องโดยอัตโนมัติ
• จัดลำดับความสำคัญของส่วนประกอบที่กำหนดเอง
• รับคำอธิบายคุณสมบัติในส่วนประกอบโดยอัตโนมัติ

การเน้นตัวแปร js ในไฟล์เทมเพลต (รองรับเฉพาะไฟล์ wxml หรือ pug เท่านั้น ไม่รองรับไฟล์ vue)

• การไฮไลต์จะถูกปิดโดยค่าเริ่มต้น คุณสามารถกำหนดค่า minapp-vscode.disableDecorate ให้เป็น true เพื่อเปิดการไฮไลต์ได้
• สีไฮไลต์เริ่มต้นคือสีม่วง คุณสามารถกำหนดค่า minapp-vscode.decorateType เพื่อใช้สีที่คุณชื่นชอบ เช่น {"color": "red"}
• ตามค่าเริ่มต้น อักขระทั้งหมดระหว่าง "{{" และ "}}" จะถูกเน้น คุณสามารถกำหนดค่า minapp-vscode.decorateComplexInterpolation เป็น false เพื่อให้มีเพียงตัวแปร (เช่น: foo , foo.prop , foo[1] ) เท่านั้นที่จะ จะถูกเน้น และสำนวน (เช่น: foo + bar , foo < 3 ) จะไม่ถูกเน้น และจะใช้สีดั้งเดิม

เพื่อเร่งการแยกวิเคราะห์ การเน้นสีจะใช้การจับคู่นิพจน์ทั่วไป ดังนั้นข้อผิดพลาดในการจับคู่จึงอาจเกิดขึ้นได้ หากคุณไม่พอใจ คุณสามารถกำหนดค่า minapp-vscode.disableDecorate เพื่อปิดใช้งานฟังก์ชันการเน้นสีได้

ปัญหาที่ทราบ:

• ตัวแปรในความคิดเห็นในภาษาปั๊กจะถูกเน้นด้วย (ปั๊กเป็นไปตามการเยื้อง และการแสดงออกทั่วไปนั้นไม่ใช่เรื่องง่ายในการจัดการ)

ตัวอย่างในตัว

• มาพร้อมกับรูด/ไอคอน/ปุ่ม/เวลาของตัวเลือก/วันที่ของตัวเลือก/ภูมิภาคของตัวเลือก/ช่องทำเครื่องหมาย-กลุ่ม/กลุ่มวิทยุ ดูไฟล์
• คุณสามารถกำหนดตัวอย่างของคุณเองผ่านรายการการกำหนดค่า minapp-vscode.snippets

ความแตกต่างจาก Snippets อย่างเป็นทางการคือ Snippets ที่นี่เพียงระบุคีย์และเนื้อหาเท่านั้น และคำอธิบายส่วนประกอบจะได้รับโดยอัตโนมัติตามคีย์ (นอกจากนี้ การกำหนดค่าสามารถรวมกับข้อมูลในตัวในภายหลังได้)

สนับสนุนวิธีการเขียน emmet

แผ่นโกง emmet

รูปแบบ wxml

รองรับ prettyHtml , js-beautify และ prettier (เนื้อหาบางส่วนจำเป็นต้องเขียนในรูปแบบที่เข้ากันได้กับ HTML)

• wxml เริ่มต้น

 "minapp-vscode.wxmlFormatter" : "wxml" , // 指定格式化工具

• js-สวยงาม

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

• สวยHtml

 "minapp-vscode.wxmlFormatter" : "prettyHtml" , // 指定格式化工具
"minapp-vscode.prettyHtml" : { // prettyHtml 默认配置
  "useTabs" : false ,
  "tabWidth" : 2 ,
  "printWidth" : 100 ,
  "singleQuote" : false ,
  "usePrettier" : true ,
  "wrapAttributes" : false , // 设置成 true 强制属性换行
  "sortAttributes" : false
}

• สวยกว่า

 "minapp-vscode.wxmlFormatter" : "prettier" , // 指定格式化工具
"minapp-vscode.prettier" : { // prettier 更多参考 https://prettier.io/docs/en/options.html
  "useTabs" : false ,
  "tabWidth" : 2 ,
  "printWidth" : 100 ,
  "singleQuote" : false
}

• เคล็ดลับ:
  1. สำหรับโหมด prettyHtml และ prettier ไฟล์การกำหนดค่าภายใต้โปรเจ็กต์จะถูกอ่านโดยอัตโนมัติ ไฟล์การกำหนดค่า Prettier .editorconfig
  2. การสลับเครื่องมือการจัดรูปแบบจำเป็นต้องรีสตาร์ท VSCode
  3. สำหรับ prettyHtml ไวยากรณ์ของ HTML5 ที่ prettier ใช้นั้นไม่สอดคล้องกับ wxml อย่างสมบูรณ์ โปรดใส่ใจกับความเข้ากันได้เมื่อเขียน
  4. สำหรับ jsBeautifyHtml เมื่อค่าเป็น "useCodeBuiltInHTML" ข้อมูลการกำหนดค่าจะถูกอ่านจากเอกสารฟิลด์การกำหนดค่า html.format.* ในการกำหนดค่า vscode และแปลงเป็นการกำหนดค่าของ js-beautify

คำถามที่พบบ่อย

การเติมข้อมูลอัตโนมัติไม่ปรากฏขึ้นหลังจากติดตั้งปลั๊กอิน

1. ตรวจสอบให้แน่ใจว่าคุณได้รีสตาร์ท VSCode หลังการติดตั้ง
2. ตรวจสอบให้แน่ใจว่ารูปแบบของไฟล์ปัจจุบันคือ wxml หรือ wxml-pug หรือ vue (คุณไม่สามารถดูส่วนต่อท้ายไฟล์ได้เนื่องจากอาจเชื่อมโยงกับรูปแบบไฟล์อื่นในไฟล์กำหนดค่า คุณต้องดูประเภทไฟล์ที่แสดงในด้านล่าง มุมขวาของ vscode)

ในโปรเจ็กต์ที่ไม่ใช่มินิโปรแกรม ไฟล์ pug ไม่ต้องการให้มินิโปรแกรมเสร็จสิ้นโดยอัตโนมัติ

ปลั๊กอิน minapp จะเชื่อมโยงไฟล์ .pug กับประเภทไฟล์ wxml-pug โดยอัตโนมัติ ดังนั้นคุณเพียงแค่ต้องกำหนดค่าการเชื่อมโยงไฟล์ในโปรเจ็กต์เฉพาะเท่านั้น

• ในโครงการที่ไม่ใช่มินิโปรแกรม ให้เชื่อมโยงไฟล์ที่มีส่วนต่อท้าย .pug กับประเภทไฟล์ pug
• ในโปรเจ็กต์มินิโปรแกรม ให้เชื่อมโยงไฟล์ที่มีส่วนต่อท้าย .pug กับประเภทไฟล์ wxml-pug