前言
微信開發者工具的編輯器雖然自帶程式碼提示功能,但是就其編碼體驗和主題選擇,個人覺得還是不太好用。 而VS Code雖然有完善的小程式外掛,而且挺好用,功能齊全,但是個人還是更偏向於簡潔的Sublime Text。 所以還是想在自己熟悉的Sublime Text3上進行程式碼的編寫工作,於是帶著學習的目的,誕生了這款Sublime Text的微信小程式語法高亮、程式碼提示外掛。
安裝
該外掛目前還沒有提交至Package Control,外掛的倉庫地址:GitHub
- Git
用git克隆到Sublime的外掛安裝目錄。
- Zip
下載zip包,將其解壓到Sublime的外掛安裝目錄。
設定
為了提高wxml的補全效率,需要選擇選單(Preferences > Settings),在開啟的Preferences.sublime-settings使用者配置檔案中加入下面的程式碼:
"auto_complete_triggers":
[
{
"characters": "abcdefghijklmnopqrstuvwxyz ",
"selector": "text.wxml"
}
],
複製程式碼
外掛功能1:wxml檔案的語法高亮
除了基本的標籤語法高亮外,還有以下兩個特點:
1: 自動識別wxs標籤,內部使用JavaScript語法高亮和程式碼提示。
2: Mustache語法高亮顯示,用於區分其他常規屬性值和文字內容。
外掛功能2:wxss檔案的語法高亮
目前是將其設定為css語法,rpx單位和內部元件標籤無法高亮顯示。
小程式的css不建議直接使用元件的標籤選擇器進行樣式書寫,建議統一採用class書寫。
而rpx單位沒有高亮顯示,恰巧可以體現該單位的特殊性,因而不打算再單獨編寫針對wxss的語法檔案。
這樣也方便共用css原有的程式碼提示和補全。
外掛功能3:微信內建元件的程式碼提示和自動補全
基本的標籤補全和屬性提示都以實現,具體功能點如下:
1: 標籤的自動補全,併為常用標籤新增輔助輸入:view:if
、view:for
、view:class
等。
2: 通過 view.class
和 view#id
快速輸入類名和id屬性。
3: 標籤屬性以及屬性值的自動提示和補全。
外掛功能4:微信API的程式碼提示和自動補全
微信API的提示,統一通過 wx
字首觸發,輸入期間不支援 .
匹配。