Anúncios incomodam? Ir Sem anúncios Hoje 

Formatador de Código TypeScript

Desenvolvedor

ANÚNCIO · REMOVER?

ENTRADA

Processo Automático

SAÍDA

Lado cliente

ANÚNCIO · REMOVER?

Guia

Formatador de Código TypeScript

Projetos TypeScript vivem e morrem por formatação consistente. Se a sua equipe usa ponto e vírgula ou os omite, prefere aspas simples ou duplas, indentação de dois ou quatro espaços — o formatador precisa aplicar essas regras de forma consistente em todos os arquivos. Esta ferramenta formata seu código TypeScript do lado do cliente com opções de estilo configuráveis, para que você possa corresponder às convenções do seu projeto sem instalar nada.

Cole seu código .ts ou .tsx, escolha suas preferências de estilo e obtenha o resultado formatado instantaneamente. Tudo roda no seu navegador — nenhum código é carregado ou armazenado.

Como usar

Cole seu código TypeScript na área de entrada ou experimente o exemplo integrado. Configure seu estilo preferido: tipo e largura de indentação, ponto e vírgula, estilo de aspas, vírgulas finais e largura de impressão. O resultado formatado aparece com as convenções escolhidas aplicadas. Copie o resultado ou baixe-o como um arquivo .ts.

ANÚNCIO · REMOVER?

Características

Indentação Configurável – Escolha 2 espaços, 4 espaços ou tabulações para corresponder ao estilo do seu projeto
Controle de Ponto e Vírgula – Adicione ou remova ponto e vírgula com base na preferência da sua equipe
Estilo de citação – Normalize para aspas simples ou duplas em todos os literais de string
Opções de Vírgula Final – Nenhum, compatível com ES5, ou todas as vírgulas finais
Largura de Impressão – Defina a largura da linha para 80, 100 ou 120 caracteres
Ordenação de Importações – Automaticamente ordene alfabeticamente e organize as declarações de importação
Formatação de Anotação de Tipo – Espaçamento consistente em torno de dois pontos, genéricos e parâmetros de tipo
Validação de Sintaxe – Detecta erros comuns com relatório de número de linha
Análise Ciente do Contexto – Respeita strings, comentários e literais de template ao formatar
Apenas no Lado do Cliente – Seu código nunca sai do seu navegador

Quando usar esta ferramenta

Use-o quando precisar reformatar rapidamente trechos de TypeScript antes de colá-los na documentação, limpar código de tutoriais ou Stack Overflow, normalizar a formatação antes de revisões de código, ou aplicar estilo consistente a código que não foi escrito com as convenções do seu projeto. Também é útil para converter entre preferências de estilo — alternar de ponto e vírgula para sem ponto e vírgula, ou de aspas simples para duplas.

 Perguntas frequentes

Qual é a diferença entre formatação de TypeScript e JavaScript?

TypeScript estende JavaScript com anotações de tipo, interfaces, genéricos, enums e outros recursos do sistema de tipos. Um formatador de TypeScript precisa lidar com toda a formatação padrão do JavaScript, além de sintaxe específica de tipo, como dois pontos em anotações de tipo (const x: string), colchetes angulares em genéricos (Array), declarações de interface e alias de tipo, e formatação de enum. Formatadores JavaScript padrão podem quebrar ou ignorar essas construções específicas do TypeScript.
Projetos TypeScript devem usar ponto e vírgula ou não?

Ambas as abordagens são válidas e amplamente utilizadas. TypeScript (assim como JavaScript) possui inserção automática de ponto e vírgula (ASI) que adiciona ponto e vírgula no tempo de análise, portanto, omiti-los funciona na maioria dos casos. Equipes que pulam o ponto e vírgula citam um código mais limpo e menos digitação. Equipes que os incluem citam a explicitação e a evitação de casos de borda raros de ASI. A chave é a consistência — escolha um estilo e o aplique em todo o projeto. A maioria dos guias de estilo principais (Airbnb, Google) inclui ponto e vírgula, enquanto StandardJS os omite.
Por que a ordem de importação importa em TypeScript?

A ordenação consistente de importações melhora a legibilidade do código e reduz conflitos de mesclagem. Quando as importações são ordenadas alfabeticamente e agrupadas logicamente (pacotes de terceiros primeiro, depois módulos internos), os desenvolvedores podem encontrar rapidamente importações específicas e evitar duplicatas. Importações desordenadas também causam diffs desnecessários no git — dois desenvolvedores adicionando importações em posições diferentes criam um conflito de mesclagem, mesmo que a alteração real do código seja idêntica.
O que são vírgulas finais e por que usá-las em TypeScript?

Vírgulas finais são vírgulas colocadas após o último elemento em arrays, objetos, parâmetros de função e parâmetros de tipo. O uso de vírgulas finais produz diffs de git mais limpos, pois adicionar um novo item altera apenas uma linha em vez de duas (a nova linha mais a adição de uma vírgula na última linha anterior). Elas também facilitam a reordenação de itens. ES5 permite vírgulas finais em arrays e objetos; ES2017 e TypeScript permitem em parâmetros de função também.
Qual largura de impressão os projetos TypeScript devem usar?

As escolhas mais comuns são 80, 100 e 120 caracteres. 80 caracteres é o padrão tradicional, originado de limitações de largura de terminal, e permanece o padrão no Prettier. 100 caracteres é um compromisso moderno popular que acomoda as anotações de tipo verbosas do TypeScript sem excesso de quebras de linha. 120 caracteres funciona bem em monitores largos, mas pode prejudicar a legibilidade em telas menores ou em visualizações de diff lado a lado. Escolha com base na configuração típica de tela da sua equipe e no fluxo de trabalho de revisão de código.