loading...

Usando Prettier com VS Code e create-react-app

juliocarneiro profile image Júlio Carneiro ・3 min read

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:

Para ver o resultado deste código e testar o Prettier em um playground [clique aqui](https://prettier.io/playground/#N4Igxg9gdgLgprEAuEBLAtgBwgJxgAgCU4BDMGAGn2HwGEItoECBffAMxwfwB0QdS5PgG4eUMWAA2JAM4z8AWQgA3VHFokcAE3xwAHvChb59RlGbUx+fAKNwcACgCUlqNeuQoMgjQCuM+xkqf0CAdQALCAAZVABrOC0lVTgqdBU1AEkodgh8NgBefBhw1BkAOkwuTBlRcTd3ARhfHDcHK3drAB5JVHx4gE984DTkrJyy1C0WAD5O8IAmaeH0uDGIMqgSdDgWToB6BdnwgGZpmPidACF+pH2T6faO62AAQhCcGQjouISktXwAD4A-DvT6Rc6-FZlSQIADmxXw+SR+AADPgAPz4Nr1J7uTqYaYAOSY+Ag7CK4Tg+DAzVsBFB+B6FwppXwIzUZX2BJcSCxj1x+E6vkkS1BXwhiRW+AAZNKQQEPuKfpLkmV0CRMA53hkdPlpq4BYabHAmi0sd1egMhtqprMCcBQQBtG0AXQ2Wx2XNmex60ycwhYTl2e2FfuDvv5-vaLDEMbq+mweHwWjg7BIwoIf3Umi0tRAFBAEEwMFQ0BkyFAmi4AHcAAqaBDllAkZQQSb5kAAIxwZHiMAAypgyKgoLDkDAcL4UmgvPYYLWe7D1cg05IAgWAFYyPSXHtgPv9j0xcwrkhr6dDj72ZBdkid-qSaAdyojmChSbFZAADhRBcqEACUIe0wG9KjgBVlDgDsBAAR18VABAXEglxIU9zwLAJ0FQcdJ2nGQR1hGEAEVfAgeA0PXEAYDvd8tE-JB5gLCcSFQHpR1MZcUCgJgOxCAAVO8m1XAIWBYIA).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.

Discussion

pic
Editor guide