Usando Prettier com VS Code e create-react-app
Tags: prettier, vscode, react, cra
Published: 2019-10-01 14:11:20

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](https://github.com/prettier/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](https://github.com/facebookincubator/create-react-app) , [Yarn](https://yarnpkg.com/en/) e o [VS Code](https://code.visualstudio.com/). 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](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)

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).](https://cdn-images-1.medium.com/max/2000/1*6CORIasZIh_KzGGQlh3Vew.gif)*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).*

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**.