minapp vscode
v2.4.14
@iChenLei a pris en charge la maintenance de ce plug-in. Tout le monde est invité à formuler des commentaires sur le groupe DingTalk ou sur les problèmes Github.
Toutes les données du modèle complétées automatiquement proviennent de documents officiels et sont automatiquement obtenues via des scripts.
New Miniprogram Component . Entrez le nom du composant pour créer des dossiers .wxml / .js / .wxss / .json et des composants en un seul clic.js après une création réussie {
"minapp-vscode.cssExtname" : "less" , // 默认 wxss，支持 styl sass scss less css
"minapp-vscode.wxmlExtname" : "vue" , // 默认 wxml，支持 vue wpy
"minapp-vscode.jsExtname" : "ts" // 默认 js，支持 ts coffee
}< pour déclencher la complétion de la balise, tandis qu'en langage pug, il vous suffit d'écrire le début de la balise pour déclencher la complétion de la balise.range et range-keystart et end .La fonction n'est pas encore parfaite. Elle recherchera uniquement les fichiers de script portant le même nom que le modèle actuel, il se peut donc que la définition dans JS ne soit pas trouvée.
Le système obtiendra automatiquement tous les noms de style dans le fichier de style portant le même nom que le modèle actuel, et pourra également obtenir les documents dans /** */ sur le nom du style s'il existe des styles globaux, vous devez utiliser la configuration ; élément minapp-vscode.globalStyleFiles spécifié.
Par défaut, le nom dans le fichier de style portant le même nom que le modèle actuel sera obtenu.
Remarque : Si le fichier de style @import un autre fichier de style, le programme n'obtiendra pas le nom du style dans le fichier importé.
De plus, vous pouvez utiliser minapp-vscode.globalStyleFiles pour spécifier certains fichiers de style globaux, afin que les noms de style dans ces fichiers apparaissent également après avoir entré class=""
Le app.wxss d'un mini-programme est généralement un style global, vous devez donc le spécifier manuellement via cette configuration, par exemple en configurant minapp-vscode.globalStyleFiles: ["src/app.wxss"]
De plus, vous pouvez également utiliser minapp-vscode.styleExtensions pour spécifier le suffixe du fichier de style utilisé par le système.
Il est recommandé de configurer cet élément. Le système recherchera par défaut les fichiers de style avec différents suffixes. Pour éviter une perte de performances inutile, il est préférable de le configurer avec le suffixe utilisé dans le projet !
Remarque : Les fichiers de style de composition indentés tels que
sassne sont pas pris en charge.
Le tableau de modèles dans vue prend en charge deux propriétés :
lang peut être défini sur "wxml" ou "pug" pour indiquer le langage utilisé ( spécifier l'attribut lang dans un framework de type vue peut provoquer des erreurs de compilation. Vous pouvez utiliser xlang à la place, mais cela entraînera l'achèvement de vue et minapp à la place. en même temps )minapp peut être défini sur "native" , "wepy" , "mpx" ou "mpvue" , indiquant le framework utilisé, la valeur par défaut est "mpvue"comme:
<template lang="wxml" minapp="native"> signifie utiliser le langage wxml sans utiliser de framework<template lang="pug" minapp="mpvue"> signifie utiliser le langage pug et utiliser le framework mpvueNotez que spécifier lang="wxml" dans mpvue signalera une erreur et vous devrez attendre que l'auteur la corrige ! Cependant, vous pouvez utiliser temporairement
xlang="wxml", mais cela déclenchera également l'achèvement automatique de vue.
Spécifier différentes valeurs minapp déclenchera la complétion automatique du framework correspondant. Comme je n'ai pas développé avec wepy et mpvue, ces complétions automatiques sont ajoutées selon la documentation officielle. S'il y a des erreurs, les relations publiques sont les bienvenues (il suffit de les modifier). fichier src/plugin/lib/langue.ts)
minapp-vscode.linkAttributeNames pour développer des balises supplémentaires prenant en charge le lien. Configurez cette valeur en tant que tableau vide pour désactiver la fonction de lien.minapp-vscode.resolveRoots peut être configuré pour utiliser des répertoires relatifs pour résoudre les chemins d'imageminapp-vscode.disableDecorate sur true pour activer la mise en surbrillance.minapp-vscode.decorateType pour utiliser votre couleur préférée, telle que {"color": "red"}minapp-vscode.decorateComplexInterpolation sur false , afin que seules les variables (telles que : foo , foo.prop , foo[1] ) soient mises en surbrillance. être mis en surbrillance sera mis en surbrillance et les expressions (telles que : foo + bar , foo < 3 ) ne seront pas mises en surbrillance et la couleur d'origine sera utilisée. Afin d'accélérer l'analyse, la mise en évidence des couleurs utilise la correspondance d'expressions régulières, donc des erreurs de correspondance peuvent se produire si vous n'êtes pas satisfait, vous pouvez configurer minapp-vscode.disableDecorate pour désactiver la fonction de mise en évidence des couleurs.
Problèmes connus :
minapp-vscode.snippetsLa différence avec les Snippets officiels est que les Snippets ici n'ont besoin que de spécifier la clé et le corps, et la description du composant sera automatiquement obtenue en fonction de la clé (de plus, la configuration peut être combinée avec les données intégrées ultérieurement)
aide-mémoire d'Emmet
Supporte prettyHtml , js-beautify et prettier (certains contenus doivent être écrits de manière compatible HTML)
wxml par défaut "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 et prettier , le fichier de configuration sous le projet sera automatiquement lu, Prettier configuration file .editorconfigprettyHtml , la syntaxe HTML5 adoptée par prettier n'est pas totalement cohérente avec wxml. Faites attention à la compatibilité lors de l'écriture.jsBeautifyHtml , lorsque la valeur est "useCodeBuiltInHTML" , les informations de configuration seront lues à partir de la documentation du champ de configuration html.format.* dans la configuration vscode et converties en configuration de js-beautify Le plugin minapp associera automatiquement les fichiers .pug au type de fichier wxml-pug . Il vous suffit donc de configurer l'association de fichiers dans le projet spécifique.
pugwxml-pug
