Prettier é um formatador de código com suporte a diversos tipos de arquivos como JavaScript, JSX, Angular, Vue, TypeScript, HTML, CSS, SCSS e JSON. A sua utilização torna a formatação do código coerente e padronizada em todos os tipos de arquivos do projeto, o que é particularmente útil em projetos que envolvem vários desenvolvedores.

Esta ferramenta está disponível para diversas IDEs e também através de linha de comando. Mas no artigo de hoje, focaremos na instalação e configuração da extensão Prettier na IDE Visual Studio Code.

Instalando o Prettier

Como o Prettier é uma extensão do VSCode, basta pesquisar por “Prettier” na aba de extensões da IDE e fazer a instalação da extensão.

Visualização da extensão Prettier na loja de extensões do Visual Studio Code

Tipos de arquivos de configuração

Depois que a instalação terminar, será preciso configurar o Prettier individualmente para cada projeto. Podemos fazer essa configuração de qualquer uma das formas listadas abaixo. Aqui, é importante dizer que existe uma ordem de prioridade para cada uma das formas de configuração do Prettier, sendo que a lista abaixo está organizada da forma de configuração com maior prioridade para a menor.

  1. Uma chave "prettier" no package.json do seu projeto;
  2. Um arquivo .prettierrc escrito em JSON ou YAML;
  3. Um documento .prettierrc.json, .prettierrc.yml, .prettierrc.yaml, ou .prettierrc.json5 ;
  4. Um arquivo .prettierrc.js, .prettierrc.cjs, prettier.config.js, or prettier.config.cjs que exporta um objeto de configuração com module.exports.
  5. Um arquivo .prettierrc.toml

Já que as configurações precisam ser inseridas em cada projeto, eu costumo fazer a configuração através de um arquivo .prettierrc. Dessa forma, basta copiar o arquivo e colar no próximo projeto para que suas configurações sejam aplicadas aos novos arquivos.

Configurando o Prettier

Uma vez que você tenha o Prettier, existem duas configurações do VSCode que podem ajudar a manter o código formatado de maneira automática. Primeiro de tudo, vamos habilitar o Auto Save procurando por “autosave” na barra de pesquisa e então selecionando a opção onFocusChange. Essa opção vai fazer com que o seu código seja salvo toda vez que você trocar de aba ou janela.

Configuração de Auto Save do Visual Studio Code na opção onFocusChange

Depois disso, pesquise por “format” e, na opção Default Formatter, selecione o Prettier e ative a opção Format On Save; isso irá formatar seu código utilizando o formatador padrão toda vez que ele for salvo.

Configurações do Visual Studio Code mostrando as opções Default Formatter e Format On Save

Opções de configuração

printWidth: define a quantidade de caracteres possíveis para uma linha, sendo o valor padrão 80.

tabWidth: define a quantidade de espaços utilizados nos níveis de identação. O valor padrão dessa opção é 2.

useTabs: define se a formatação será feita com tabs (caso a propriedade seja verdadeira) ou com espaços (caso seja falsa).

semi: define se as linhas terminarão em ponto e vírgula. Aceita true e false como valores.

singleQuote: se verdadeira, a declaração de strings acontecerá com aspas simples; no entanto, se for falsa, a definição será com aspas duplas. Vale ressaltar que as strings JSX ignoram essa propriedade e utilizam a propriedade jsxSingleQuote, que funciona da mesma forma.

trailingComma: coloca vírgulas após o último elemento de um array ou objeto. Os valores possíveis para a propriedade são “es5” (onde trailing commas são válidos), none (no qual nenhum trailing comma é adicionado) e all (onde as vírgulas serão adicionadas sempre que possível).

bracketSpacing: adiciona um espaço entre declaração de função, estrutura condicional ou estrutura de repetição com espaços, bem como as chaves da abertura de escopo. Os valores aceitos para esta propriedade são true e false.

bracketLine: imprime o “>” de fechamento de uma tag HTML na mesma linha que o texto (caso o valor desta propriedade seja true) ou então cria uma nova linha apenas para este símbolo (caso o valor da propriedade seja false).

arrowFunctionParens: coloca parênteses nos parâmetros de uma arrow funcition. A opção “always” sempre adiciona parênteses a uma arrow function enquanto a opção “avoid” evita essa adição quando for possível.

vueIndentScriptAndStyle: quando esta propriedade tem o valor true, a formatação definida será aplicada também às tags style e script em um componente Vue.

Considerações finais

Espero que este artigo tenha sido útil e que possa lhe ajudar a manter a formatação dos seus projetos coerente, especialmente em projetos que envolvem mais pessoas. É importante salientar aqui que, embora o Prettier faça a formatação do seu código, ainda será preciso atentar para outras boas práticas de programação, como a nomenclatura de funções e de variáveis.

Bons estudos!!