Repository navigation
Features
新版本插件功能特性与旧版本插件对比如下：
| Feature | Legacy | New |
|---|---|---|
| 语法高亮 | ✅ | ✅ |
| SFC blocks 语言支持 | ✅ | ✅ |
| Emmet 支持 | ✅ | ✅ |
| 代码片段 snippets | ✅ | ✅ (enhanced) |
| 格式化 formatter | ✅ | ✅ (enhanced) |
| <template> 原生组件标签及属性补全提示 | ✅ | ✅ (enhanced) |
| 关联 tsconfig 配置 | ✅ | ✅ (enhanced) |
| 支持 Monorepo | ❌ | ✅ |
| 支持选择 typescript 版本 | ❌ | ✅ |
| SFC 编辑器视图拆分 | ❌ | ✅ |
| <template> 支持 TS 类型检查、补全提示... | ❌ | ✅ |
| <template> 支持定义跳转、查找参考引用 | ❌ | ✅ |
| <template> 样式类名跳转 <style> | ❌ | ✅ |
| <template> style 属性支持原生 CSS 补全提示 | ❌ | ✅ |
| <template> 原生组件属性检查 | ❌ | ✅ |
| <template> 自定义组件跳转 | ❌ | ✅ |
<template> {{}} 内插值代码高亮显示 |
❌ | ✅ |
| <json> mpx json 语法 schema 支持 | ❌ | ✅ |
Note
如果安装过 Mpx 两款历史就版本插件，右下角会出现“前往卸载”的提醒弹窗，请根据提示手动卸载或关闭就版本插件以避免潜在冲突。（如下图所示）
图片
Mpx <template> 模板中的变量支持 TS 类型提示、类型检查、自动补全、定义跳转等等 TS 相关功能，在当前文件使用 <script lang="ts"> 情况下，将会提供更加严谨地类型检查。
另外，在 wx:for、wx:if 等模板指令下还支持类型推导和收窄，复杂对象变量还支持属性智能补全等等，更多 TS 惊喜功能期待您的解锁～
- 原生组件标签补全
- 自定义组件标签补全
- 模板指令/属性补全
- 原生组件标签 Hover
- 模板指令/属性 Hover
Tip
此功能暂不支持包含任何 {{xxx}} 双花括号变量的 style 属性值，比如 style="color: {{myColor}}" 中此功能暂不可用。
同时也支持多种可能的开源跳转：
借鉴 Vue 插值代码高亮功能。
此功能默认打开，可在设置中手动关闭。
mpx-json schema 为 json 提供自动补全、hover 提示、类型校验等功能
支持快速使用预定义的 Mpx 代码片段模板 snippets。当然，用户也可以基于 VS Code snippets 功能自行配置代码片段。
.mpx 文件中右键选择格式化工具 -> 配置默认格式化工具
旧版本插件中 <script> 模块格式化会统一缩进一个 tab，新版本中默认不会缩进并且可以自行配置某个模块是否缩进。
-
template采用 VS Code 内置的 HTML 插件提供的格式化能力，我们在 Mpx 插件配置中提供了额外的个性化配置选项（优先级高于 HTML 选项配置）。其他更多格式化选项请参考内置 HTML 插件提供的 format 格式化选项。
- 另外，我们还提供使用
Prettier格式化<template>选项（如下图所示），默认关闭。开启后，会自动读取项目中的 Prettier 配置文件。注意，开启此选项后，需要保证项目依赖中存在prettier安装包才会生效。
-
JS/JS默认采用 VS Code 内置的 Typescript 插件提供的格式化能力。更多格式化选项请参考内置 Typescript 插件提供的 format 格式化选项。 -
另外，我们还提供使用
Prettier格式化JS/TS选项（如下图所示），默认关闭。开启后，会自动读取项目中的 Prettier 配置文件。注意，开启此选项后，需要保证项目依赖中存在prettier安装包才会生效。
-
CSS,SCSS,Less,postcss均是采用 VS Code 内置的 CSS 插件提供的格式化能力。更多格式化选项请参考内置 CSS 插件提供的 format 格式化选项。 -
Stylus由于 CSS 插件不支持，所以我们采用开源 Stylus Supremacy 工具进行格式化。更多格式化选项请参考 Stylus Supremacy 格式化选项。
- 打开
.mpx文件后，点击右上角 Mpx 小图标：
- VS Code 命令模式打开：
- 默认是左右拆分布局：
- 点击 Mpx 拆分图标旁边的布局按钮，可以转换成上下拆分布局：
- 再次点击 Mpx 小图标即可关闭拆分效果。另外，如果想调整左右展示的模块，可以在 Mpx 插件设置中修改：
打开 .mpx 文件时，底部状态栏提供了 mpx 快捷指令面板，包括打开 tsconfig.json 和选择 typescript 版本。
类似 VS Code 中 .ts 文件，.mpx（<script ts>） 也支持选择 typescript 版本。通常在调试 TS 版本相关问题时可能用到此功能。
可以选择 VS Code 内置 TS 版本 或者工作区版本（node_modules 中安装版本）：
Tip
这里的 typescript 版本只会影响 VS Code 中 TS 功能，不会影响 CI/CD 中的 ts-loader 等功能（以 node_modules 版本为准）。
Mpx VS Code 插件支持读取 tsconfig.json 配置文件中的 mpxCompilerOptions 编译配置选项来实现更高级地自定义功能。
类似 // @ts-ignore 注释指令，可以忽略下一行 TS 报错。
<template>
<view>
<!-- @mpx-ignore -->
<Popup title="{{error_unknownProp}}" />
</view>
</template>类似 // @ts-expect-error 注释指令，可以临时忽略下一行 TS 报错。
<template>
<view>
<view>
<!-- @mpx-expect-error -->
{{ error_unknownProp }}
</view>
<view>
<!-- @mpx-expect-error 多余的注释会触发报错 TS Error: Unused '@ts-expect-error' directive. -->
{{ knownProp }}
</view>>
</view>
</template><!-- @mpx-skip --> 注释指令，不仅可以忽略下一行 TS 报错，而且会跳过下一行代码的所有 TS 功能特性（类型推导、定义跳转等等）。请谨慎使用。
<template>
<view>
<!-- @mpx-skip -->
<view> {{ error_unknownProp }} </view>
<!-- @mpx-skip -->
<view> {{ knownProp }} </view>
</view>
</template>