minapp vscode
v2.4.14
@iChenLei se ha hecho cargo del mantenimiento de este complemento. Todos pueden enviar comentarios en el grupo DingTalk o en los problemas de Github.
Todos los datos de la plantilla completada automáticamente provienen de documentos oficiales y se obtienen automáticamente mediante scripts.
New Miniprogram Component Ingrese el nombre del componente para crear .wxml / .js / .wxss / .json y carpetas de componentes con un solo clic.js después de una creación exitosa {
"minapp-vscode.cssExtname" : "less" , // 默认 wxss，支持 styl sass scss less css
"minapp-vscode.wxmlExtname" : "vue" , // 默认 wxml，支持 vue wpy
"minapp-vscode.jsExtname" : "ts" // 默认 js，支持 ts coffee
}< para activar la finalización de la etiqueta, mientras que en el lenguaje pug, solo necesita escribir el comienzo de la etiqueta para activar la finalización de la etiqueta.range y range-keystart y end .La función aún no es perfecta. Solo buscará archivos de script con el mismo nombre que la plantilla actual, por lo que es posible que no se encuentre la definición en JS.
El sistema obtendrá automáticamente todos los nombres de estilo en el archivo de estilo con el mismo nombre que la plantilla actual, y también puede obtener los documentos en /** */ en el nombre de estilo, si hay estilos globales, debe usar la configuración; elemento minapp-vscode.globalStyleFiles especificado.
De forma predeterminada, se obtendrá el nombre en el archivo de estilo con el mismo nombre que la plantilla actual.
Nota: Si el archivo de estilo @import otro archivo de estilo, el programa no obtendrá el nombre del estilo en el archivo importado.
Además, puede usar minapp-vscode.globalStyleFiles para especificar algunos archivos de estilo globales, de modo que los nombres de estilo en estos archivos también aparezcan después de ingresar class=""
El app.wxss de un miniprograma es generalmente un estilo global, por lo que debe especificarlo manualmente a través de esta configuración, como configurar minapp-vscode.globalStyleFiles: ["src/app.wxss"]
Además, también puede utilizar minapp-vscode.styleExtensions para especificar el sufijo del archivo de estilo utilizado por el sistema.
Se recomienda configurar este elemento. El sistema buscará archivos de estilo con varios sufijos de forma predeterminada. Para evitar pérdidas innecesarias de rendimiento, es mejor configurarlo con el sufijo utilizado en el proyecto.
Nota: No se admiten archivos de estilo de composición tipográfica con sangría, como
sass.
El tablero de plantilla en vue admite dos propiedades:
lang se puede configurar en "wxml" o "pug" para indicar el idioma utilizado ( especificar el atributo lang en un marco similar a vue puede causar errores de compilación. Puede usar xlang en su lugar, pero esto provocará que vue y minapp se completen en el mismo tiempo )minapp se puede configurar en "native" , "wepy" , "mpx" o "mpvue" , lo que indica el marco utilizado, el valor predeterminado es "mpvue"como:
<template lang="wxml" minapp="native"> significa usar lenguaje wxml sin usar ningún marco<template lang="pug" minapp="mpvue"> significa usar lenguaje pug y usar el marco mpvueTenga en cuenta que especificar lang="wxml" en mpvue informará un error y deberá esperar a que el autor lo solucione. Sin embargo, puede usar temporalmente
xlang="wxml", pero esto también activará la finalización automática de vue.
Especificar diferentes valores de minapp activará la finalización automática del marco correspondiente. Dado que no he desarrollado usando wepy y mpvue, estas finalizaciones automáticas se agregan de acuerdo con la documentación oficial. Si hay errores, PR es bienvenido (solo es necesario modificarlo). archivo src/plugin/lib/language.ts)
minapp-vscode.linkAttributeNames para expandir etiquetas adicionales que admitan el enlace. Configure este valor como una matriz vacía para deshabilitar la función de enlace.minapp-vscode.resolveRoots se puede configurar para usar directorios relativos para resolver rutas de imágenesminapp-vscode.disableDecorate en true para activar el resaltado.minapp-vscode.decorateType para usar su color favorito, como {"color": "red"}minapp-vscode.decorateComplexInterpolation en false para que solo se muestren las variables (como: foo , foo.prop , foo[1] ). se resaltará y las expresiones (como: foo + bar , foo < 3 ) no se resaltarán y se utilizará el color original. Para acelerar el análisis, el resaltado de color utiliza la coincidencia de expresiones regulares, por lo que pueden ocurrir errores de coincidencia. Si no está satisfecho, puede configurar minapp-vscode.disableDecorate para deshabilitar la función de resaltado de color.
Problemas conocidos:
minapp-vscode.snippetsLa diferencia con los Snippets oficiales es que los Snippets aquí solo necesitan especificar la clave y el cuerpo, y la descripción del componente se obtendrá automáticamente en función de la clave (además, la configuración se puede combinar con los datos integrados más adelante)
hoja de trucos de emmet
Admite prettyHtml , js-beautify y prettier (algunos contenidos deben escribirse de forma compatible con HTML)
wxml predeterminado "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 y prettier , el archivo de configuración del proyecto se leerá automáticamente, el archivo de configuración Prettier .editorconfigprettyHtml , la sintaxis de HTML5 adoptada por prettier no es completamente consistente con wxml. Preste atención a la compatibilidad al escribir.jsBeautifyHtml , cuando el valor es "useCodeBuiltInHTML" , la información de configuración se leerá del documento del campo de configuración html.format.* en la configuración de vscode y se convertirá a la configuración de js-beautify El complemento minapp asociará automáticamente los archivos .pug al tipo de archivo wxml-pug . Por lo tanto, solo necesita configurar la asociación de archivos en el proyecto específico.
pugwxml-pug
