O Prettier é um formatador de código para o JavaScript, Typescript, HTML, CSS entre outras tecnologias que ajuda a padronizar tudo que uma equipe desenvolve.
Existem plugins Prettier para muitos editores diferentes disponíveis. Aqui vou mostrar a instalação no Visual Studio Code.
1. Instale o plug-in Prettier VS Code
Abra a Paleta de comandos (no submenu Exibir ou use Cmd + Shift + P no Mac e Ctrl + Shift + P no Windows). Em seguida, selecione “Extensões: Instalar extensões”.
Procure por “Prettier”, clique em “Instalar” e depois em “Recarregar” quando a instalação estiver concluída.
2. Execute o Prettier em um arquivo
Agora, se você abrir um arquivo JavaScript e selecionar “Formatar Documento” na Command Palette Prettier, o seu código será arrumado!
3. Execute automaticamente o Prettier ao salvar um arquivo
Abra as configurações da área de trabalho por meio da paleta de comandos. Ative formatOnSave:
{
“pastas”: [],
“configurações”: {},
“editor.formatOnSave”: true,
}
Salve suas configurações e agora seu código deverá ser formatado toda vez que um arquivo for atualizado!
O Prettier também suporta outros idiomas além do JavaScript, por exemplo TypeScript, HTML, CSS ou JSON. No entanto, se você não deseja que eles sejam formatados, pode controlar a configuração formatOnSave por tipo de arquivo:
{
“pastas”: [],
“configurações”: {},
“[javascript]”: {
“editor.formatOnSave”: true
}
}
Formatando código existente com linha de comando
Você pode formatar o código para todo o seu projeto usando a interface da linha de comando (CLI) da Prettier. Primeiro instale a ferramenta CLI:
npm install mais bonito – global
Atualize seu código atual:
mais bonito “* /. ts” – escrever
Feito! Um aviso rápido: atualizar automaticamente a formatação do código significa que você fará um grande commit no controle de origem, onde um grande número de arquivos é atualizado. Isso pode dificultar o uso, por exemplo. git culpa, já que metade das linhas de um arquivo pode ter sido modificada pela última vez no commit do Prettier.