Usando Prettier com VS Code e create-react-app

Fala pessoal beleza? Espero que sim!
A uns dias atrás numa noite fria e tediosa estava eu, na minha casa, vendo os grupos de react no slack/telegram/discord/etc quando descobri esse cara ai de cima, alguém estava falando sobre ele e decidi ver o que era e pra que servia. Confesso que pensei: Como fiquei a vida toda sem usar isso?

“Prettier é um formatador de código opinativo. Ele impõe um estilo consistente analisando seu código e reimprimindo-o com suas próprias regras que levam em consideração o comprimento máximo da linha, envolvendo o código quando necessário.”

Resumindo: Você não precisa mais se preocupar em formatar seu código, só dando um save no projeto já conseguimos a formatação automática e perfeita do jsx com o Prettier, e isso nos faz economizar tempo. O Prettier funciona bem e é muito fácil de configurar, por isso deve ser considerado obrigatório em qualquer projeto. Ele não é a primeira ou única ferramenta que faz este tipo de automação, então, se não for adequado para você, podem haver outros que te agradem e funcionem melhor para você ou sua equipe.

Configurando ambiente

Este tutorial pressupõe que você esteja usando o Create React App , Yarn e o VS Code. As instruções não devem ser diferentes se você usar o NPM ou outro ambiente JavaScript.

Note que o CRA(create-react-app) não vai mostrar nenhum erro do Prettier no console do navegador ou na saída do terminal. Os erros só são exibidos no código dentro do VS Code.

Precisamos primeiro instalar o pacote Prettier e o plugin ESLint Prettier, depois instalamos as extensões para o VS Code. O plugin faz com que os erros do Prettier **sejam passados como erros do **ESLint.

yarn add --dev --exact prettier
yarn add --dev eslint-plugin-prettier

Baixar extensões: ESLint Prettier

Você precisará instalar o ESLint se não estiver usando o CRA.

Agora vamos criar dois arquivos na pasta raiz do projeto, o “.eslintrc” e o “.prettierrc”, onde no primeiro passamos as configurações do eslint e no segundo as configurações do Prettier:

//.eslintrc
{
  "extends": "react-app",
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": "error"
  }
}

E caso você não esteja satisfeito com as configurações default do Prettier você pode modifica-las neste arquivo:

//.prettierrc
{
  "singleQuote": true,
  "trailingComma": "es5"
}

Depois de feito estes passos podemos configurar no VS Code para que o Prettier entre em ação assim que salvarmos algum arquivo, isto é opcional, podemos ir até a engrenagem que tem em baixo do editor a esquerda e clicar em “Configurações”, vamos editar esta linha:

"editor.formatOnSave": true

Com tudo configurado certinho conseguimos obter este resultado ao dar um control + s no editor:

GIF

Para ver o resultado deste código e testar o Prettier em um playground clique aqui.

Algo bem básico porém útil, e que consegue nos ajudar a entregar nossos jobs sempre com excelência!
Espero que vocês tenham curtido e que sempre possamos adicionar ele nos projetos pra poder entrar em sintonia com os outros devs da nossa equipe!

Abraço pessoal até a próxima.