Produtividade no Front-end: ESLint e Prettier uma Duplinha Poderosa

Como desenvolvedor de front-end há 4 anos, percebi algo essencial: produtividade não é só sobre escrever código rápido, mas sim sobre escrever código limpo, padronizado e sem perder tempo com detalhes manuais. Se você é um desenvolvedor júnior e quer acelerar sua evolução, conhecer ferramentas como ESLint e Prettier é um passo obrigatório.

Imagine nunca mais perder tempo ajustando espaços, vírgulas, ou procurando aquele erro bobo que travou o código. Com ESLint e Prettier, você automatiza a formatação e previne erros antes mesmo de rodar o projeto. Vamos explorar como essas ferramentas podem turbinar seu fluxo de trabalho e te deixar mais produtivo.

Por que produtividade importa tanto assim?

Produtividade não é só entregar rápido — é entregar certo e com menos retrabalho. Um código padronizado e sem erros facilita a manutenção, melhora o trabalho em equipe e, de quebra, impressiona os recrutadores. Além disso, quando todos os desenvolvedores seguem o mesmo padrão, os conflitos de merge no Git diminuem drasticamente, o que economiza ainda mais tempo e frustração.

Prettier: Formatação automática sem dor de cabeça

O Prettier é seu aliado na formatação. Ele garante que o código fique bonito e padronizado, independente de quem escreve. Quer aspas simples ou duplas? Ponto e vírgula no final ou não? Tabulação com 2 ou 4 espaços? Você define uma vez e o Prettier cuida do resto.

Instalando o Prettier

Primeiro, certifique-se de ter o Node.js instalado. No terminal, rode:

npm init -y
npm install --save-dev prettier

Agora, crie um arquivo .prettierrc para configurar seu estilo favorito:

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

Pronto! Agora, basta rodar npx prettier --write . e o Prettier formatará todos os arquivos do seu projeto.

ESLint: Menos erros, mais qualidade

O ESLint vai além da formatação. Ele analisa o código e aponta erros, más práticas e até códigos esquecidos. Quer se livrar de console.log() perdido? O ESLint te avisa.

Instalando o ESLint

No terminal, rode:

npm install --save-dev eslint
npx eslint --init

Responda às perguntas para configurar o estilo do projeto. Ele criará o arquivo .eslintrc.json. Você pode personalizar as regras, por exemplo:

{
"rules": {
  "no-console": "warn",
  "eqeqeq": "error"
}
}

Isso dará um aviso para console.log() e erro se usar == ao invés de ===.

Integrando ESLint e Prettier

Para evitar que o ESLint e o Prettier entrem em conflito, vamos integrar os dois. Instale os pacotes extras:

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

Agora, edite o .eslintrc.json:

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

Agora, o ESLint respeita o Prettier e reclama se a formatação não estiver de acordo.

Automatizando com hooks de git

Quer garantir que nada vá pro repositório sem estar formatado e validado? Vamos adicionar o Husky e o lint-staged:

npm install --save-dev husky lint-staged

Adicione ao package.json:

"husky": {
"hooks": {
  "pre-commit": "lint-staged"
}
},
"lint-staged": {
"*.{js,jsx,ts,tsx}": [
  "eslint --fix",
  "prettier --write"
]
}

Agora, antes de qualquer commit, seu código será formatado e verificado automaticamente.

Extensões para o VSCode: Mais produtividade ainda

Para tornar sua experiência mais fluida, recomendo instalar as extensões do ESLint e Prettier no VSCode. Assim, a formatação e a análise de erros acontecem em tempo real enquanto você escreve o código. Busque por "ESLint" e "Prettier - Code formatter" na aba de extensões do VSCode e instale ambas. Depois de configurar, seu código estará sempre no padrão e os erros aparecerão no momento em que forem digitados — mais produtividade, menos retrabalho!

Conclusão: Mais produtividade, menos dor de cabeça

Com ESLint e Prettier configurados e integrados, você elimina formatações manuais, previne erros bobos e acelera seu fluxo de trabalho. Um código limpo e padronizado é mais fácil de manter, compartilhar e escalar — e mostra para o mercado que você está um passo à frente.

Que tal dar uma chance a essa dupla e testar no seu próximo projeto?