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

龍泉_springlong發表於2018-04-24

前言

微信開發者工具的編輯器雖然自帶程式碼提示功能,但是就其編碼體驗和主題選擇,個人覺得還是不太好用。 而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"
  }
],
複製程式碼

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

外掛功能1:wxml檔案的語法高亮

除了基本的標籤語法高亮外,還有以下兩個特點:

1: 自動識別wxs標籤,內部使用JavaScript語法高亮和程式碼提示。

2: Mustache語法高亮顯示,用於區分其他常規屬性值和文字內容。

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

外掛功能2:wxss檔案的語法高亮

目前是將其設定為css語法,rpx單位和內部元件標籤無法高亮顯示。

小程式的css不建議直接使用元件的標籤選擇器進行樣式書寫,建議統一採用class書寫。

而rpx單位沒有高亮顯示,恰巧可以體現該單位的特殊性,因而不打算再單獨編寫針對wxss的語法檔案。

這樣也方便共用css原有的程式碼提示和補全。

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

外掛功能3:微信內建元件的程式碼提示和自動補全

基本的標籤補全和屬性提示都以實現,具體功能點如下:

1: 標籤的自動補全,併為常用標籤新增輔助輸入:view:ifview:forview:class 等。

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

2: 通過 view.classview#id 快速輸入類名和id屬性。

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

3: 標籤屬性以及屬性值的自動提示和補全。

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

外掛功能4:微信API的程式碼提示和自動補全

微信API的提示,統一通過 wx 字首觸發,輸入期間不支援 . 匹配。

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

後續

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

相關文章