Uma das maiores dificuldades de quem está iniciando em programação é o uso correto de nomenclaturas, regras de sintaxe e desatenção a detalhes que podem acabar sacrificando o seu tempo de estudo em busca de correções de escrita e erros de digitação.
Felizmente, existe uma maneira de facilitar a sua vida para que a sua IDE faça essas correções automaticamente, salvando um tempo precioso de digitação. E a ferramenta para isso é o Prettier.
Através dele, podemos configurar regras específicas de como a sintaxe do seu código deve se comportar, corrigindo automaticamente eventuais erros e criando uma padronização, independente de quem esteja trabalhando no projeto.
Vejamos um exemplo. Podemos estabelecer as seguintes regras:
{
"semi": true, // As declarações devem terminar com semicolon (ponto e vírgula ;)
"singleQuote": true, // Strings devam utilizar por padrão aspas simples
}
Com estas regras, a partir da declaração seguinte, o Prettier poderá fazer a formatação automática do seu código:
const variavelAntes = "variável antes do Prettier"
const variavelDepois = 'variável depois do Prettier';
Podemos utilizar o Prettier com uma certa profundidade, trazendo um leque de regras que irá nos ajudar a deixar nosso código padronizado e, como o próprio nome sugere, mais bonito. Então vamos botar a mão na massa e configurar essa belezinha no nosso projeto.
Pré-requisitos
- VSCode: Usaremos as configurações do Prettier no VSCode, então fique esperto para configurar caso você utilize outra IDE
- Um projeto Node com
package.jsonem Javascript ou Typescript -
npmouyarninstalado
Instalação
Adicionaremos o Prettier como uma dependência de desenvolvimento. Podemos fazer isso utilizando o comando npm:
npm install -D prettier
Ou yarn:
yarn add -D prettier
Dica: Para evitar conflito na instalação de pacotes, sempre use somente um dos dois comandos. Evite misturar o yarn e o npm no seu projeto pois cada gerenciador de pacotes irá criar o seu próprio arquivo lock.
Em outras palavras, se escolher o yarn, evite ter o arquivo package-lock.json no projeto (pode deletar sem medo). Se escolher o npm, evite ter o arquivo yarn.lock.
Caso o Prettier tenha sido adicionado com sucesso no seu projeto, seu arquivo package.json deve ter o pacote do Prettier nas dependências de desenvolvimento:
"devDependencies": {
"prettier": "^2.8.3"
}
Setup inicial do Prettier
Agora que nos certificamos de ter o pacote instalado no nosso projeto, inseriremos as primeiras regras de sintaxe. Para isso, devemos criar um arquivo chamado .prettierrc na raíz do projeto.
Vamos inserir algumas regras básicas nele:
{
"semi": true,
"singleQuote": true,
"printWidth": 80,
"tabWidth": 2,
"bracketSpacing": true
}
O que cada uma dessas regras fazem?
- semi - Insere ponto e vírgula ao final de declarações
- singleQuote - Strings devem ser incluídas por padrão em aspas simples
- printWidth - Especifica o tamanho máximo de linha no código
- tabWidth - As tabulações terão por padrão um espaçamento de tamanho 2
- bracketSpacing - Valores dentro de chaves (
{}) virão espaçados
Você pode conferir essas e outras regras nas documentações do Prettier
Usando o Prettier através da linha de comando
Já temos tudo pronto para testar o funcionamento do Prettier. Se você está adicionando o Prettier a um projeto já existente, você pode rodar o comando diretamente e ver se ele funciona de acordo com as regras que você estabeleceu. Mas caso esteja começando um projeto novo e fazendo o setup do Prettier, iremos testar criando um arquivo em src/index.js.
É um arquivo simples para testar as configurações do Prettier. Iremos inserir apenas o seguinte código:
const testPrettier = {mensagem: "isso é um teste do prettier"}
Para que o Prettier faça sua mágica, adicionaremos o comando de correção no nosso arquivo package.json. Caso não haja o objeto scripts, use o exemplo abaixo para adicionar no seu package.json. Mas caso já possua, só adicione o comando format:
{
"scripts": {
...
"prettier-format": "prettier --write 'src/**/*.{js,jsx,ts,tsx,css,json}' --config ./.prettierrc"
}
}
Agora execute o comando usando o seu gerenciador de pacotes:
- npm:
npm run prettier-format
- yarn > yarn prettier-format
Olhando novamente para o arquivo src/index.js, a nossa variável deverá estar formatada assim:
const testPrettier = { mensagem: 'isso é um teste do prettier' };
Voilá! Temos nosso código formatado do jeitinho que queríamos. Mas não acaba por aí porque o tópico a seguir vai mudar a sua vida!
Usando o Prettier através do VSCode diretamente
Até então, o que foi feito aqui já é uma grande ajuda em termos de correção de sintaxe e padronização de código. Mas a maior vantagem do Prettier vem agora: A integração com o VSCode!
Através dela, o código será formatado automaticamente sem a necessidade do uso de comandos. Isso mesmo. Então vamos por a mão na massa e ver o funcionamento na prática.
O primeiro passo para fazer essa integração é ir na aba de extensões do VSCode (penúltimo ícone ou apenas Cmd + Shift + X ou CTRL + Shift + X) e procurar pela extensão do Prettier. Basta instalar e ela será adicionada ao seu VSCode.
O segundo passo é adicionar o Prettier como o editor padrão do VSCode. Para isso abra o menu arquivo>preferências>configurações
No campo de busca procure por formatter (ou formatador) e selecione o Prettier como formatador padrão do VSCode:
Por último, faremos com que o Prettier execute nossas regras automaticamente toda vez que salvarmos um arquivo ou colarmos um código no nosso projeto. Para isso, abriremos o arquivo de preferências em JSON do VSCode através do comando CTRL + Shift + P e selecionaremos para abrir o arquivo JSON:
Neste arquivo, adicionaremos duas configurações novas: O editor.formatOnSave e o editor.formatOnPaste, como no exemplo abaixo:
{
...
"editor.formatOnPaste": true,
"editor.formatOnSave": true
}
Se tudo der certo, seu Prettier estará integrado com o VSCode, lendo as regras do arquivo .prettierrc na pasta raíz do seu projeto e aplicando essas regras toda vez que você salvar um arquivo ou colar um código.
Bônus
No arquivo JSON de preferências você pode determinar regras para linguagens específicas. Por exemplo, desativar a correção ao salvar e colar para arquivos typescript, por exemplo:
{
"editor.formatOnPaste": true,
"editor.formatOnSave": true,
"[typescript]": {
"editor.formatOnPaste": false,
"editor.formatOnSave": false
}
}
Conclusão
Espero que este artigo sirva de guia para uma primeira configuração do prettier e que agora seu código se torne mais legível e bonito!
Teve algum problema? Comenta aqui em baixo!
Se este link foi útil pra você ou você quer apoiar o meu trabalho,
deixa seu like ou estrelinha aí e compartilhe ❤️
Top comments (1)
Isso ajuda muito a diminuir os conflitos ao fazer um merge