minapp vscode
v2.4.14
@iChenLei hat die Wartung dieses Plug-Ins übernommen. Jeder ist herzlich eingeladen, Kommentare in der DingTalk-Gruppe oder bei Github-Problemen abzugeben.
Alle automatisch vervollständigten Vorlagendaten stammen aus offiziellen Dokumenten und werden automatisch über Skripte abgerufen.
New Miniprogram Component anzuzeigen. Geben Sie den Komponentennamen ein, um .wxml / .js / .wxss / .json und Komponentenordner mit einem Klick zu erstellenjs Datei nach erfolgreicher Erstellung automatisch {
"minapp-vscode.cssExtname" : "less" , // 默认 wxss，支持 styl sass scss less css
"minapp-vscode.wxmlExtname" : "vue" , // 默认 wxml，支持 vue wpy
"minapp-vscode.jsExtname" : "ts" // 默认 js，支持 ts coffee
}< eingeben, um die Tag-Vervollständigung auszulösen, während Sie in der Pug-Sprache nur den Anfang des Tags schreiben müssen, um die Tag-Vervollständigung auszulösen.range und range-keystart und end .Die Funktion ist noch nicht perfekt. Sie sucht nur nach Skriptdateien mit demselben Namen wie die aktuelle Vorlage, sodass die Definition in JS möglicherweise nicht gefunden wird.
Das System ruft automatisch alle Stilnamen in der Stildatei mit demselben Namen wie die aktuelle Vorlage ab und kann auch die Dokumente in /** */ für den Stilnamen abrufen. Wenn globale Stile vorhanden sind, müssen Sie die Konfiguration verwenden item minapp-vscode.globalStyleFiles angegeben.
Standardmäßig wird der Name in der Stildatei mit demselben Namen wie die aktuelle Vorlage übernommen.
Hinweis: Wenn die Stildatei eine andere Stildatei @import , erhält das Programm den Stilnamen nicht aus der importierten Datei.
Darüber hinaus können Sie mit minapp-vscode.globalStyleFiles einige globale Stildateien angeben, sodass die Stilnamen in diesen Dateien auch nach Eingabe von class="" angezeigt werden.
Die app.wxss eines Miniprogramms ist im Allgemeinen ein globaler Stil, daher müssen Sie sie manuell über diese Konfiguration angeben, z. B. durch Konfigurieren minapp-vscode.globalStyleFiles: ["src/app.wxss"]
Darüber hinaus können Sie mit minapp-vscode.styleExtensions auch das Suffix der vom System verwendeten Stildatei angeben.
Es wird empfohlen, dieses Element zu konfigurieren. Das System sucht standardmäßig nach Stildateien mit verschiedenen Suffixen. Um unnötige Leistungseinbußen zu vermeiden, ist es am besten, es auf das im Projekt verwendete Suffix zu konfigurieren.
Hinweis: Eingerückte Satzstildateien wie
sasswerden nicht unterstützt.
Das Template-Board in Vue unterstützt zwei Eigenschaften:
lang kann auf "wxml" oder "pug" gesetzt werden lang xlang die verwendete Sprache anzugeben gleichzeitig )minapp kann auf "native" , "wepy" , "mpx" oder "mpvue" eingestellt werden, um das verwendete Framework anzugeben. Der Standardwert ist "mpvue"wie:
<template lang="wxml" minapp="native"> bedeutet die Verwendung der WXML-Sprache ohne Verwendung eines Frameworks<template lang="pug" minapp="mpvue"> bedeutet die Verwendung der Pug-Sprache und des MPvue-FrameworksBeachten Sie, dass die Angabe von lang="wxml" in mpvue einen Fehler meldet und Sie warten müssen, bis der Autor den Fehler behoben hat! Sie können jedoch vorübergehend
xlang="wxml"verwenden, dies löst jedoch auch die automatische Vervollständigung von vue aus.
Die Angabe verschiedener Minapp-Werte löst die automatische Vervollständigung des entsprechenden Frameworks aus. Da ich nicht mit wepy und mpvue entwickelt habe, werden diese automatischen Vervollständigungen gemäß der offiziellen Dokumentation hinzugefügt. Wenn es Fehler gibt, ist PR willkommen (muss nur geändert werden). Datei src/plugin/lib/sprache.ts)
minapp-vscode.linkAttributeNames konfigurieren, um zusätzliche Tags zu erweitern, die Link unterstützen. Konfigurieren Sie diesen Wert als leeres Array, um die Link-Funktion zu deaktivieren.minapp-vscode.resolveRoots kann so konfiguriert werden, dass relative Verzeichnisse zum Auflösen von Bildpfaden verwendet werdenminapp-vscode.disableDecorate auf true konfigurieren, um die Hervorhebung zu aktivieren.minapp-vscode.decorateType so konfigurieren, dass Ihre Lieblingsfarbe verwendet wird, z. B. {"color": "red"}minapp-vscode.decorateComplexInterpolation auf false konfigurieren, sodass nur Variablen (z. B. foo , foo.prop , foo[1] ) hervorgehoben werden hervorgehoben werden, und Ausdrücke (z. B. foo + bar , foo < 3 ) werden nicht hervorgehoben und die ursprüngliche Farbe wird verwendet. Um das Parsen zu beschleunigen, verwendet die Farbhervorhebung den Abgleich mit regulären Ausdrücken. Wenn Sie also nicht zufrieden sind, können Sie minapp-vscode.disableDecorate so konfigurieren, dass die Farbhervorhebungsfunktion deaktiviert wird.
Bekannte Probleme:
minapp-vscode.snippets definierenDer Unterschied zu den offiziellen Snippets besteht darin, dass die Snippets hier nur den Schlüssel und den Text angeben müssen und die Komponentenbeschreibung automatisch basierend auf dem Schlüssel abgerufen wird (außerdem kann die Konfiguration später mit den integrierten Daten kombiniert werden).
Emmet Spickzettel
Unterstützt prettyHtml , js-beautify und prettier (einige Inhalte müssen HTML-kompatibel geschrieben sein)
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 und prettier wird die Konfigurationsdatei unter dem Projekt automatisch gelesen, Prettier-Konfigurationsdatei .editorconfigprettyHtml stimmt die von prettier übernommene Syntax von HTML5 nicht vollständig mit der von WXML überein. Achten Sie beim Schreiben auf die Kompatibilität.jsBeautifyHtml der Wert "useCodeBuiltInHTML" lautet, werden die Konfigurationsinformationen aus dem Konfigurationsfelddokument html.format.* in der vscode-Konfiguration gelesen und in die Konfiguration von js-beautify konvertiert Das Minapp-Plugin ordnet .pug-Dateien automatisch dem Dateityp wxml-pug zu. Sie müssen also nur die Dateizuordnung im jeweiligen Projekt konfigurieren.
pug zuwxml-pug zu
