↓推薦關注↓
一直以來，小程式開發者必須安裝第三方外掛，才能在 JetBrains IDE 中進行小程式開發。在 JetBrains Marketplace 上，有關外掛已有約 50 萬下載量。
今天的文章，我們就以小程式開發者較常使用的 WebStorm 為演示環境，帶大家瞭解這款全新官方外掛的主要功能，以及您可以如何幫助我們讓這個外掛越來越強大。
準備工作
在正式開始之前，請先安裝 WebStorm 及微信小程式外掛。現在您可以免費使用 WebStorm 進行非商業用途的開發。
安裝 JetBrains IDE 最簡單快捷的方式：
JetBrains Toolbox App 一鍵自動安裝！
沒有下載 Toolbox App 的小夥伴可以先在官網免費下載 Toolbox App。下載安裝完成後，開啟 Toolbox App，在 IDE 清單裡選擇 WebStorm，點選右邊的安裝（Install）按鈕即可一鍵完成安裝。
為了保持 WebStorm 本體的輕量，微信小程式的功能以外掛的形式提供。安裝好 WebStorm 後，請先在 IDE 的 Marketplace 裡下載並安裝外掛。開啟 WebStorm 後，點選歡迎頁左方的外掛 Tab 後，點選右邊上方的 Marketplace Tab，並在搜尋框裡搜尋 “wechat mini program”（由 JetBrains s.r.o. 開發的官方外掛）。出現結果後，點選外掛名稱右方的 ”安裝” 按鈕，即可完成外掛安裝的步驟。
另外，為了方便在開發過程中預覽成果，也請安裝由騰訊官方提供的微信開發者工具。安裝完成後，為了方便開發，推薦以分離視窗 + 置頂的方式將模擬器置於桌面左方，並以 WebStorm 開啟相同專案後置於桌面右方，即可無縫以 WebStorm 開發微信小程式專案並即時預覽頁面成果。
快速上手亮點功能
開發微信小程式可簡單區分為邏輯層及檢視層兩塊，其中邏輯層主要使用 JavaScript 開發，而檢視層則由 WXML（WeiXin Markup language：用於描述頁面的結構）與 WXSS（WeiXin Style Sheet：用於描述頁面的樣式）編寫。另外，檢視層還可使用 WXS（WeiXin Script：小程式指令碼語言）結合 WXML，動態構建出頁面的結構。
由於 WebStorm 原生就支援 JavaScript 等前端語言及工具，因此在這篇文章裡，我們會專注在 WebStorm 微信小程式外掛對 WXML、WXSS 及 WXS 語法的支援。
WXML（WeiXin Markup language）
語法支援
WXML 是專為微信小程式框架設計的一套標籤語言，其結合了元件、事件等功能，可以構建出頁面的結構。現在，透過 WebStorm 的微信小程式外掛，IDE 能識別 WXML 語法並提供語法高亮。
當輸入
< 符號時，WebStorm 能提示元件名稱及支援的屬性。在輸入 class 屬性內容時，WebStorm 也能自動提示對應的 WXSS 的樣式名稱。當將滑鼠焦點在 WXML 元件名稱上時，WebStorm 會自動彈出快速文件方便您查閱標記用法及說明。而當輸入 > 符號時，WebStorm 也能自動補全。透過這些功能，除了能減少因打字而發生的錯誤外，也可以讓您在開發元件結構時更高效。從邏輯層傳送資料到檢視層顯示，是開發微信小程式時的常見需求。現在 WebStorm 能識別
Page 物件的 data 資料繫結，當您在 JavaScript 內宣告資料內容後，在 WXML 檔案輸入程式碼時，IDE 能提示繫結的變數名稱清單並依選擇自動完成。在開發微信小程式時，
wx 指令（directives）可用於控制 WXML 的行為。這些指令可以實現條件渲染、迴圈渲染等常用功能。在編輯 WXML 檔案時，WebStorm 可自動補全 wx 指令名稱，包括 wx:for、wx:if、wx:elif、wx:else、wx:for-item、wx:for-index、wx:key 等，並且支援這些指令的語法高亮。另外，事件是微信小程式框架裡，檢視層與邏輯層之間的通訊方式。WebStorm 能識別在 JavaScript 裡宣告的事件處理函式，並在編輯 WXML 的屬性時自動補全，讓開發者在繫結元件及事件處理函式時更方便。
WXSS（WeiXin Style Sheet）
語法支援
比起近似於 HTML、負責元件結構的 WXML，WXSS 則更像是 CSS，用於描述元件樣式。為了讓廣大的前端開發者更容易適應 WXSS，其語法具有 CSS 大部分特性，並在 CSS 之上擴充套件了尺寸單位及樣式匯入等特性。WebStorm 的微信小程式外掛，針對 WXSS 的這些特殊性，也提供相應的語法支援。
在
.wxss 檔案裡，使用 @import 語句可以匯入外聯樣式表，WebStorm 除了能提示樣式表的路徑外，搭配轉至宣告快捷鍵（Mac：⌘+B 或 Win/Linux：Ctrl+B）更可以快速導航到對應的 WXSS 檔案。這種跳轉能力也能從 .wxss 轉至使用到的 .wxml 檔案中，非常方便。在您編輯模板時，WebStorm 的微信小程式外掛也支援 WXSS 的
style 及 class 語法。除了能提示樣式名稱外，也能自動補全從 JavaScript 繫結資料的變數名稱，減少打字時間並降低發生錯誤的機會。WXS（WeiXin Script）
指令碼支援
除了 WXML 及 WXSS 外，WebStorm 也支援 WXS 語法。WXS 是內嵌在 WXML 中的指令碼段，可以在 WXML 語法中內嵌指令碼，豐富 WXML 中的資料預處理能力，或是編寫簡單的 WXS 事件響應函式。在
.wxml 檔案裡，WebStorm 除了可以解析嵌入式的 WXS 指令碼，支援 WXML 標記中 src 屬性的檔案引用，還能在模板中自動補全 module 名稱。現在就開始使用並分享您的反饋
透過這篇文章的介紹，相信您已經感受到官方小程式開發外掛能讓您的開發工作如虎添翼。前陣子我們剛更新了 WebStorm 的授權模式，對於非商業用途，例如學習、開源專案開發、教學內容創作或業餘愛好開發，您現在可以免費使用 WebStorm！
詳細說明請參考官方博文。