XunLFaça seu trabalho internacional avançar
Português
中文EnglishEspañolDeutschPortuguêsРусский
Minhas ferramentas

FORMATADOR DE CSS / CSS · SCSS · LESS

Formatador de CSS

Expanda uma folha de estilos de uma linha em regras organizadas.

Roda localmente · o código não é enviado
Opções

SEU PRÓXIMO PASSO

Conecte ferramentas úteis ao fluxo de trabalho da sua empresa

Crie uma conta empresarial para configurar monitoramento de sites, e-mail comercial e notificações e convide sua equipe para trabalhar junto.

Criar conta empresarialConhecer o ProFale conosco

Empresas novas recebem um teste Pro de 14 dias, sem cartão. Os testes não incluem a concessão mensal paga de créditos.

Já tem uma conta? Abra seu espaço de trabalho →

Como usar

  1. Cole o código, solte um arquivo ou carregue o exemplo; a linguagem já vem definida para esta página e pode ser alterada.
  2. Escolha formatar ou minificar e ajuste indentação, largura e outras opções; o resultado aparece à direita enquanto você digita.
  3. Copie ou baixe o resultado; em caso de erro, use "Ir para o erro", corrija e execute novamente.

Opções de estilo de código

Convenções comuns
OpçõesRecomendação
Indentação2 espaços (comum no front-end) / 4 espaços / tabulação
Largura da linhaQuebrar em 80; 100 ou 120 para telas largas
AspasDuplas (padrão do Prettier) ou simples
Ponto e vírgulaAtivado por padrão para evitar surpresas de ASI
Vírgulas finaisAdicionadas em listas de várias linhas para diffs mais limpos

Linguagens e mecanismos

A formatação usa os mesmos mecanismos de código aberto de editores populares, então os resultados coincidem com o Prettier no VS Code e sua equipe pode manter um único estilo. Todos os mecanismos são carregados deste site e rodam no seu navegador.

Idioma
IdiomaFormatoComprimir
HTMLPrettier 3✓ comentários e espaços
XMLMecanismo XML do XunL✓
CSS / SCSS / LessPrettier 3✓ reestruturação CSSO
JavaScript / TypeScriptPrettier 3 (Babel)✓ Terser (apenas JavaScript)
JSONPrettier 3✓ números grandes mantêm a precisão
YAMLPrettier 3— (comentários mantidos)
SQLsql-formatter (14 dialetos)—

Perguntas frequentes

A formatação vai mudar os estilos?

Não. Só mudam espaços, quebras de linha e o espaçamento em torno de dois-pontos e ponto e vírgula; seletores, propriedades e valores continuam iguais.

Meu código é enviado?

Não. Os mecanismos são baixados deste site e rodam no seu navegador; seu código nunca passa pelos nossos servidores nem por terceiros, então é seguro para código e configurações internas.

Qual o tamanho máximo dos arquivos?

Até 5 MB por arquivo; acima de 300 KB a página espera o botão em vez de formatar enquanto você digita, para manter o navegador responsivo.

guia prático do formatador de CSS e perguntas frequentes

O que faz um formatador de CSS?

O analisador PostCSS do Prettier 3 suporta CSS, SCSS e Less: uma declaração por linha, um seletor por linha, regras aninhadas e @media indentados pela profundidade, cores e valores como foram escritos.

Para quem é e quando é útil?

Desenvolvedores front-end, personalizadores de temas e profissionais de marketing que editam estilos do site e precisam ler uma folha de estilos de uma linha ou organizar SCSS e Less.

Como uso este formatador de CSS?

Cole CSS, SCSS ou Less para obter uma declaração por linha com aninhamento e media queries claros.

Como devo interpretar os resultados?

Apenas layout; a validade das propriedades não é verificada, e chaves quebradas ou ponto e vírgula ausentes são informados com linha e coluna.

Onde o trabalho é feito e quais serviços recebem dados?

As folhas de estilos são formatadas no seu navegador e nunca enviadas.