Sublime Text 3 的微信小程式外掛！

前言

微信開發者工具的編輯器雖然自帶程式碼提示功能，但是就其編碼體驗和主題選擇，個人覺得還是不太好用。 而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 字首觸發，輸入期間不支援 . 匹配。

後續

1. wxml標籤暫不支援自動閉合。
2. wxml標籤和屬性以及屬性值的描述文字，受限於Sublime本身的Completion UI，暫時沒有比較好的顯示方式。
3. 微信API的程式碼提示和自動補全還不是很全，但基本夠用。
4. 暫時沒有提供 JSON 配置的提示功能。
5. 暫時缺少文件快速查詢的便捷功能。
6. 有任何需求和疑問，歡迎提交 issues 。
7. 如果喜歡，也歡迎各位客官贊個 Star 。