Como Utilizar Prettier e ESLint para Padronização de Código

Manter um código limpo, organizado e consistente é um desafio constante para desenvolvedores de software. Felizmente, existem ferramentas que facilitam essa tarefa, como o Prettier e o ESLint. Neste artigo, veremos como configurar e utilizar essas ferramentas para garantir a padronização do código e melhorar a qualidade dos nossos projetos.

Configurando Prettier para Padronização de Código

O Prettier é uma ferramenta de formatação de código que garante que todo o código siga um estilo consistente. Para começar a utilizá-lo, o primeiro passo é instalar o Prettier em seu projeto. Isso pode ser feito facilmente com o npm ou yarn:

npm install --save-dev prettier

Após a instalação, é importante configurar o Prettier de acordo com as necessidades do seu projeto. Para isso, você pode criar um arquivo de configuração .prettierrc na raiz do seu projeto. Esse arquivo pode ser configurado com as opções desejadas, como regras de indentação, uso de aspas simples ou duplas, e estilo de ponto e vírgula. Um exemplo básico de configuração é:

{
  "singleQuote": true,
  "trailingComma": "es5",
  "tabWidth": 2,
  "semi": true
}

Além disso, é recomendável adicionar um script no package.json para facilitar a execução do Prettier. Por exemplo:

"scripts": {
  "format": "prettier --write ."
}

Com isso, você pode executar npm run format para formatar todo o seu código conforme as regras definidas no .prettierrc.

Integrando ESLint para Qualidade e Consistência

Enquanto o Prettier cuida da formatação, o ESLint é uma ferramenta de linting que ajuda a detectar e corrigir problemas no código. Para instalar o ESLint, use o seguinte comando:

npm install --save-dev eslint

Após a instalação, configure o ESLint iniciando o processo de configuração interativa com:

npx eslint --init

Durante o processo de configuração, você pode escolher as regras que deseja aplicar, bem como o estilo de código que deseja adotar. Para uma integração ainda mais eficiente com o Prettier, é possível instalar o plugin eslint-config-prettier que desativa regras do ESLint que possam conflitar com o Prettier. Para isso, instale o plugin e adicione-o ao seu arquivo de configuração .eslintrc:

npm install --save-dev eslint-config-prettier

{
  "extends": ["some-other-config-you-use", "prettier"]
}

Por fim, assim como fizemos com o Prettier, é útil adicionar um script no package.json para rodar o ESLint:

"scripts": {
  "lint": "eslint ."
}

Isso permite que você utilize npm run lint para verificar seu código em busca de problemas e garantir que ele esteja em conformidade com as regras definidas.

Com o Prettier e o ESLint configurados e integrados ao seu projeto, você está pronto para desfrutar de um código mais limpo, organizado e consistente. Essas ferramentas não apenas economizam tempo, mas também ajudam a manter padrões de qualidade elevados em seus projetos. Experimente essas configurações e veja por si mesmo a diferença que elas podem fazer na sua rotina de desenvolvimento. Happy coding!