今天的文章，我们就以小程序开发者较常使用的 WebStorm 为演示环境，带大家了解这款全新官方插件的主要功能，以及您可以如何帮助我们让这个插件越来越强大。

在正式开始之前，请先安装 WebStorm 及微信小程序插件。现在您可以免费使用 WebStorm 进行非商业用途的开发。

为了保持 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 是专为微信小程序框架设计的一套标签语言，其结合了组件、事件等功能，可以构建出页面的结构。现在，通过 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 的属性时自动补全，让开发者在绑定组件及事件处理函数时更方便。

比起近似于 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 绑定数据的变量名称，减少打字时间并降低发生错误的机会。

除了 WXML 及 WXSS 外，WebStorm 也支持 WXS 语法。WXS 是内嵌在 WXML 中的脚本段，可以在 WXML 语法中内嵌脚本，丰富 WXML 中的数据预处理能力，或是编写简单的 WXS 事件响应函数。在 .wxml 文件里，WebStorm 除了可以解析嵌入式的 WXS 脚本，支持 WXML 标记中 src 属性的文件引用，还能在模板中自动补全 module 名称。

通过这篇文章的介绍，相信您已经感受到官方小程序开发插件能让您的开发工作如虎添翼。前阵子我们刚更新了 WebStorm 的授权模式，对于非商业用途，例如学习、开源项目开发、教学内容创作或业余爱好开发，您现在可以免费使用 WebStorm！

详细说明请参考官方博文。