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

Introdução

Formatar código de maneira consistente é um desafio, mas ferramentas de desenvolvimento modernas tornam possível manter automaticamente uma consistência em toda a base de código da sua equipe.

Neste artigo, você irá configurar o Prettier para formatar automaticamente seu código no Visual Studio Code, também conhecido como VS Code.

Para fins de demonstração, aqui está um código de amostra que você irá formatar:

const name = "James";

const person ={first: name
}

console.log(person);

const sayHelloLinting = (fName) => {
console.log(`Hello linting, ${fName}`)
}

sayHelloLinting('James');

Se estiver familiarizado com a formatação de código, irá notar alguns erros:

• Uma mistura de aspas simples e duplas.
• A primeira propriedade de persons deve estar em sua própria linha.
• A declaração de console dentro da função deve estar recuada.
• Você pode gostar ou não dos parênteses opcionais em torno do parâmetro da função de seta.

Pré-requisitos

Para acompanhar este tutorial, será necessário baixar e instalar o Visual Studio Code.

Para trabalhar com o Prettier no Visual Studio Code, será necessário instalar a extensão. Para fazer isso, procure por Prettier - Code Formatter no painel de extensão do VS Code. Caso esteja instalando-o pela primeira vez, verá um botão install ao invés de uninstall mostrado aqui:

Passo 1 — Usando o comando de formatação de documento

Com a extensão Prettier instalada, implante-a agora para formatar o seu código. Para começar, vamos explorar o uso do comando Format Document. Esse comando tornará seu código mais consistente com espaçamento formatado, quebra automática de linha e aspas.

Para abrir a paleta do comando, utilize COMMAND + SHIFT + P no macOS ou CTRL + SHIFT + P no Windows.

Na paleta do comando, procure por format e então escolha Format Document.

Em seguida, você pode ser solicitado a escolher qual formato deve ser usado. Para fazer isso, clique no botão Configure:

Em seguinda, escolha Prettier - Code Formatter.

Seu código agora está formatado com espaçamento, quebra automática de linha e aspas consistentes:

const name = 'James';

const person = { first: name };

console.log(person);

const sayHelloLinting = (fname) => {
  console.log(`Hello linting, ${fName}`);
}

sayHelloLinting('James');

Isso também funciona em arquivos CSS. Você pode transformar algo com recuo, chaves, novas linhas e pontos-e-vírgulas inconsistentes em um código bem formatado. Por exemplo:

body {color: red;
}
h1 {
  color: purple;
font-size: 24px
}

Será reformatado como:

body {
  color: red;
}
h1 {
  color: purple;
  font-size: 24px;
}

Agora que explorado esse comando, vamos ver como isso pode ser implementado para ser executado automaticamente.

Passo 2 — Formatando o código ao salvar

Até aqui, foi necessário executar um comando manualmente para formatar seu código. De forma a automatizar esse processo, é possível escolher uma configuração no VS Code para que seus arquivos sejam formatados automaticamente quando forem salvados. Isso também garante que o código não seja verificado no controle de versão que não está formatado.

Para alterar essa configuração, pressione COMMAND + , no macOS ou CTRL + , no Windows para abrir o menu Settings. Quando o menu abrir, procure por Editor: Format On Save e certifique-se de que essa opção esteja marcada:

Quando isso estiver definido, você pode escrever seu código como sempre e ele será formatado automaticamente quando você salvar o arquivo.

Passo 3 — Alterando as configurações do Prettier

O Prettier faz muitas coisas por você no modo padrão, mas também é possível personalizar suas configurações.

Abra o menu Settings. Em seguida, procure por Prettier. Isso irá trazer todas as configurações que você pode alterar:

Aqui estão algumas das configurações mais comuns:

• Single Quote - escolha entre aspas simples e duplas.
• Semi - escolha se devem ser incluídos pontos-e-vírgulas no final das linhas.
• Tab Width - especifique quantos espaços você deseja que um tab insira.

O ponto negativo de usar o menu de configurações embutido no VS Code é que ele não garante uma consistência entre todos os desenvolvedores de sua equipe.

Passo 4 — Criando um arquivo de configuração do Prettier

Se você alterar as configurações em seu VS Code, outra pessoa pode acabar tendo uma configuração totalmente diferente em sua máquina. Para estabelecer uma formatação consistente entre toda a sua equipe, crie um arquivo de configuração para o seu projeto.

Crie um novo arquivo chamado .prettierrc.extension com uma das seguintes extensões:

• yml
• yaml
• json
• js
• toml

Aqui está um exemplo de um arquivo de configuração simples utilizando o JSON:

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

Para mais detalhes sobre os arquivos de configuração, confira os Docs do Prettier. Depois de criar um desses arquivos e verificá-lo em seu projeto, você é capaz de garantir que todos os membros da sua equipe irão seguir as mesmas regras de formatação.

Conclusão

Ter um código consistente é considerado uma boa prática. É especialmente benéfico ao trabalhar em um projeto com vários colaboradores. Concordar com um conjunto de configuração ajuda com a legibilidade e a compreensão do código. Dessa fora, mais tempo pode ser dedicado resolvendo problemas técnicos desafiadores ao invés de lutando contra problemas como o recuo no código.

O Prettier garante uma consistência em sua formatação de código e torna o processo automático.