Qualidade e empacotamento

Ferramentas que cuidam do seu código

À medida que um projeto cresce, escrever código "na mão" não basta: você precisa de ferramentas que detectem erros, unifiquem o estilo e preparem o código para produção. Vejamos as três famílias principais.

Linters: ESLint

Um linter analisa seu código sem executá-lo e avisa sobre problemas: variáveis sem uso, comparações perigosas (== em vez de ===), erros potenciais e violações das regras de estilo da equipe. O mais usado em JavaScript é o ESLint.

npm install --save-dev eslint
npx eslint src/        # analisa a pasta src
npx eslint src/ --fix  # corrige automaticamente o que puder

O linter detecta coisas como esta antes que elas quebrem em produção:

let total = 5;      // 'total' nunca é usado  -> aviso do linter
if (x = 3) { ... }  // atribuição em vez de comparação?  -> aviso

Formatters: Prettier

Um formatter cuida apenas da aparência do código: indentação, aspas, vírgulas finais, comprimento de linha... Ele não busca erros; reescreve o código com um formato consistente. O padrão é o Prettier.

npm install --save-dev prettier
npx prettier --write .   # reformata todos os arquivos

A diferença chave: o ESLint cuida da qualidade (possíveis bugs), o Prettier do formato (estética). Eles são usados juntos e eliminam discussões sobre estilo nas equipes.

Bundlers: Vite, esbuild, webpack

Seu código-fonte está espalhado em muitos módulos (import/export) e talvez use sintaxe moderna que alguns navegadores não entendem. Um bundler (empacotador) pega todos esses arquivos e:

• os combina em poucos arquivos otimizados,
• minifica o resultado (remove espaços e nomes longos para que pese menos),
• transforma sintaxe moderna em outra compatível,
• gerencia imagens, CSS e outros recursos.

Por isso empacota-se para produção: o navegador baixa menos arquivos e menores, então o site carrega mais rápido. As ferramentas mais usadas são Vite e esbuild (modernas e muito rápidas) e webpack (o clássico).

npm run build   # normalmente dispara o bundler e gera a pasta dist/

Scripts do npm: a cola

Todas essas ferramentas são orquestradas com os scripts do package.json. Em vez de lembrar comandos longos, você os nomeia:

{
  "scripts": {
    "lint": "eslint src/",
    "format": "prettier --write .",
    "build": "vite build",
    "test": "vitest"
  }
}

E você os executa com npm run lint, npm run build, etc. Assim qualquer pessoa da equipe usa exatamente o mesmo fluxo com um comando curto e fácil de lembrar.