|
1 | | -# IDE 高亮配置 |
| 1 | +# IDE 支持 |
2 | 2 |
|
3 | | -- [IntelliJ](ide.md#intellij) |
4 | | -- [vscode](ide.md#vscode) |
| 3 | +## VS Code |
5 | 4 |
|
6 | | -## IntelliJ |
7 | | - |
8 | | -如果使用 IntelliJ 系 IDE 开发，可将 `.mpx` 后缀文件关联到 `vue` 模板类型，按 `vue` 模板解析。 |
9 | | - |
10 | | - |
11 | | - |
12 | | -但会报一个 `warning` 提示有重复的 `script` 标签，关闭该警告即可。 |
13 | | - |
14 | | - |
15 | | - |
16 | | -## vscode |
17 | | - |
18 | | -### 语法高亮插件 |
19 | | - |
20 | | -#### 下载 |
21 | | - |
22 | | -- [下载地址](https://marketplace.visualstudio.com/items?itemName=pagnkelly.mpx)（也可直接在 vscode 扩展处搜索 mpx 即可下载） |
23 | | -- [git 地址](https://github.com/mpx-ecology/vscode-mpx)（有任何 vscode 插件的问题和需求可在仓库中提 issue） |
24 | | - |
25 | | -#### 功能介绍 |
26 | | - |
27 | | -- 语法高亮 |
28 | | -- emmet |
29 | | -- 跳转定义 |
30 | | -- 自动补全 |
31 | | -- eslint |
32 | | -- 格式化 |
33 | | - |
34 | | -[视频介绍](https://gift-static.hongyibo.com.cn/static/kfpub/3227/vscodes.mp4) |
35 | | - |
36 | | -#### 高亮 |
37 | | - |
38 | | -  与其他语言插件无异，提供相应代码的高亮，因为 Mpx 分为四个模块，所以每个模块都有相应的语法高亮，还包括注释快捷键，也区分了相应模块，比如`<template>`中使用的是 html 的高亮，且注释是`<!-- -->`,而`<script>`中就是`js`的高亮，注释是`//` |
39 | | - |
40 | | - |
41 | | - |
42 | | -#### emmet |
43 | | - |
44 | | -  早在使用 sublime 时就在使用 emmet 插件，以提高写 HTML 的效率。 |
45 | | - |
46 | | -  比如键入多个`<view>`标签：`view*n`。 |
47 | | - |
48 | | -  比如一些标签的快速键入，配合`tab`或者`Enter`键快速键入 |
49 | | - |
50 | | -  不仅仅是`<template>`模块，css，scss，less，stylus，sass 模块也有相应的快捷指令 |
51 | | - |
52 | | - |
53 | | - |
54 | | - |
55 | | -提示组件标签 |
56 | | - |
57 | | -我们可以像编写 html 一样，只要输入对应的单词就会出现对应的标签，比如输入的是 view ，然后按下 tab 键，即可输入 `<view></view>` 标签。 |
58 | | - |
59 | | -<img src="https://gift-static.hongyibo.com.cn/static/kfpub/3547/tishi1_v2.png" width="500" alt="图片名称" /> |
60 | | - |
61 | | -组件指令提示 |
62 | | - |
63 | | -指令的提示类似于 vue 文件一样，只要输入对应的指令前缀就会出现对应的完整指令，比如输入的是 wx ，然后按下 tab 键，就可以输入 wx:if="" 指令。 |
| 5 | +推荐使用的 IDE 是 [VS Code](https://code.visualstudio.com)，配合官方维护的新版本 [**Mpx (Official)**](https://marketplace.visualstudio.com/items?itemName=mpxjs.mpx-official) 插件。该插件提供了语法高亮、TypeScript 支持，以及模板内表达式与组件 props 的智能提示，提供更好的开发体验。 |
64 | 6 |
|
65 | | -<img src="https://gift-static.hongyibo.com.cn/static/kfpub/3547/tishi2_v2.png" width="500" alt="图片名称" /> |
| 7 | +::: tip 注意 |
| 8 | +Mpx (Official) 现在取代了我们过去提供的插件 [mpx](https://marketplace.visualstudio.com/items?itemName=pagnkelly.mpx)、[mpx-template-features](https://marketplace.visualstudio.com/items?itemName=wangshun.mpx-template-features)。历史插件将不再维护逐步废弃，请大家及时切换到新版插件。更多历史背景及功能差异请参考[说明](https://github.com/mpx-ecology/language-tools?tab=readme-ov-file#why-new-extension)。 |
| 9 | +::: |
66 | 10 |
|
67 | | -组件属性提示 |
| 11 | +Mpx (Official) 插件一大亮点功能是为 `<template>` 模板中的变量支持 TS 智能提示，包括类型提示、类型检查、自动补全、定义跳转等等功能。如下图所示： |
68 | 12 |
|
69 | | -微信小程序的每个组件都有一些属性选项，在编写组件的时候输入前缀就会出现完整的属性，并且包含了属性的说明和属性的类型。 |
| 13 | + |
70 | 14 |
|
71 | | -<img src="https://gift-static.hongyibo.com.cn/static/kfpub/3547/tishi3_v2.png" width="500" alt="图片名称" /> |
| 15 | + |
72 | 16 |
|
73 | | -组件事件提示 |
| 17 | +有关更多插件详细功能介绍和使用说明，请参阅我们的[插件文档](https://github.com/mpx-ecology/language-tools/wiki)。 |
74 | 18 |
|
75 | | -给组件绑定事件，也是只需要输入事件的前缀，就会出现完整的事件列表，然后按下 tab 键，即可输入 bindtap="" 类似的事件。 |
| 19 | +## Open VSX 插件生态 IDE |
76 | 20 |
|
77 | | -<img src="https://gift-static.hongyibo.com.cn/static/kfpub/3547/tishi4_v2.png" width="500" alt="图片名称" /> |
| 21 | +[Open VSX](https://open-vsx.org/) 是 Visual Studio Marketplace（VS Code 官方插件市场）的开源替代方案，可以为兼容 VS Code 的 IDE 提供插件市场支持。[Mpx (Official)](https://open-vsx.org/extension/mpxjs/mpx-official) 插件支持在 Open VSX 同步发版。 |
78 | 22 |
|
79 | | -#### 跳转定义 |
| 23 | +目前主流的 AI IDE 比如 [Cursor](https://cursor.com/cn)、[Trae](https://www.trae.cn)、[windsurf](https://windsurf.com/) 等等，基于都是 fork VS Code 开发，内部插件市场一般由 Open VSX 提供支持。如果您使用此类 IDE 或者其他支持 Open VSX 插件源的 IDE，可直接搜索安装 Mpx (Official)。 |
80 | 24 |
|
81 | | -  command + 鼠标左键 查看定义位置，也可以在当前文件查看内容，决定是否跳转 |
82 | | - |
83 | | - |
84 | | - |
85 | | -#### 自动补全 |
86 | | - |
87 | | -  毕竟 Mpx 是个小程序的框架，对于微信和支付宝的 api 快速补全 snippets 没有怎么能行，可在`<script>`中通过键入部分文字插入相应的代码块 |
88 | | - |
89 | | - |
90 | | - |
91 | | -#### eslint |
92 | | - |
93 | | -  eslint 这块要分两部分来讲，一部分是插件实现了按照模块区分的简单的 eslint，另一部分是要配合 eslint 的 vscode 插件，配置.eslintrc 高阶的 eslint 检测。 |
94 | | - |
95 | | -部分一可通过配置开关 |
96 | | - |
97 | | -`<template>`是通过我们自己实现的 eslint 插件`eslint-plugin-mpx`，通过调 eslint 提供的引擎 api，返回 eslint 校验的结果，我们再进行展示。 |
98 | | - |
99 | | -`<script>`中是通过调用 typescript 提供的检测 js 代码的 api 来进行检测，返回 |
100 | | -的校验结果也是不太符合语法的，基础的检测，不会过于苛刻 |
101 | | - |
102 | | -`<style>`中会根据 lang 的设定进行相应的检测，此检测是 vscode 官方提供的库 |
103 | | -`vscode-css-languageservice` |
104 | | - |
105 | | -`<json>`模块同 tempalte，用到了一个 eslint 插件`eslint-plugin-jsonc`来检测 json 的部分 |
106 | | - |
107 | | - |
108 | | - |
109 | | -部分二可参照此[链接](https://github.com/mpx-ecology/vscode-mpx/issues/35)配置 |
110 | | - |
111 | | -#### 代码格式化 |
112 | | - |
113 | | -支持代码格式化 JavaScript (ts)· JSON · CSS (less/scss/stylus) · WXML，通过鼠标右键选择代码格式化文档。 |
114 | | - |
115 | | -<img src="https://gift-static.hongyibo.com.cn/static/kfpub/3547/format_v2.png" width="500" alt="图片名称" /> |
116 | | - |
117 | | -默认每个区块都是调用 Prettier 这个库来完成格式化的，当然也可以在设置中切换成使用其他库。 |
118 | | - |
119 | | -<img src="https://gift-static.hongyibo.com.cn/static/kfpub/3547/format2_v3.png" width="500" alt="图片名称" /> |
120 | | - |
121 | | -如果切换成 none 将会禁用格式化。 |
122 | | - |
123 | | -Prettier 支持从项目根目录读取 .prettierrc 配置文件。配置选项可以参考 [官方](https://prettier.io/docs/en/configuration.html) 文档。.prettierrc 文件可以使用 JSON 语法编写，比如下面这样： |
124 | | - |
125 | | -``` |
126 | | -{ |
127 | | - "tabWidth": 4, |
128 | | - "semi": false, |
129 | | - "singleQuote": true |
130 | | -} |
131 | | -``` |
132 | | - |
133 | | -注意：由于 Prettier 这个库不支持格式化 stylus 语法，所以 stylus 的格式化使用另外一个 stylus-supremacy 库，配置 stylus 格式化规则只能在编辑器的 settings 中配置。 |
134 | | - |
135 | | -``` |
136 | | -"mpx.format.defaultFormatterOptions": { |
137 | | - "stylus-supremacy": { |
138 | | - "insertColons": false, // 不使用括号 |
139 | | - "insertSemicolons": false, // 不使用冒号 |
140 | | - "insertBraces": false, // 不使用分号 |
141 | | - "insertNewLineAroundImports": true, // import之后插入空行 |
142 | | - "insertNewLineAroundBlocks": false // 每个块不添加空行 |
143 | | - } |
144 | | -} |
145 | | -``` |
146 | | - |
147 | | -总结一下，配置格式化有两种方式，一种是使用 .prettierrc 文件的形式配置，另一种是在编辑器的 settings 中自行配置，通过 mpx.format.defaultFormatterOptions 选项。 |
148 | | - |
149 | | -### 模版增强插件 |
| 25 | +## IntelliJ |
150 | 26 |
|
151 | | -#### 下载 |
| 27 | +如果使用 IntelliJ 系 IDE 开发，可将 `.mpx` 后缀文件关联到 `vue` 模板类型，按 `vue` 模板解析。 |
152 | 28 |
|
153 | | -- [下载地址](https://marketplace.visualstudio.com/items?itemName=wangshun.mpx-template-features)（也可直接在 vscode 扩展处搜索 Mpx Template Features 即可下载） |
| 29 | + |
154 | 30 |
|
155 | | -#### 功能介绍 |
| 31 | +但会报一个 `warning` 提示有重复的 `script` 标签，关闭该警告即可。 |
156 | 32 |
|
157 | | -- 支持模板中的变量定义跳转 |
158 | | -- class 类名 hover 展示对应的 style 样式 |
159 | | -- stylus 一键转换为原子类 Unocss，支持自定义转换规则 |
160 | | -- 模板中变量自动补全 |
161 | | -- 支持拆分 SFC 文件为多个编辑视图 |
| 33 | + |
0 commit comments