Visual Studio Code: extensão Prettier

O Visual Studio Code (VS Code) suporta a extensão Prettier, uma ferramenta popular para formatação de código que garante a consistência estilística e facilita a leitura. Como um “opinionated code formatter“, o Prettier aplica um conjunto de regras de formatação predefinidas, reduzindo a necessidade de debates sobre estilo e ajudando a manter um padrão uniforme em projetos colaborativos.

Como o Prettier Funciona

Assim que o Visual Studio Code ativa a extensão Prettier, ele formata automaticamente, conforme as regras predefinidas ou configuradas pelo usuário. As ações incluídas são:

• 

  Adição ou remoção de espaços em branco.

• Ajuste da indentação para uma profundidade consistente (por exemplo, 2 ou 4 espaços).
• Coloque as chaves {} de blocos de código em linhas específicas.
• Quebra automática de linhas longas para não ultrapasse um limite de caracteres.
• Padronização de aspas simples ou duplas para strings.
• Ordenação de propriedades de objetos em JavaScript ou TypeScript.

Instalação do Prettier no Visual Studio Code

1. Instalação da Extensão:
   • Primeiramente a aba de extensões no VS Code é acessada (ícone de quadrados no menu lateral ou atalho Ctrl + Shift + X).
   • Aí pesquise por “Prettier” e selecione esta extensão “Prettier – Code formatter”.
   • Conclua a instalação clicando em “Install”.
2. Configuração:
   • Já instalado, configure o Prettier globalmente ou por projeto.
   • Ajuste as configurações globais dentro do arquivo de configurações do VS Code (settings.json), acessível via Ctrl + , buscando “Prettier” ou “format”.
   • Para projetos específicos, um arquivo de configuração como .prettierrc você pode criar na raiz do projeto. É nesse arquivo que se define as regras específicas de formatação, como:

     {
     "printWidth": 80,
     "tabWidth": 2,
     "useTabs": false,
     "semi": true,
     "singleQuote": true
     }

3. Uso da extensão Prettier:
   • Após configurado, o Prettier pode formatar automaticamente o código ao salvar o arquivo. Isso é habilitado em File > Preferences > Settings, buscando “Format On Save” (ou diretamente no settings.json com "editor.formatOnSave": true).
   • Para formatação manual, Ctrl + Shift + P abre o Command Palette, onde “Format Document” é digitado e o Prettier é selecionado como formatador.
4. Integração com ESLint:
   • O Prettier se integra ao ESLint, que é uma ferramenta de linting para JavaScript e TypeScript, afim de evitar conflitos de regras entre as ferramentas. Isso é feito instalando o pacote eslint-config-prettier, que desabilita todas as regras de formatação do ESLint que poderiam entrar em conflito com o Prettier.

Sem Prettier / Com Prettier

Principais vantagens da extensão Prettier

• Consistência: Assim garante que todo o código siga um estilo uniforme, independentemente de quem o escreveu.
• Produtividade: Decerto automatiza a formatação, permitindo que os desenvolvedores se concentrem no conteúdo do código, em vez de se preocuparem com o estilo.
• Colaboração: Facilita a revisão de código, pois elimina a necessidade de comentários sobre estilo e formatação durante o code review.

Desvantagem

• Opinião Forte: Como é “opinionated“, o Prettier não é totalmente configurável para todos os gostos, o que é uma limitação para alguns desenvolvedores que preferem estilos muito específicos.

Em suma, o Prettier é uma ferramenta poderosa que ajuda a manter o código limpo e consistente, especialmente em projetos onde várias pessoas estão colaborando. No VS Code, sua integração é fácil e altamente personalizável, permitindo que os desenvolvedores ajustem a formatação do código de acordo com as necessidades do projeto.

Finalmente, este é o site da extensão, veja nele todas as linguagem com que a extensão Prettier trabalha e todas as IDEs compatíveis, além do Visual Studio Code.