Configurando a extensão Prettier no Visual Studio Code

Texto de: Letícia Garcez

Introdução

O Prettier é um formatador de código, ou seja, uma ferramenta que faz a formatação dos seus códigos corrigindo aspectos como espaçamentos, vírgulas, identação, etc. Resumidamente, essa ferramenta faz com que o seu código fique mais bonito, e siga algumas regras de estilo.

Essa extensão pode ser utilizada com vários tipos de arquivos diferentes, como JavaScript, JSX, Angular, Vue, TypeScript, HTML e CSS e além de te ajudar a formatar os seus códigos quando você está trabalhando sozinho, o uso do Prettier se torna ainda mais interessante quando estamos trabalhando em um projeto com uma equipe, já que é comum que as pessoas da equipe tenham preferências diferentes para formatar seu código e essa extensão acaba assegurando uma única forma de formatação.

O Prettier está disponível na forma de extensão em diversas IDEs e também é possível utilizá-lo pela linha de comando, mas no artigo de hoje focaremos na instalação e configuração dessa ferramenta no Visual Studio Code.

Instalando o Prettier

Como o Prettier é uma extensão da IDE basta pesquisar por Prettier na aba de extensões do Visual Studio Code e clicar em instalar.

Configuração do Prettier

Uma vez instalado, será preciso configurar o Prettier e existem duas maneiras diferentes de fazer isso. A primeira é criar uma configuração global alterando as configurações da extensão nas configurações da IDE. Para isso, basta acessar as configurações e pesquisar por Prettier, como mostrado na imagem abaixo. Isso fará com que todas as configurações referentes à extensão apareçam.

A segunda forma de configurar o Prettier envolve a criação de uma configuração para o projeto. Particularmente, acho essa forma melhor pois você pode fazer o commit desse arquivo no seu GitHub e terá as suas confirgurações de formatação disponíveis em qualquer máquina.

A configuração pode ser feita 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 menor.

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

Como as configurações vão precisar ser inseridas em cada projeto, eu costumo optar por fazer a configuração através de um arquivo .prettierrc, já que esse arquivo pode ser copiado para outros projetos sem problemas.

Opções de configuração

Depois de definir o seu arquivo de configuração, é preciso definir as configurações que você gostaria de usar para a formatação do seu código. Algumas opções estão listadas abaixo:

• printWidth: quantidade máxima de caracteres possíveis por uma linha. O valor padrão é 80.
• tabWidth: quantidade de espaços utilizados nos níveis de identação. O valor padrão é 2.
• useTabs: se verdadeira, a formatação será feita com tabulações e caso contrário será feita utilizando espaços.
• semi: se possuir o valor verdadeiro, as linhas serão terminadas em ponto e vírgula.
• singleQuote: se verdadeira, as strings serão definidas com aspas simples, se for falsa, aspas duplas. Strings JSX ignoram essa propriedade, porém 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 propeirdade são "es5", onde trailing commas são validos, “none”, onde nenhum trailing comma é adicionado e “all”, onde as vírgulas serão adicionadas sempre que possível.
• bracketSpacing: se verdadeira adiciona um espaço entre declaração de função, estrutura condicional ou estrutura de repetição com espaços e as chaves da abertura de escopo.
• arrowFunctionParens: coloca parênteses nos parâmetros de uma arrow function. A opção "always" sempre adiciona parênteses a uma arrow function e 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.

Exemplos de configurações

Arquivo .prettierrc

{
	"tabWidth": 2,
	"useTabs": true,
	"semi": false,
	"singleQuote": false,
	"bracketSpacing": true,
	"arrowParens": "always"
}

Package.json

{
  "name": "...",
  "private": true,
  "scripts": {...},
  "dependencies": {...},
  "prettier": {
    "useTabs": false,
    "semi": false,
    "singleQuote": true,
    "jsxSingleQuote": true,
    "bracketSpacing": true,
    "arrowParens": "always"
  }
}

Configurações de Formatação e Salvamento

Após instalar a extensão e configurar as regras de formatação, você já poderá fazer a formatação dos seus arquivos com o atalho ctrl+shift+i, porém existe mais um passo que podemos fazer para tornar a formatação do código mais simples, que é tornar essa formatação automática.

Para isso, vamos acessar as configurações da IDE e habilitar o Auto Save. Para isso, vamos procurar por autosave na barra de pesquisa e então selecionaremos 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.

Depois disso, vamos pesquisar por format e na opção Default Formatter vamor selecionar o Prettier e ativar a opção Format On Save, que irá formatar seu código utilizando o formatador padrão toda vez que ele for salvo.

Após fazer essas configurações, o seu código será formatado com as configurações que você definiu de forma automática sempre que o arquivo for salvo.

É importante lembrar aqui que o Prettier é apenas um formatador, o que significa que você ainda precisará se atentar para outras boas práticas de programação como a nomenclatura de funções e de variáveis.

Bons estudos!