09.02.2025

Configurando o Prettier no VS Code: Como Manter os Atributos Íntegros

Resumo Rápido

Para evitar que os atributos HTML quebrem em várias linhas ao usar Prettier no VS Code, defina um valor mais alto para printWidth nas configurações do Prettier:

{ "printWidth": 120 }

Aumentar o valor de printWidth permite que linhas de código mais longas permaneçam juntas até que o Prettier decida quebrá-las, ajudando a manter os atributos na mesma linha.

Formatação Manual: Seu Código - Suas Regras

Se você deseja um controle mais preciso sobre os resultados gerados pelo Prettier:

• Desative a Formatação ao Salvar: Isso impedirá a formatação automática ao salvar o arquivo. É bastante útil se você prefere gerenciar a formatação pessoalmente.

• Use Atalhos de Teclado: No VS Code, pressione Alt+Shift+F (para Windows/Linux) ou Option+Shift+F (para macOS) para aplicar a formatação de código manualmente. Embora não seja mágica, está bem perto!

• Configure Preferências de Formatação: Usando um arquivo .prettierrc.json, você pode ajustar finamente várias opções de formatação. O Prettier oferece toda a configurabilidade que você precisa!

• Controle a Formatação de Blocos de Código Específicos: Coloque o comentário <!-- prettier-ignore --> antes do bloco HTML que você deseja que o Prettier ignore. É como lançar um feitiço que faz o Prettier desconsiderar seções específicas!

Ajustes Gradativos: Sob Seu Olhar Atento

Ajuste suas configurações de forma incremental para alcançar a melhor configuração:

• Comece com um valor de printWidth entre 80-100 para legibilidade, e aumente gradualmente até encontrar a faixa ideal.

• Experimente o playground do Prettier para testar configurações em um ambiente visual divertido. É uma ótima maneira de aprender e se inspirar!

• Faça ajustes incrementais: Explore diferentes opções e observe como o código muda para encontrar as configurações mais adequadas.

• O arquivo .prettierrc.json garante consistência nas regras de formatação entre diferentes dispositivos ou em projetos de equipe.

Amplie Seus Horizontes: Prettier Não É Tudo

Se o Prettier não atende a todas as suas necessidades, considere as seguintes sugestões:

• Acordo da Equipe: Escolha e concorde em um arquivo compartilhado .prettierrc.json para manter um estilo de código uniforme em toda a equipe.

• Mantenha-se Atualizado: Fique de olho nas versões mais recentes do Prettier e seus plugins, que podem expandir suas capacidades.

• Explore Alternativas: Procure outras ferramentas de formatação de código e extensões que podem se adaptar melhor ao seu caso específico.

Visualização

Vamos supor que temos uma lista:

Antes de aplicar o Prettier:  [📃(alpha, bravo, charlie, delta)]
Depois de aplicar o Prettier:   
[📃(alpha,   
     bravo,   
     charlie,   
     delta)]

Prettier é como um professor exigente, que demanda organização e disciplina do seu código:

O controle pode ser recuperado através das configurações:
🔧 Settings.json:
{
  "prettier.printWidth": PAGE_WIDTH
}

PAGE_WIDTH nos ajudará a ajustar quanto texto cabe em uma linha antes que o Prettier o quebre:

📃(alpha, bravo, charlie, delta) // Ordem e harmonia restauradas.

Assim como cada professor tem suas próprias exigências, diversos projetos exigir��o suas configurações únicas do Prettier. Em conclusão, ajuste os parâmetros com base nas especificidades do seu projeto.

Atualizações de Software: Quando Tudo Sai do Controle

Após as atualizações, o Prettier pode causar mudanças radicais de tempos em tempos. Você precisará estar preparado para responder adequadamente a essas surpresas:

• Versionamento do .prettierrc.json: Trave as configurações para uma versão específica do Prettier para evitar mudanças inesperadas.

• Implemente Integração Contínua: Utilize sistemas de CI para verificar a conformidade do código com as regras de estilo estabelecidas no seu .prettierrc.json. É como ter um guardião que mantém a ordem no código.

• Integração Cautelosa: Ao trabalhar em projetos com muito código legado, aplique o Prettier apenas nos arquivos que estão sendo editados.

Recursos Úteis

1. Options · Prettier — Documentação oficial do Prettier, onde você pode encontrar informações detalhadas sobre como definir o print width.

2. Option to retain multi-line props in JSX/HTML · Issue #3101 · prettier/prettier · GitHub — Uma discussão animada sobre atributos em várias linhas, lembrando uma sessão de brainstorming.

3. Prettier - Code formatter - Visual Studio Marketplace — Configurações para a extensão Prettier no VS Code.

4. Prettier Playground — Um playground onde você pode brincar com as configurações do Prettier.

5. Reddit - Dive into anything — Uma discussão no Reddit onde você pode aprender sobre as preferências pessoais dos desenvolvedores e soluções no formato de código.

Video

Navigation