微信相关的 vscode 插件安装详情:
微信小程序标签、属性的智能补全(同时支持原生小程序、mpvue 和 wepy 框架,并提供 snippets)
<!-- <div style="color:red; font-size: 1.6em;">重要通知:由于旧版本不小心被我删除了,所以请 1.0.7 版本之前的用户删除旧版本再重新安装新版本;否则可能会无法成功安装新版本,并且也得不到新版本的推送!</div> -->
所有自动补全的模板数据都来自于官方文档,通过脚本自动获取的
<a id="tag-and-attr"></a>
<
才会触发标签补全,而 pug 语言只需要写标签开头即能触发标签补全:
才会触发对应的补全<a id="smart-attr"></a>
range
和 range-key
的属性start
和 end
的属性<a id="attr-value"></a>
<a id="attr-definition"></a>
功能还不完善,只会查找和当前模板同名的脚本文件,所以有可能会找不到JS中的定义
<a id="attr-class-value"></a>
系统会自动获取和当前模板同名的样式文件中的所有样式名,同时还能获取样式名上的 /** */
中的文档;如果有全局的样式,需要通过配置项 minapp-vscode.globalStyleFiles
来指定
默认会获取和当前模板同名的样式文件中的名称
注意:如果样式文件是 @import
了另一个样式文件,则程序不会去获取这个引入的文件中的样式名
另外可以使用 minapp-vscode.globalStyleFiles
来指定一些全局的样式文件,这样在输入 class=""
后就也会出现这些文件中的样式名
小程序的 app.wxss 一般是全局的样式,所以需要你手动通过此配置来指定,如配置 minapp-vscode.globalStyleFiles: ["src/app.wxss"]
另外也可以使用 minapp-vscode.styleExtensions
来指定系统使用的样式文件的后缀
建议配置此项,系统默认会查找各种后缀的样式文件,为避免不必要的性能损耗,最好配置成项目中使用的后缀!
注意:不支持
sass
这种缩进排版的样式文件
<a id="vue"></a>
vue 中的 template 板支持两个属性:
lang
可以设置为 "wxml"
或 "pug"
,表示使用的语言minapp
可以设置为 "native"
, "wepy"
或 "mpvue"
,表示使用的框架,默认为 "mpvue"
如:
<template lang="wxml" minapp="native">
表示使用 wxml 语言,不使用任何框架<template lang="pug" minapp="mpvue">
表示使用 pug 语言,并使用 mpvue 框架注意,mpvue 中指定 lang="wxml" 会报错,需要等待作者修复!不过 你可以临时使用
xlang="wxml"
,但这样同时也会触发 vue 的自动补全
指定为不同的 minapp 值会触发对应框架的自动补全,由于本人没有使用 wepy 和 mpvue 开发过,所以这些自动补全是根据官方文档说明而加上的,如果有错误,欢迎 PR(只需要修改文件 src/plugin/lib/language.ts)
<a id="link"></a>
minapp-vscode.linkAttributeNames
来扩展额外的支持 link 的标签,将此值配置成空数组,可以禁用 link 功能minapp-vscode.resolveRoots
来使用相对目录解析图片路径<a id="custom-component"></a>
<a id="highlight"></a>
minapp-vscode.disableDecorate
为 true
来关闭高亮minapp-vscode.decorateType
来使用你喜欢的颜色,如 {"color": "red"}
minapp-vscode.decorateComplexInterpolation
为 false
,这样只有变量(如:foo
, foo.prop
, foo[1]
)会高亮,而表达式(如:foo + bar
, foo < 3
)不会高亮,而使用原本的颜色为了加快解析速度,颜色高亮使用的是正则表达式匹配,所以可能会出现匹配错误的情况;如果不满意,可以配置 minapp-vscode.disableDecorate
来禁用颜色高亮功能
已知问题:
<a id="snippets"></a>
minapp-vscode.snippets
来定义你自己的 snippets和官方的 Snippets 的区别时,这里的 Snippets 只需要指定 key 和 body 即可,组件描述自动会根据 key 来获取(另外后期可以让配置和内置的数据结合起来)
<a id="emmet"></a>
<
才会触发标签补全,而 pug 中只需要输入标签名就会出来自动补全minapp 插件会自动将 .pug 文件关联到 wxml-pug
文件类型。所以你只需要在具体的项目中配置一下文件关联就行了。
pug
文件类型wxml-pug
文件类型