Sobre o Prettier

Na minha opinião, atualmente o Prettier é a melhor ferramenta de formatação de código para JavaScript. Não é atoa que o seu repositório no GitHub já possui mais de 32.000 Stars (no momento que escrevo este artigo).

O jeito mais comum para formatar seu código é integrando o Prettier com seu editor. Há plugins para os mais diversos editores, como VSCode, Atom e Vim, embora também seja possível executar o Prettier por linha de comando.

Vue.js, Vetur e Prettier

Quem usa o VSCode, a extensão Vetur é a mais popular para Vue.js e uma de suas funcionalidades é formatar o código. Para isso ela traz vários Code Formatters e o principal deles é o Prettier.

O Prettier é o Code Formatter padrão do Vetur para: JavaScript, TypeScript, CSS, LESS, PostCSS, SCSS. Embora o Prettier não seja o Code Formatter padrão para HTML, é possível selecioná-lo manualmente.

Recentemente descobri um pequeno erro no Prettier para formatar código HTML com a tag template. Abri uma Issue no GitHub e ela foi imediatamente respondida, neste o momento o erro já foi corrigido e deve ser liberado em breve (ver Issue #6263).

Padrões Prettier: DoubleQuote ou SingleQuote?

O Prettier traz alguns padrões na hora de formatar o código, mas é possível configurar alguns detalhes conforme sua preferência. Um destes itens é o SingleQuote (aspas simples) ou DoubleQuote (aspas duplas) na declaração de Strings.

Por padrão o Prettier formata todas as Strings com DoubleQuote e a justificativa é que na língua inglesa é comum o uso de contrações. Por exemplo:

• String com SingleQuote: 'I\'m happy'
• String com DoubleQuote: "I'm happy"

Ou seja, usando DoubleQuote você não precisará utilizar caracteres de Escape nas contrações. Inicialmente eu até segui esse padrão do Prettier, mas depois eu mudei de ideia e preferi utilizar SingleQuote por dois motivos.

SingleQuote e os meus motivos

O primeiro motivo, é que se você usar alguma ferramenta para Internacionalização, evitará esse tipo String no meio do seu código e consequentemente não será necessário utilizar caracteres de Escape.

O segundo motivo, é que nas templates do Vue.js é melhor que o JavaScript utilize SingleQuote, porque o HTML já utiliza DoubleQuote. Por exemplo, considere este código seguindo o padrão do Prettier:

<template>
  <div>
    <button type="button" @click="message += ' My Text '">{{ "Button" }}</button>
    {{ message }}
  </div>
</template>

<script>
export default {
  name: "app",
  data: () => ({
    message: "Inital Text",
  }),
};
</script>

Veja que todas as Strings JavaScript estão com DoubleQuote, com exceção do evento OnClick. Como o HTML já utiliza DoubleQuote, o código do evento OnClick é obrigado a usar SingleQuote.

Ou seja, o padrão é DoubleQuote, mas em alguns casos você não pode usar o padrão.

Se você utiliza Vue.js com frequência sabe que este tipo de situação vai acontecer muitas vezes e por isso eu preferi configurar o Prettier com SingleQuote. O código fica assim:

<template>
  <div>
    <button type="button" @click="message += ' My Text '">{{ 'Button' }}</button>
    {{ message }}
  </div>
</template>

<script>
export default {
  name: 'app',
  data: () => ({
    message: 'Inital Text',
  }),
};
</script>

Agora sim o código está todo padronizado e todas as Strings do JavaScript estão no mesmo padrão.

Oficialmente a Style Guide do Vue.js não define se o padrão é SingleQuote ou DoubleQuote, ele deixa que você escolha o melhor para seu projeto. Neste caso é melhor usar SingleQuote.

Além do tipo de aspas, no site do Prettier tem uma lista completa de tudo que você configurar conforme sua vontade.

Posteriormente é só você criar um arquivo .prettierrc na pasta raiz do seu projeto e colocar suas variáveis. Clique aqui para ver mais sobre este arquivo de configuração.

Essas são as minhas considerações sobre o Prettier em projetos com Vue.js. Dúvidas ou sugestões é só entrar em contato. Abraço.