Skip to main content

Prettier

Status: Finalizado ✅

O Prettier é uma ferramenta que formata o seu código de acordo com padrões de style code, para te ajudar a manter o foco na criação da lógica da aplicação sem ter que se preocupar muito com erros de sintaxe. O Prettier simplesmente lê o seu código todo e formata ele para os padrões, que envolvem boas práticas e deixam seu código padronizado e simples de ler.

Documentação Oficial​

Para consultar a documentação oficial do Prettier, Clique aqui!

Instalação do Prettier​

O Prettier pode ser instalado como uma extensão no Vscode. Basta abrir a aba de extensões e procurar por prettier,

url

Clique em instalar.

Configurando o Prettier​

Vamos fazer duas configurações básicas no Prettier, a primeira é para ele formatar seu código assim que você salvá-lo. A segunda é para ele ter acesso aos padrões estabelecidos pelo ESLint e formatar o código com base neles.

Com o seu Vscode aberto, aperte as teclas ctrl + shift + p e digite open setting json e aperte Enter.

url

Nesse arquivo, você terá que escrever as seguintes configurações:

Para permitir com que seu código seja formatado ao salvar ctrl + s:

  "editor.formatOnSave": true

Para fazer a integração do Prettier com o ESLint:

 "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    }

Agora, toda as vezes que você salvar seu código, ele será formatado automaticamente utilizando o style guide que você configurou no ESLint. Essas ferramentas contribuem e muito com a performance na hora de codar.