Como formatar código com o Prettier no Visual Studio Code

Ao escrever código, muitas vezes é difícil manter tudo visualmente organizado e consistente. Indentação, aspas simples ou duplas e ponto e vírgula podem parecer detalhes insignificantes quando estamos concentrados na lógica complexa das aplicações web modernas.

É aí que entra o Prettier Code Formatter. Prettier é um formatador de código personalizável que oferece suporte a várias linguagens e se integra à maioria dos editores de código. Neste artigo, veremos como usar o Prettier no Visual Studio Code.

Configurando o ambiente de trabalho

Vamos supor que você já tenha o Visual Studio Code instalado e um arquivo de código que precisa ser formatado. Veja este exemplo:

const name = "Hostman";
const service ={first: name
}
console.log(service);
const printName = (fName) => {
console.log(`This is ${fName}`)
}
printName ('Hostman');

Este código apresenta alguns problemas comuns:

1. uso inconsistente de aspas;
2. falta de indentação;
3. quebras de linha incorretas.

Se você executá-lo, ele funcionará normalmente, pois esses detalhes não afetam o JavaScript. Mas, para um ser humano, o código fica difícil de ler e entender.

Para resolver isso, vamos instalar uma extensão que adiciona automaticamente indentação, ponto e vírgula e outros elementos que tornam o código mais legível.

1. Abra a aba Extensões no menu do VS Code (ou pressione Ctrl + Shift + X no Windows).
2. Pesquise por Prettier — esta extensão tem mais de 20 milhões de instalações.
3. Clique em Instalar para adicioná-la ao seu editor.

Existe também um método alternativo: pressione Ctrl + P para abrir o painel de execução rápida e execute o seguinte comando:

ext install esbenp.prettier-vscode

Esse comando instala a extensão do Prettier diretamente.

Agora você pode usar a ferramenta para formatar rapidamente seu código no VS Code.

Formatação automática

Imagine que o gerente de projeto envie uma mensagem no Slack: a página atualizada do Hostman Cloud Server precisa entrar em produção com urgência. Tudo está funcionando, mas o código não está bem formatado. Felizmente, agora você tem a extensão Prettier — que pode resolver isso de forma rápida e simples.

1. Pressione Ctrl + Shift + P para abrir a paleta de comandos.
2. Procure e execute o comando Format Document With.

3. Escolha Prettier na lista suspensa.

Seu código será automaticamente formatado com os espaços, indentação, quebras de linha e aspas consistentes. Veja o resultado:

const name = "Hostman";
const person = { first: name };
console.log(person);
const sayHelloLinting = (fName) => {
  console.log(`Hello linting, ${fName}`);
};
sayHelloLinting("Hostman");

Essa ferramenta é extremamente útil e permite configuração rápida para várias linguagens. Por exemplo, se você executar a formatação automática em um arquivo Python, o VS Code sugerirá a instalação do autopep8. Essa utilidade formata automaticamente o código Python conforme o PEP 8, o guia de estilo oficial da linguagem, usando o pycodestyle para identificar áreas que precisam de ajuste. O autopep8 corrige a maioria dos problemas encontrados pelo pycodestyle.

Para evitar a necessidade de formatar manualmente todas as vezes, ative a formatação automática ao salvar:

1. Abra as Configurações (Ctrl + , no Windows).

    

2. Pesquise por Editor: Format On Save.

    

3. Marque a opção para ativar a formatação automática ao salvar.

Pronto! Agora o código será formatado automaticamente sempre que você salvar o arquivo.

Definindo regras de formatação personalizadas

Os desenvolvedores podem personalizar as regras de formatação de duas maneiras:

1. Alterando as configurações diretamente na extensão do Prettier.
2. Criando um arquivo de configuração separado.

Nas configurações da extensão, é possível modificar parâmetros comuns, como:
o número de espaços para indentação, e se deve ou não adicionar um ponto e vírgula no final de cada linha. Essa abordagem é rápida, mas a configuração se aplica apenas ao seu ambiente local. Para compartilhar as mesmas regras com toda a equipe, o ideal é criar um arquivo de configuração compartilhado, garantindo que todos usem o mesmo padrão no Visual Studio Code.

O arquivo .prettierrc pode usar várias extensões:.yml, .yaml, .json, .js ou .toml. Veja um exemplo em formato JSON:

{
  "trailingComma": "es5",
  "tabWidth": 2,
  "semi": true,
  "singleQuote": false
}

Conclusão

O Prettier é uma ferramenta que acelera significativamente o desenvolvimento, aplicando automaticamente regras de formatação — sejam elas padrão ou personalizadas.
Depois de criar um arquivo de configuração, sua equipe terá um conjunto unificado de regras de estilo. Assim, todos poderão se concentrar no desenvolvimento sem se preocupar com a aparência do código. Graças ao Prettier, aspas, vírgulas e indentação podem ser corrigidas com apenas alguns cliques durante o processo de refatoração, permitindo que você foque no que realmente importa: escrever um bom código.