Formatador de JS/CSS

Free

Reformata JavaScript ou CSS minificado ou com indentação inconsistente em código legível e corretamente indentado, com estilo de indentação ajustável e estatísticas de tamanho antes/depois.

Entrada

Indentação

Saída formatada

Sobre esta ferramenta

Reformata JavaScript ou CSS minificado ou com indentação inconsistente em código legível e corretamente indentado.
Não minifica. Para reduzir o tamanho do código, use um minificador dedicado.

Atividade recente

Visível para todos. Últimos 20 usos de todos os visitantes, mais recentes primeiro.

Formatted 52 characters of JavaScript

há 1 hora

Formatted 51 characters of CSS

há 1 hora

Formatted 52 characters of JavaScript

há 1 hora

Comentários (0)

Achou esta ferramenta útil? Deixe um comentário, compartilhe uma dica ou nos diga como podemos melhorá-la.

Ainda sem comentários. Seja o primeiro a compartilhar sua opinião!

O que esta ferramenta faz

Cole JavaScript ou CSS minificado ou com indentação desorganizada, escolha um estilo de indentação, e esta ferramenta o reformata em código legível com indentação e quebras de linha consistentes.

Como funciona

A ferramenta analisa seu código em tokens (palavras-chave, colchetes, operadores, strings), depois reimprime esses tokens com novas quebras de linha e indentação com base na profundidade de aninhamento, usando o mecanismo de código aberto js-beautify para JavaScript e CSS, respectivamente. Os tokens subjacentes e sua ordem nunca são alterados, apenas o espaço em branco ao redor deles.

Problemas que resolve

Tornar um arquivo JS ou CSS minificado em uma linha legível novamente para depuração ou revisão.
Normalizar a indentação inconsistente (tabs e espaços misturados, larguras inconsistentes) em um arquivo.
Inspecionar rapidamente código de terceiros ou de fornecedores que é distribuído minificado.
Converter entre indentação de 2 espaços, 4 espaços e tab para corresponder ao guia de estilo de um projeto.

Perguntas frequentes

›Esta ferramenta também minifica o código?

Não, esta ferramenta apenas formata (embeleza) o código adicionando indentação e quebras de linha adequadas. Se você precisar reduzir o tamanho do código removendo espaços em branco, use uma ferramenta de minificação dedicada.

›A formatação mudará o comportamento do meu código?

Não. A formatação altera apenas espaços em branco, indentação e quebras de linha. Nunca altera identificadores, lógica ou conteúdo de strings, portanto o código formatado se comporta de forma idêntica ao original.

›Por que meu JavaScript parece errado após a formatação?

Se a entrada tiver um erro de sintaxe (um colchete não fechado, uma vírgula perdida, JSON inválido usado como JS, etc.), o formatador pode interpretar mal a estrutura. Verifique a console do navegador ou um linter de JavaScript para encontrar o problema exato de sintaxe, corrija-o e formate novamente.

›Posso formatar SCSS ou LESS com isso?

A sintaxe básica de SCSS e LESS (aninhamento, variáveis, comentários) geralmente formata bem, pois ainda é semelhante a CSS, mas recursos específicos do pré-processador, como mixins ou funções, não são especificamente compreendidos e podem ser reformatados de forma imperfeita.

›Por que escolher tabs em vez de espaços para a indentação?

É puramente uma preferência de estilo, ambos são funcionalmente idênticos em JavaScript e CSS. Escolha o que corresponder ao guia de estilo existente do seu projeto ou à configuração do seu editor.

Calcule o hash BLAKE2b de um texto ou arquivo no seu navegador, com comprimento de saída ajustável e hashing com chave opcional (MAC).