Formatador de Vue
Formate componentes de arquivo único Vue com este Formatter Vue. Cole um componente e a ferramenta formata seu bloco script como JavaScript, ou como TypeScript quando lang é ts, e seu bloco style como CSS, SCSS ou Less, conforme o atributo lang, indentando ambos sob suas tags. O bloco template é mantido em uma única linha, com os espaços em branco reduzidos. Útil para desenvolvedores Vue que organizam componentes para revisões e documentação.
Perguntas frequentes
O que o Formatter Vue altera em um componente?
Ele formata o conteúdo dos blocos script e style e coloca cada bloco de nível superior em sua própria linha. O código dentro de cada bloco recebe indentação de dois espaços sob a tag de abertura.
Como o bloco template é tratado?
O bloco template é mantido em uma única linha, com sequências de espaços em branco reduzidas a espaços simples. Diretivas como v-if, v-for, :prop e @event e expressões mustache são copiadas exatamente como foram escritas.
Como o bloco script é formatado?
Um bloco script simples é analisado e impresso como JavaScript, com indentação de dois espaços e ponto e vírgula. Com lang="ts", ele é formatado como TypeScript, que também aceita anotações de tipo.
Como o bloco style é formatado?
Por padrão, um bloco style é formatado como CSS, com uma declaração por linha. Com lang="scss" ou lang="less", ele usa as regras de SCSS ou Less, e o atributo scoped é mantido.
O que acontece quando há um erro de sintaxe no script?
Os blocos JavaScript e CSS são analisados; portanto, um erro de sintaxe interrompe a ferramenta e sua mensagem é exibida. Corrija o problema informado e formate novamente.
Há suporte para script setup?
Sim, o atributo setup é mantido na tag e o conteúdo é formatado como qualquer outro bloco script. Macros do compilador, como defineProps, são chamadas de função comuns para o formatador.
Posso mudar a indentação?
Não, o formatador sempre usa dois espaços e não tem opções. O mesmo componente sempre produz a mesma saída.
Os comentários são preservados?
Sim, comentários HTML entre blocos e comentários dentro dos blocos script e style são mantidos. Comentários dentro do template permanecem no lugar, em sua única linha.
Por que o resultado vem delimitado como html?
Componentes de arquivo único são lidos como HTML; por isso, o resultado é retornado em um bloco de código Markdown marcado como html. Copie as linhas entre as cercas para o seu arquivo .vue.
Qual pode ser o tamanho do componente?
Até 5 MB por execução; entradas maiores são rejeitadas com uma mensagem. A saída é idêntica à opção Vue do Code Formatter.