Como Formatar Código com Prettier no Visual Studio Code

Introdução

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

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

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

const name = "James";

const person ={first: name
}

console.log(person);

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

sayHelloLinting('James');

Se você estiver familiarizado com a formatação de código, pode perceber alguns erros:

• A mix of single and double quotes.
• A primeira propriedade do objeto person deveria estar em sua própria linha.
• A declaração de console dentro da função deve ser recuada.
• Você pode ou não gostar dos parênteses opcionais ao redor do parâmetro da função de seta.

Sumário

• Usando o comando de formatação do documento
• Formatando o código ao salvar
• Alterando as configurações de configuração do Prettier
• Criando um arquivo de configuração do Prettier

Pré-requisitos

Para seguir este tutorial, você precisa:

• Faça o download e instale o Visual Studio Code.
• Para trabalhar com o Prettier no Visual Studio Code, você precisará instalar a extensão. Para fazer isso, pesquise pelo Prettier - Code Formatter na seção de extensões do VS Code. Se você estiver instalando pela primeira vez, verá um botão instalar em vez do botão desinstalar mostrado aqui:

Passo 1 – Usando o Comando Formatar Documento

Com a extensão do Prettier instalada, agora você pode aproveitá-la para formatar seu código. Para começar, vamos explorar o uso do Formatar Documento comando. Esse comando tornará seu código mais consistente com espaçamentos formatados, quebras de linha e aspas.

Para abrir o palete de comandos, você pode usar COMMAND + SHIFT + P no macOS ou CTRL + SHIFT + P no Windows.

No palete de comandos, procure por format e então escolha Format Document.

Você pode então ser solicitado a escolher qual formato usar. Para fazer isso, clique no botão Configure:

Então escolha Prettier – Code Formatter.

Seu código agora está formatado com espaçamento, quebra 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 indentação inconsistente, chaves, novas linhas e ponto e vírgula em 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 exploramos este comando, vamos ver como isso pode ser implementado para rodar automaticamente.

Passo 2 — Formatando Código ao Salvar

Até agora, você teve que executar um comando para formatar seu código manualmente. Para automatizar esse processo, você pode escolher uma configuração no VS Code para que seus arquivos sejam formatados automaticamente ao salvar. Isso também garante que o código não seja verificado na versão do controle que não está formatada.

Para alterar essa configuração, pressione COMMAND + , no macOS, ou CTRL + , no Windows para abrir o Menu de Configurações. Depois que o menu estiver aberto, procure por Editor: Format On Save e verifique se essa opção está marcada:

Depois de definir isso, você pode escrever seu código como de costume e ele será formatado automaticamente quando salvar o arquivo.

Etapa 3 – Alterando as Configurações de Configuração do Prettier

O Prettier faz muitas coisas para você por padrão, mas você também pode personalizar as configurações.

Abra o Menu de Configurações. Em seguida, pesquise por Prettier. Isso trará todas as configurações que você pode mudar:

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

• Aspas Simples – Escolha entre aspas simples e duplas.
• Ponto e Vírgula – Escolha se deseja ou não incluir ponto e vírgula no final das linhas.
• Largura da Tabulação – Especifique quantas lacunas você deseja que uma tabulação insira.

O lado negativo de usar o menu de configurações interno no VS Code é que ele não garante a consistência entre os desenvolvedores da sua equipe.

Etapa 4 — Criando um Arquivo de Configuração do Prettier

Se você alterar as configurações no seu VS Code, alguém pode ter uma configuração completamente diferente em sua máquina. Você pode estabelecer formatação consistente em sua equipe criando um arquivo de configuração para 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 usando JSON:

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

Para mais detalhes sobre os arquivos de configuração, confira as Documentações do Prettier. Depois de criar um desses e adicioná-lo ao seu projeto, você pode garantir que todos os membros da equipe sigam as mesmas regras de formatação.

Conclusão

Ter código consistente é uma boa prática. Isso é particularmente benéfico ao trabalhar em um projeto com múltiplos colaboradores. Concordar sobre um conjunto de configurações ajuda com a legibilidade e compreensão do código. Mais tempo pode ser dedicado a resolver problemas técnicos desafiadores em vez de lutar com problemas já resolvidos, como a indentação do código.

O Prettier garante a consistência na formatação do seu código e torna o processo automático.