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!