Tag: Prettier

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.

O Prettier, segue o link oficial (https://prettier.io), é um formatador de código que visa ajudar os desenvolvedores a escrever aplicações que são mais fáceis de entender e mais uniformizadas entre as diversas formas de programar que existem. Atualmente ele fornece formatação de código para as seguintes linguagens:

• JavaScript, incluindo ES2017
• JSX
• Angular
• Vue
• Flow
• TypeScript
• CSS, Less, e SCSS
• HTML
• JSON
• GraphQL
• Markdown, incluindo GFM e MDX
• YAML

Para que você entenda melhor o que ele faz, o Prettier reescreve seu código inteiro do zero, ele lerá linha a linha e fará alterações com base em padrões de formatação de espaço, comprimento de linha entre outras práticas comuns adotadas por diversos desenvolvedores (ou que ao menos deveria ser).

Por exemplo, pegue o seguinte código:

foo(arg1, arg2, arg3, arg4);

Ele se encaixa em uma única linha, para que fique como está. No entanto, todos enfrentamos essa situação:

foo(reallyLongArg(), omgSoManyParameters(), IShouldRefactorThis(), isThereSeriouslyAnotherOne());

De repente, nosso formato anterior para a função de chamada é interrompido porque é muito longo. O Prettier fará o trabalho meticuloso de reimprimí-lo assim para você:

foo(
  reallyLongArg(),
  omgSoManyParameters(),
  IShouldRefactorThis(),
  isThereSeriouslyAnotherOne()
);

O Prettier impõe um estilo de código consistente (ou seja, a formatação do código que não afeta o AST) em toda a sua base de código porque desconsidera o estilo original *, analisando-o e reimprimindo o AST analisado com suas próprias regras que assumem o comprimento máximo da linha em conta, agrupando o código quando necessário.

Você pode realizar o download por npm:

npm install --save-dev --save-exact prettier
# ou global
npm install --global prettier

O prettier-vscode pode ser instalado usando a barra lateral de extensão. Procure pelo Prettier – formatador de código. Também pode ser instalado usando ext install esbenp.prettier-vscode na paleta de comandos. Verifique seu repositório para configuração e atalhos.

Se você deseja ativar e desativar o formatador, instale vscode-status-bar-format-toggle.

Gostou deste artigo? Comente abaixo!