Durante o desenvolvimento de aplicações, especialmente em equipe ou em projetos grandes, é comum ver trechos de código com diferentes estilos de escrita: uns com indentação de 2 espaços, outros com 4; uns com ponto e vírgula no final das linhas, outros sem; aspas simples e duplas misturadas… Tudo isso pode tornar o código mais difícil de manter e revisar.

O que é o Prettier?

O Prettier é uma ferramenta de formatação automática de código. Ele garante que todo o seu código siga um padrão consistente, independentemente de quem está escrevendo. Ele funciona com várias linguagens e é amplamente utilizado em projetos com JavaScript, TypeScript, React, HTML, CSS, entre outras.

Ao salvar um arquivo ou rodar um comando, o Prettier reformatará automaticamente seu código de acordo com as regras definidas.

Instalando e Configurando o Prettier no Projeto

1. Instalar o Prettier como dependência de desenvolvimento

No terminal, execute:

npm install prettier --save-dev

Isso adiciona o Prettier ao seu projeto, permitindo que ele seja usado localmente, sem depender da instalação global.

2. Criar o arquivo .prettierrc

Esse arquivo define as regras de formatação que o Prettier deve seguir:

{
    "trailingComma": "es5",
    "tabWidth": 4,
    "semi": true,
    "singleQuote": true,
    "printWidth": 100
}

Explicando cada configuração

• "trailingComma": "es5" → adiciona vírgula no final de objetos e arrays, quando possível (estilo ES5).
• "tabWidth": 4 → define o tamanho da identação para 4 espaços.
• "semi": true → adiciona ponto e vírgula ao final de cada linha.