minapp vscode
v2.4.14
@iChenLei has taken over the maintenance of this plug-in. Everyone is welcome to provide comments in the DingTalk group or Github issues.
All automatically completed template data comes from official documents and is automatically obtained through scripts.
New Miniprogram Component option. Enter the component name to create .wxml / .js / .wxss / .json and component folders with one clickjs file after successful creation {
"minapp-vscode.cssExtname" : "less" , // 默认 wxss，支持 styl sass scss less css
"minapp-vscode.wxmlExtname" : "vue" , // 默认 wxml，支持 vue wpy
"minapp-vscode.jsExtname" : "ts" // 默认 js，支持 ts coffee
}< to trigger tag completion, while in pug language, you only need to write the beginning of the tag to trigger tag completion.range and range-key attributesstart and end attributes.The function is not perfect yet. It will only search for script files with the same name as the current template, so the definition in JS may not be found.
The system will automatically obtain all style names in the style file with the same name as the current template, and can also obtain the documents in /** */ on the style name; if there are global styles, you need to use the configuration item minapp-vscode.globalStyleFiles . specified.
By default, the name in the style file with the same name as the current template will be obtained.
Note: If the style file @import another style file, the program will not obtain the style name in the imported file.
In addition, you can use minapp-vscode.globalStyleFiles to specify some global style files, so that the style names in these files will also appear after entering class=""
The app.wxss of a mini program is generally a global style, so you need to manually specify it through this configuration, such as configuring minapp-vscode.globalStyleFiles: ["src/app.wxss"]
In addition, you can also use minapp-vscode.styleExtensions to specify the suffix of the style file used by the system.
It is recommended to configure this item. The system will search for style files with various suffixes by default. To avoid unnecessary performance loss, it is best to configure it to the suffix used in the project!
Note: Indented typesetting style files such as
sassare not supported.
The template board in vue supports two properties:
lang can be set to "wxml" or "pug" to indicate the language used ( specifying the lang attribute in a vue-like framework may cause compilation errors. You can use xlang instead, but this will cause completion of vue and minapp at the same time )minapp can be set to "native" , "wepy" , "mpx" or "mpvue" , indicating the framework used, the default is "mpvue"like:
<template lang="wxml" minapp="native"> means using wxml language without using any framework<template lang="pug" minapp="mpvue"> means using pug language and using mpvue frameworkNote that specifying lang="wxml" in mpvue will report an error and you need to wait for the author to fix it! However, you can temporarily use
xlang="wxml", but this will also trigger vue's automatic completion.
Specifying different minapp values will trigger the automatic completion of the corresponding framework. Since I have not developed using wepy and mpvue, these automatic completions are added according to the official documentation. If there are errors, PR is welcome (just need to modify file src/plugin/lib/language.ts)
minapp-vscode.linkAttributeNames to expand additional tags that support link. Configure this value as an empty array to disable the link function.minapp-vscode.resolveRoots can be configured to use relative directories to resolve image pathsminapp-vscode.disableDecorate to true to turn on highlighting.minapp-vscode.decorateType to use your favorite color, such as {"color": "red"}minapp-vscode.decorateComplexInterpolation to false , so that only variables (such as: foo , foo.prop , foo[1] ) will be highlighted. will be highlighted, and expressions (such as: foo + bar , foo < 3 ) will not be highlighted and the original color will be used. In order to speed up parsing, color highlighting uses regular expression matching, so matching errors may occur; if you are not satisfied, you can configure minapp-vscode.disableDecorate to disable the color highlighting function.
Known issues:
minapp-vscode.snippetsThe difference from the official Snippets is that the Snippets here only need to specify the key and body, and the component description will automatically be obtained based on the key (in addition, the configuration can be combined with the built-in data later)
emmet cheat sheet
Support prettyHtml , js-beautify and prettier (some content needs to be written in an HTML-compatible way)
wxml "minapp-vscode.wxmlFormatter" : "wxml" , // 指定格式化工具 "minapp-vscode.wxmlFormatter" : "jsBeautifyHtml" , // 指定格式化工具
// 使用 vscode settings.json 中的 `html.format.[配置字段]` 配置字段, 详见下方 tips.4
"minapp-vscode.jsBeautifyHtml" : "useCodeBuiltInHTML" ,
// 使用自定义配置
"minapp-vscode.jsBeautifyHtml" : { // jsBeautify 默认配置
"content_unformatted" : "text" ,
"wrap_attributes" : "force" ,
"indent_size" : 2 ,
"wrap_attributes_indent_size" : 2 ,
"void_elements" : "image,input,video" ,
"indent_scripts" : "keep"
} "minapp-vscode.wxmlFormatter" : "prettyHtml" , // 指定格式化工具
"minapp-vscode.prettyHtml" : { // prettyHtml 默认配置
"useTabs" : false ,
"tabWidth" : 2 ,
"printWidth" : 100 ,
"singleQuote" : false ,
"usePrettier" : true ,
"wrapAttributes" : false , // 设置成 true 强制属性换行
"sortAttributes" : false
} "minapp-vscode.wxmlFormatter" : "prettier" , // 指定格式化工具
"minapp-vscode.prettier" : { // prettier 更多参考 https://prettier.io/docs/en/options.html
"useTabs" : false ,
"tabWidth" : 2 ,
"printWidth" : 100 ,
"singleQuote" : false
}prettyHtml and prettier modes, the configuration file under the project will be automatically read, Prettier configuration file .editorconfigprettyHtml , the syntax of HTML5 adopted by prettier is not completely consistent with wxml. Pay attention to compatibility when writing.jsBeautifyHtml , when the value is "useCodeBuiltInHTML" , the configuration information will be read from the html.format.* configuration field doc in the vscode configuration and converted into the configuration of js-beautify The minapp plugin will automatically associate .pug files to the wxml-pug file type. So you only need to configure the file association in the specific project.
pug file typewxml-pug file type
