Grátis · Desenvolvimento
Formatador de código (Prettier).
Formate JavaScript, TypeScript, JSX, JSON, CSS, SCSS, Less, HTML, Vue, Markdown, YAML e GraphQL com Prettier no navegador, com pré-visualização ao vivo.
Formatting engine: Prettier 3 (MIT), running in your browser. Formatting changes layout only, never what the code does; comments are kept.
Formatar código com Prettier
- Cole seu código em
Your codeou clique emOpen a file. - Mantenha
Detect automaticallyou escolha a linguagem: JavaScript, JSX, TypeScript, JSON, CSS, SCSS, Less, HTML, Vue, Markdown, YAML ou GraphQL. - Ajuste a largura de linha, a indentação e, para JavaScript e TypeScript, ponto e vírgula, aspas e vírgulas finais. O resultado é atualizado enquanto você digita.
- Clique em
Copy result,DownloadouReplace my code.
Exemplo: const a={b:1,c:[1,2,3]};function f(x){return x*2} vira um objeto numa linha seguido de um bloco de função com indentação de dois espaços, cada instrução terminando com ponto e vírgula.
O que a formatação muda
O Prettier reescreve espaços, quebras de linha, indentação, aspas e vírgulas para o código seguir um estilo consistente. Ele nunca muda o que o código faz, e os comentários são mantidos. Se houver erro de sintaxe, nada é formatado e a mensagem indica a linha e a coluna, por exemplo (1:10).
Para uma linguagem com opções próprias, veja o formatador JSON ou o formatador SQL; para reduzir JavaScript em produção, o minificador de JavaScript.
Limites e formatos aceitos
Seus dados são processados no seu dispositivo.
Notas técnicas em inglês
Files up to 2 MB. Code with syntax errors is not formatted; the error shows the line and column. Formatting changes layout only, never behaviour; comments are kept.
Uses Prettier 3 standalone (MIT) with only the parsers the chosen language needs, loaded on demand in your browser. Same output rules as Prettier on the command line for the options shown.
const a={b:1,c:[1,2,3]};function f(x){return x*2} becomes const a = { b: 1, c: [1, 2, 3] }; followed by a function block indented with two spaces.
Perguntas frequentes
Meu código é enviado?
Não. O Prettier roda no navegador, e só os analisadores da linguagem escolhida são carregados.
O resultado é igual ao do Prettier no meu computador?
Sim, para as opções mostradas aqui: é o próprio Prettier 3, sem arquivo de configuração do projeto.
Por que meu código não foi formatado?
O analisador encontrou um erro de sintaxe. Corrija a linha e a coluna indicadas na mensagem ou confira se a linguagem certa está escolhida.