Leodario.com

Leodario.com – Tudo sobre Tecnologia

Aula 79 – API JavaScript, Node.js e Express – Code Quality – ESLint, Prettier, Husky

Imagem destacada da aula de API

Introdução (3 min)

Imagine uma orquestra. Cada músico é talentoso, mas sem uma partitura consistente e regras claras, a música seria um caos. No desenvolvimento de software, qualidade de código é a nossa partitura, e ESLint, Prettier e Husky são os nossos maestros. Eles garantem harmonia, legibilidade e consistência, vitais para APIs modernas e robustas.

Nesta aula, vamos implementar ESLint para analisar nosso código JavaScript, Prettier para formatá-lo automaticamente e Husky para garantir a qualidade antes de cada commit. Este trio é imprescindível no ecossistema Node.js/Express, elevando a profissionalidade e a manutenibilidade dos seus projetos.

Conceito Fundamental (7 min)

ESLint é uma ferramenta de análise estática de código que identifica potenciais problemas, desde erros de sintaxe até violações de estilo. Ele ajuda a evitar bugs e a manter um código limpo e consistente, seguindo as melhores práticas da indústria. Prettier, por sua vez, formata automaticamente o código, eliminando discussões sobre estilo e garantindo uniformidade visual. Husky atua como um “porteiro”, executando comandos em momentos específicos do Git, como antes de um commit ou push. Isso possibilita automatizar tarefas como a execução do ESLint e do Prettier, assegurando que apenas código formatado e analisado chegue ao repositório.

Em produção, esse conjunto de ferramentas é valioso para projetos de qualquer escala. Imagine um time com dezenas de desenvolvedores. ESLint e Prettier garantem que todos escrevam código no mesmo “dialeto”, facilitando a colaboração e reduzindo o tempo gasto com revisões de código. Husky reforça essas práticas, impedindo que código não conforme seja integrado ao projeto.

As vantagens são claras: código mais limpo, menos bugs, maior produtividade e colaboração simplificada. A principal desvantagem pode ser o tempo inicial de configuração, mas o retorno sobre investimento é altíssimo a longo prazo.

Implementação Prática (10 min)

Vamos criar um pequeno servidor Express e integrar ESLint, Prettier e Husky.

npm init -y
npm install express eslint prettier husky

// index.js
const express = require('express');
const app = express();
const port = 3000;

app.get('/', (req, res) => { // ESLint vai reclamar deste estilo sem ponto e vírgula res.send('Olá, mundo!') })

app.listen(port, () => { console.log(Servidor rodando em http://localhost:${port}); });

npx eslint --init

Selecione as opções de acordo com seu projeto. Recomendo as seguintes:

📚 Informações da Aula

Curso: API Completo - Node.js & Express

Tempo estimado: 25 minutos

Pré-requisitos: JavaScript básico

- To check syntax, find problems, and enforce code style

- JavaScript modules (import/export)

- Node

- Yes, I use TypeScript (se aplicável)

- Browser

- Use a popular style guide

- Airbnb (ou Standard, a seu gosto)

- JavaScript

- npm

npm install --save-dev eslint-config-airbnb-base eslint-plugin-import

ou Standard: npm install --save-dev eslint-config-standard eslint-plugin-node eslint-plugin-promise eslint-plugin-import

// package.json (adicione os scripts)
{
  "scripts": {
    "lint": "eslint .",
    "lint:fix": "eslint --fix .",
    "format": "prettier --write ."
  }
}

npx husky install
npx husky add .husky/pre-commit "npm run lint && npm run format"

Agora, antes de cada commit, o Husky executará o ESLint e o Prettier, garantindo a qualidade do código.

Exercício Hands-On (5 min)

1. Crie uma nova rota/users que retorne um array de usuários.

2. Introduza um erro de estilo no novo código, como a falta de ponto e vírgula ou espaçamento inconsistente.

3. Tente fazer um commit. Observe que o Husky impedirá o commit até que os erros sejam corrigidos.

4. Execute npm run lint:fix e npm run format para corrigir os erros automaticamente.

5. Faça o commit novamente. Agora o commit deve ser bem-sucedido.

Troubleshooting: Se o Husky não estiver funcionando, verifique se o arquivo .husky/pre-commit tem permissão de execução (chmod +x .husky/pre-commit).

Próximos passos: Explore outras regras do ESLint e configure o Prettier de acordo com suas preferências. Integre essas ferramentas ao seu fluxo de trabalho de CI/CD para garantir qualidade em todas as etapas do desenvolvimento.

🚀 Pronto para a próxima aula?

Continue sua jornada no desenvolvimento de APIs e domine Node.js & Express!

📚 Ver todas as aulas