Como instalar o Prettier no VS Code

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 que é o 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:

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!

Prettier 1.15: Formatador de Código Adiciona Suporte Angular e Vue.js

Caso você ainda não conheça o Prettier, acesse o site oficial para mais detalhes. A versão 1.15 do Prettier adiciona suporte ao formatador de código para HTML, Vue.js, Angular e MDX, além de adicionar uma variedade de refinamentos e melhorias de sintaxe.

De forma resumida, o Prettier é um software de código aberto disponível sob a licença MIT. Contribuições e feedback são incentivados através do projeto Prettier GitHub e devem seguir as diretrizes de contribuição do Prettier.

Sua principal função é ser um formatador de código opinativo que tenta reduzir os problemas de formatação do código. Iniciado como um projeto JS, o suporte da Prettier se expandiu para abranger muitas outras linguagens, incluindo TypeScript, Flow, HTML5, CSS, Markdown e YAML, com desenvolvimento em andamento para adicionar suporte a Elm, Java, PHP, Python, Ruby e Swift. O Prettier também suporta vários formatos, incluindo JSX, JSON, Vue.js, Angular, SCSS, Less, componentes estilizados e GraphQL.

O Prettier agora pode ser usado para formatar o conteúdo de remarcação, bem como o conteúdo JSX em um recurso MDX.Caso você não conheça, o MDX é uma extensão do markdown que suporta sintaxe JSX. Outra funcionalidade legal é o suporte a interpolação e atributos para Vue.js e Angular, assim como a sintaxe de modelo inline do Angular.

Entre as diversas novidades, Prettier agora pode formatar arquivos de modelo dessas estruturas que estendem o HTML para o Angular e o Vue.js,. Além de fornecer um mecanismo para adicionar comentários para controlar como a marcação é formatada para impedir que a ferramenta remova ou adicione espaços em branco que possam afetar o estilo e os layouts do conteúdo. Os modos de espaço em branco podem corresponder ao comportamento do CSS ou tratar o espaço em branco como sensível (sensitive) ou insensível (insensitive).

O lançamento do Prettier 1.15 faz muitas melhorias na análise do JavaScript, incluindo o nivelamento do else-branch por ternários aninhados, mantendo inline os decoradores se eles foram escritos em linha, respeitando a ordem dos decoradores e melhorando como os objetos são divididos em linhas separadas. Além disso, dezenas de outras melhorias foram feitas para a API geral da Prettier e a variedade de idiomas suportados pela Prettier.