minapp vscode下載 - minapp vscode源碼下載

minapp vscode

Ai源碼

v2.4.14

下載

WXML - Language Service

最近更新【CHANGELOG.md】

@iChenLei 已接手維護本插件，歡迎大家在釘釘群組或Github issues 提意見。

主要功能

一鍵創建小程式組件
標籤名與屬性自動補全
根據組件已有的屬性，自動篩選出對應支援的屬性集合
屬性值自動補全
點擊模板檔案中的函數或屬性跳到js/ts 定義的地方（純wxml 或pug 檔案才支持，vue 檔案不完全支援）
樣式名自動補全（純wxml 或pug 檔案才支持，vue 檔案不完全支援）
在vue 範本檔案中也能自動補全，同時支援pug 語言
支援link（純wxml 或pug 檔案才支持，vue 檔案不支援）
自訂元件自動補全（純wxml 檔案才支持，vue 或pug 檔案不支援）
模板檔案中js 變數高亮（純wxml 或pug 檔案才支持，vue 檔案不支援）
內建snippets
支持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 中需要輸入<才會觸發標籤補全，而pug 語言只需要寫標籤開頭即能觸發標籤補全
輸入空格會觸發對應標籤的屬性補全

根據組件已有的屬性，自動篩選出對應支援的屬性集合

當picker 的mode="selector" 時，有range和range-key的屬性
當picker 的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 範本檔案中也能自動補全，同時支援pug 語言

vue 中的template 板支援兩個屬性：

lang可以設定為"wxml"或"pug" ，表示使用的語言（在類別vue 框架中指定lang屬性可能會導致編譯報錯，你可以使用xlang替代，但這樣會同時出現vue 和minapp 的補全）
minapp可以設定為"native" , "wepy" ， "mpx"或"mpvue" ，表示使用的框架，預設為"mpvue"

如:

<template lang="wxml" minapp="native">表示使用wxml 語言，不使用任何框架
<template lang="pug" minapp="mpvue">表示使用pug 語言，並使用mpvue 框架

注意，在mpvue 中指定lang="wxml" 會報錯，需要等待作者修復！不過你可以暫時使用xlang="wxml" ，但這樣同時也會觸發vue 的自動補全

指定為不同的minapp 值會觸發對應框架的自動補全，由於本人沒有使用wepy 和mpvue 開發過，所以這些自動補全是根據官方文檔說明而加上的，如果有錯誤，歡迎PR（只需要修改檔案src/plugin/lib/language.ts)

支援link（純wxml 或pug 檔案才支持，vue 檔案不支援）

預設只會link src 標籤，而且檔案需要存在，不存在不會加link
可以設定minapp-vscode.linkAttributeNames來擴充額外的支援link 的標籤，將此值配置成空數組，可以停用link 功能
可以設定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來停用顏色高亮功能

已知問題：

pug 語言中註解中的變數也會高亮（pug 是基於縮排的，正規不太好處理）

內建snippets

自帶swiper/icon/button/picker time/picker date/picker region/checkbox-group/radio-group，請參閱文件
可以透過設定項目minapp-vscode.snippets來定義你自己的snippets

和官方的Snippets 的區別時，這裡的Snippets 只需要指定key 和body 即可，組件描述自動會根據key 來獲取（另外後期可以讓配置和內置的數據結合起來）

支持emmet 寫法

emmet cheat sheet

wxml 格式

支援prettyHtml , js-beautify和prettier (部分內容需要採用相容html的方式書寫)

預設wxml

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

js-beautify

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

prettyHtml

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

prettier

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

tips:
1. 針對prettyHtml和prettier方式，會自動讀取專案下的設定文件，Prettier configuration file .editorconfig
2. 切換格式化工具需重新啟動VSCode
3. 針對prettyHtml ，和prettier採用HTML5 的語法和wxml 不完全一致，寫法要注意相容
4. 針對jsBeautifyHtml , 當值為"useCodeBuiltInHTML"時, 配置資訊將從vscode 配置中的html.format.*配置字段doc 讀取, 轉換為js-beautify 的配置