Mpx 框架

外观

IDE 高亮配置 ​

IntelliJ ​

如果使用 IntelliJ 系 IDE 开发，可将 .mpx 后缀文件关联到 vue 模板类型，按 vue 模板解析。

关联文件类型

但会报一个 warning 提示有重复的 script 标签，关闭该警告即可。

关闭警告

vscode ​

语法高亮插件 ​

下载 ​

  • 下载地址（也可直接在 vscode 扩展处搜索 mpx 即可下载）
  • git 地址（有任何 vscode 插件的问题和需求可在仓库中提 issue）

功能介绍 ​

  • 语法高亮
  • emmet
  • 跳转定义
  • 自动补全
  • eslint
  • 格式化

视频介绍

高亮 ​

  与其他语言插件无异，提供相应代码的高亮，因为 Mpx 分为四个模块，所以每个模块都有相应的语法高亮，还包括注释快捷键，也区分了相应模块，比如<template>中使用的是 html 的高亮，且注释是<!-- -->,而<script>中就是js的高亮，注释是//

image

emmet ​

  早在使用 sublime 时就在使用 emmet 插件，以提高写 HTML 的效率。

  比如键入多个<view>标签：view*n。

  比如一些标签的快速键入，配合tab或者Enter键快速键入

  不仅仅是<template>模块，css，scss，less，stylus，sass 模块也有相应的快捷指令

imageimage

提示组件标签

我们可以像编写 html 一样，只要输入对应的单词就会出现对应的标签，比如输入的是 view ，然后按下 tab 键，即可输入 <view></view> 标签。

图片名称

组件指令提示

指令的提示类似于 vue 文件一样，只要输入对应的指令前缀就会出现对应的完整指令，比如输入的是 wx ，然后按下 tab 键，就可以输入 wx:if="" 指令。

图片名称

组件属性提示

微信小程序的每个组件都有一些属性选项，在编写组件的时候输入前缀就会出现完整的属性，并且包含了属性的说明和属性的类型。

图片名称

组件事件提示

给组件绑定事件，也是只需要输入事件的前缀，就会出现完整的事件列表，然后按下 tab 键，即可输入 bindtap="" 类似的事件。

图片名称

跳转定义 ​

  command + 鼠标左键 查看定义位置，也可以在当前文件查看内容，决定是否跳转

image

自动补全 ​

  毕竟 Mpx 是个小程序的框架，对于微信和支付宝的 api 快速补全 snippets 没有怎么能行，可在<script>中通过键入部分文字插入相应的代码块

image

eslint ​

  eslint 这块要分两部分来讲，一部分是插件实现了按照模块区分的简单的 eslint，另一部分是要配合 eslint 的 vscode 插件，配置.eslintrc 高阶的 eslint 检测。

部分一可通过配置开关

<template>是通过我们自己实现的 eslint 插件eslint-plugin-mpx，通过调 eslint 提供的引擎 api，返回 eslint 校验的结果，我们再进行展示。

<script>中是通过调用 typescript 提供的检测 js 代码的 api 来进行检测，返回 的校验结果也是不太符合语法的，基础的检测，不会过于苛刻

<style>中会根据 lang 的设定进行相应的检测，此检测是 vscode 官方提供的库 vscode-css-languageservice

<json>模块同 tempalte，用到了一个 eslint 插件eslint-plugin-jsonc来检测 json 的部分

image

部分二可参照此链接配置

代码格式化 ​

支持代码格式化 JavaScript (ts)· JSON · CSS (less/scss/stylus) · WXML，通过鼠标右键选择代码格式化文档。

图片名称

默认每个区块都是调用 Prettier 这个库来完成格式化的，当然也可以在设置中切换成使用其他库。

图片名称

如果切换成 none 将会禁用格式化。

Prettier 支持从项目根目录读取 .prettierrc 配置文件。配置选项可以参考 官方 文档。.prettierrc 文件可以使用 JSON 语法编写，比如下面这样：

{
  "tabWidth": 4,
  "semi": false,
  "singleQuote": true
}

注意：由于 Prettier 这个库不支持格式化 stylus 语法，所以 stylus 的格式化使用另外一个 stylus-supremacy 库，配置 stylus 格式化规则只能在编辑器的 settings 中配置。

"mpx.format.defaultFormatterOptions": {
  "stylus-supremacy": {
    "insertColons": false, // 不使用括号
    "insertSemicolons": false, // 不使用冒号
    "insertBraces": false, // 不使用分号
    "insertNewLineAroundImports": true, // import之后插入空行
    "insertNewLineAroundBlocks": false // 每个块不添加空行
  }
}

总结一下，配置格式化有两种方式，一种是使用 .prettierrc 文件的形式配置，另一种是在编辑器的 settings 中自行配置，通过 mpx.format.defaultFormatterOptions 选项。

模版增强插件 ​

下载 ​

  • 下载地址（也可直接在 vscode 扩展处搜索 Mpx Template Features 即可下载）

功能介绍 ​

  • 支持模板中的变量定义跳转
  • class 类名 hover 展示对应的 style 样式
  • stylus 一键转换为原子类 Unocss，支持自定义转换规则
  • 模板中变量自动补全
  • 支持拆分 SFC 文件为多个编辑视图