minapp vscode

WXML - Serviço de Linguagem

Última atualização【CHANGELOG.md】

@iChenLei assumiu a manutenção deste plug-in. Todos são bem-vindos para fornecer comentários no grupo DingTalk ou nas questões do Github.

Funções principais

• Crie componentes de miniprograma com um clique
• Nome da tag e preenchimento automático de atributos
• De acordo com as propriedades existentes do componente, o conjunto de propriedades suportado correspondente é automaticamente filtrado.
• Preenchimento automático de valor de atributo
• Clique na função ou atributo no arquivo de modelo para ir para o local onde js/ts está definido (suportado apenas por arquivos wxml ou pug puros, não totalmente suportado por arquivos vue)
• Preenchimento automático do nome do estilo (suportado apenas por arquivos wxml ou pug puros, não totalmente suportado por arquivos vue)
• Ele também pode ser preenchido automaticamente em arquivos de modelo vue e oferece suporte à linguagem pug.
• Link de suporte (suportado apenas por arquivos wxml ou pug puros, não suportado por arquivos vue)
• Conclusão automática de componentes personalizados (suportado apenas por arquivos wxml puros, não suportado por arquivos vue ou pug)
• Destacando variáveis ​​js em arquivos de modelo (suportado apenas por arquivos wxml ou pug puros, não suportado por arquivos vue)
• Trechos integrados
• Suporte ao método de escrita emmet
• formatação wxml

Todos os dados do modelo preenchido automaticamente vêm de documentos oficiais e são obtidos automaticamente por meio de scripts.

Crie componentes de miniprograma com um clique

• Clique com o botão direito para ver a opção New Miniprogram Component Insira o nome do componente para criar .wxml / .js / .wxss / .json e pastas de componentes com um clique.
• Abra automaticamente o arquivo js após a criação bem-sucedida

• A criação de componentes suporta a configuração do sufixo css/wxml/js, por exemplo, o projeto usa less/vue/ts

 {
  "minapp-vscode.cssExtname" : "less" , // 默认 wxss，支持 styl sass scss less css
  "minapp-vscode.wxmlExtname" : "vue" , // 默认 wxml，支持 vue wpy
  "minapp-vscode.jsExtname" : "ts" // 默认 js，支持 ts coffee
}

Nomes de tags e nomes de atributos são preenchidos automaticamente

• No wxml, você precisa inserir < para acionar a conclusão da tag, enquanto na linguagem pug, você só precisa escrever o início da tag para acionar a conclusão da tag.
• Inserir um espaço acionará a conclusão do atributo da tag correspondente.

De acordo com as propriedades existentes do componente, o conjunto de propriedades suportado correspondente é automaticamente filtrado.

• Quando o modo do seletor = "seletor", existem atributos range e range-key
• Quando o modo = "tempo" do seletor, existem atributos start e end .

Preenchimento automático de valores de atributos (o preenchimento só será acionado se houver um valor opcional)

• Ele pode ser acionado inserindo um espaço no valor do atributo, e o espaço será automaticamente substituído após a conclusão.

Clique na função ou atributo no arquivo de modelo para ir para o local onde js/ts está definido (suportado apenas por arquivos wxml ou pug puros, não totalmente suportado por arquivos vue)

A função ainda não está perfeita. Ela pesquisará apenas arquivos de script com o mesmo nome do modelo atual, portanto a definição em JS pode não ser encontrada.

Preenchimento automático do nome do estilo (suportado apenas por arquivos wxml ou pug puros, não totalmente suportado por arquivos vue)

O sistema obterá automaticamente todos os nomes de estilo no arquivo de estilo com o mesmo nome do modelo atual e também poderá obter os documentos em /** */ no nome do estilo se houver estilos globais, você precisará usar a configuração; item minapp-vscode.globalStyleFiles especificado.

• Por padrão, será obtido o nome no arquivo de estilo com o mesmo nome do modelo atual.

  Nota: Se o arquivo de estilo @import outro arquivo de estilo, o programa não obterá o nome do estilo no arquivo importado.

• Além disso, você pode usar minapp-vscode.globalStyleFiles para especificar alguns arquivos de estilo global, de modo que os nomes dos estilos nesses arquivos também apareçam após inserir class=""

  O app.wxss de um miniprograma geralmente é um estilo global, então você precisa especificá-lo manualmente por meio desta configuração, como configurar minapp-vscode.globalStyleFiles: ["src/app.wxss"]

• Além disso, você também pode usar minapp-vscode.styleExtensions para especificar o sufixo do arquivo de estilo usado pelo sistema.

  Recomenda-se configurar este item. O sistema irá procurar arquivos de estilo com vários sufixos por padrão. Para evitar perda desnecessária de desempenho, é melhor configurá-lo para o sufixo usado no projeto!

Nota: Arquivos de estilo de composição recuada, como sass não são suportados.

Ele também pode ser preenchido automaticamente em arquivos de modelo vue e oferece suporte à linguagem pug.

O template board em vue suporta duas propriedades:

1. lang pode ser definido como "wxml" ou "pug" para indicar o idioma usado ( especificar o atributo lang em uma estrutura semelhante a vue pode causar erros de compilação. Você pode usar xlang em vez disso, mas isso causará a conclusão de vue e minapp no mesmo tempo )
2. minapp pode ser definido como "native" , "wepy" , "mpx" ou "mpvue" , ​​indicando o framework usado, o padrão é "mpvue"

como:

• <template lang="wxml" minapp="native"> significa usar a linguagem wxml sem usar qualquer framework
• <template lang="pug" minapp="mpvue"> significa usar a linguagem pug e a estrutura mpvue

Observe que especificar lang="wxml" em mpvue reportará um erro e você precisará esperar que o autor o corrija! No entanto, você pode usar temporariamente xlang="wxml" , mas isso também acionará a conclusão automática do vue.

A especificação de diferentes valores de minapp acionará o preenchimento automático da estrutura correspondente. Como não desenvolvi usando wepy e mpvue, esses preenchimentos automáticos são adicionados de acordo com a documentação oficial. Se houver erros, PR é bem-vindo (só precisa modificar). arquivo src/plugin/lib/idioma.ts)

Link de suporte (suportado apenas por arquivos wxml ou pug puros, não suportado por arquivos vue)

• Por padrão, apenas a tag src será vinculada e o arquivo precisa existir. Caso não exista, o link não será adicionado.
• Você pode configurar minapp-vscode.linkAttributeNames para expandir tags adicionais que suportam link. Configure esse valor como uma matriz vazia para desabilitar a função de link.
• minapp-vscode.resolveRoots pode ser configurado para usar diretórios relativos para resolver caminhos de imagem

Conclusão automática de componentes personalizados (suportado apenas por arquivos wxml puros, não suportado por arquivos vue ou pug)

• Obtenha automaticamente informações do componente no arquivo JSON correspondente
• Priorize componentes personalizados
• Obtenha automaticamente descrições de propriedades em componentes

Destacando variáveis ​​js em arquivos de modelo (suportado apenas por arquivos wxml ou pug puros, não suportado por arquivos vue)

• O realce está desativado por padrão. Você pode configurar minapp-vscode.disableDecorate como true para ativar o realce.
• A cor de destaque padrão é roxa. Você pode configurar minapp-vscode.decorateType para usar sua cor favorita, como {"color": "red"}
• Por padrão, todos os caracteres entre "{{" e "}}" serão destacados. Você pode configurar minapp-vscode.decorateComplexInterpolation como false , para que apenas variáveis ​​(como: foo , foo.prop , foo[1] ) sejam exibidas. ser destacado será destacado e expressões (como: foo + bar , foo < 3 ) não serão destacadas e a cor original será usada.

Para acelerar a análise, o realce de cores usa correspondência de expressões regulares, portanto, podem ocorrer erros de correspondência se você não estiver satisfeito, você pode configurar minapp-vscode.disableDecorate para desabilitar a função de realce de cores;

Problemas conhecidos:

• Variáveis ​​​​em comentários na linguagem pug também serão destacadas (pug é baseado em recuo e expressões regulares não são fáceis de manusear)

Trechos integrados

• Vem com swiper/ícone/botão/hora do seletor/data do seletor/região do seletor/grupo de caixas de seleção/grupo de rádio, veja o arquivo
• Você pode definir seus próprios snippets através do item de configuração minapp-vscode.snippets

A diferença dos Snippets oficiais é que os Snippets aqui só precisam especificar a chave e o corpo, e a descrição do componente será obtida automaticamente com base na chave (além disso, a configuração pode ser combinada posteriormente com os dados integrados)

Suporte ao método de escrita emmet

folha de dicas do emmet

formato wxml

Suporta prettyHtml , js-beautify e prettier (algum conteúdo precisa ser escrito de forma compatível com HTML)

• wxml padrão

 "minapp-vscode.wxmlFormatter" : "wxml" , // 指定格式化工具

• js-embelezar

 "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"
}

• bonitoHtml

 "minapp-vscode.wxmlFormatter" : "prettyHtml" , // 指定格式化工具
"minapp-vscode.prettyHtml" : { // prettyHtml 默认配置
  "useTabs" : false ,
  "tabWidth" : 2 ,
  "printWidth" : 100 ,
  "singleQuote" : false ,
  "usePrettier" : true ,
  "wrapAttributes" : false , // 设置成 true 强制属性换行
  "sortAttributes" : false
}

• mais bonito

 "minapp-vscode.wxmlFormatter" : "prettier" , // 指定格式化工具
"minapp-vscode.prettier" : { // prettier 更多参考 https://prettier.io/docs/en/options.html
  "useTabs" : false ,
  "tabWidth" : 2 ,
  "printWidth" : 100 ,
  "singleQuote" : false
}

• pontas:
  1. Para os modos prettyHtml e prettier , o arquivo de configuração do projeto será lido automaticamente, arquivo de configuração mais bonito .editorconfig
  2. A troca de ferramentas de formatação requer a reinicialização do VSCode
  3. Para prettyHtml , a sintaxe do HTML5 adotada pelo prettier não é totalmente consistente com o wxml. Preste atenção à compatibilidade ao escrever.
  4. Para jsBeautifyHtml , quando o valor for "useCodeBuiltInHTML" , as informações de configuração serão lidas do documento do campo de configuração html.format.* na configuração do vscode e convertidas na configuração de js-beautify

Perguntas frequentes

O preenchimento automático não aparece após a instalação do plug-in

1. Certifique-se de ter reiniciado o VSCode após a instalação
2. Certifique-se de que o formato do arquivo atual seja wxml ou wxml-pug ou vue (você não pode ver o sufixo do arquivo porque eles podem estar associados a outros formatos de arquivo no arquivo de configuração; você precisa olhar o tipo de arquivo exibido na parte inferior canto direito do vscode)

Em projetos que não sejam de miniprogramas, os arquivos pug não desejam a conclusão automática de miniprogramas.

O plugin minapp associará automaticamente os arquivos .pug ao tipo de arquivo wxml-pug . Então você só precisa configurar a associação de arquivos no projeto específico.

• Em projetos que não sejam de miniprogramas, associe arquivos com o sufixo .pug ao tipo de arquivo pug
• No projeto do miniprograma, associe arquivos com o sufixo .pug ao tipo de arquivo wxml-pug