Configuração

O Prettier é mais uma ferramenta que vamos utilizar para ajudar na padronização de código, ele consiste em várias configurações que são feitas para que o código seja formatado para seguir um padrão.

Alguns exemplos de formatações que ele faz é a quebra de linha quando ela tem mais de 80 caracteres, adicionar ; no final das linhas dentre outras funcionalidades muito úteis para um projeto.

<aside> 💡 ⚠️ Antes de começar a configuração é importante que você se certifique de remover a extensão Prettier - Code Formatter do seu VS Code, ela pode gerar incompatibilidades com as configurações que vamos fazer.

</aside>

<aside> 💡

As configurações são iguais para os projetos NodeJS, ReactJS e React Native!

</aside>

A primeira coisa que vamos fazer para a configuração do Prettier é a instalação dos pacotes no projeto, e faremos isso executando:

yarn add prettier eslint-config-prettier eslint-plugin-prettier -D

Esse comando vai adicionar 3 dependências que serão as responsáveis por fazer a formatação do código e também integrar o Prettier com o ESLint.

Com a instalação feita vamos modificar o arquivo .eslintrc.json adicionando ao final do "extends" a seguintes regra:

"plugin:prettier/recommended"

Nos "plugins" vamos adicionar ao final apenas uma linha:

"prettier"

E nas "rules" vamos adicionar uma linha indicado para o ESLint mostrar todos os erros onde as regras do Prettier não estiverem sendo seguidas, como abaixo:

"prettier/prettier": "error"

O arquivo final vai ficar assim:

{
	...
  "extends": [
		...
    "plugin:prettier/recommended"
  ],
  ...
  "plugins": [
    ...
    "prettier"
  ],
  "rules": {
    ...
		"prettier/prettier": "error"
  },
  ...
}

E para resolver os conflitos entre as regras do ESLint e as regras do Prettier vamos criar um arquivo na raiz do projeto como prettier.config.js , nesse arquivo vamos adicionar 3 regras, sendo elas: