ESLint vs Prettier: Entenda as Diferenças e Como Usar os Dois Juntos

ESLint e Prettier são duas ferramentas amplamente utilizadas no ecossistema JavaScript e TypeScript. Ambas ajudam a manter a qualidade do código, mas possuem objetivos diferentes e complementares. Compreender essas diferenças é essencial para aplicá-las corretamente em projetos modernos de desenvolvimento web.

O Que É ESLint?

O ESLint é uma ferramenta de análise estática que identifica problemas no código-fonte. Ele permite detectar erros comuns, má formatação lógica e violações de estilo definidas por regras configuráveis. Sua principal função é melhorar a qualidade e a segurança do código.

ESLint suporta:

• Detecção automática de bugs
• Aplicação de boas práticas de programação
• Correção automática de certos tipos de erro
• Regras personalizáveis para diferentes ambientes (React, Node.js, etc.)

Exemplo de Configuração do ESLint

Para configurar o ESLint, crie um arquivo .eslintrc.js na raiz do projeto:

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: [
    'eslint:recommended',
    'plugin:react/recommended',
  ],
  parserOptions: {
    ecmaVersion: 2021,
    sourceType: 'module',
  },
  rules: {
    'no-console': ['warn'],
    'no-debugger': ['error'],
  },
};

Esse exemplo define ambientes, extensões de regras e configurações específicas que ajudam a padronizar o comportamento do ESLint durante a análise do código.

O Que É Prettier?

Prettier é uma ferramenta de formatação de código altamente eficaz e simples de usar. Seu foco está na padronização visual do código, garantindo consistência estética através de regras automáticas de indentação, espaçamento, uso de aspas e outros elementos visuais.

Prettier oferece:

• Formatação automática do código
• Suporte a múltiplas linguagens (JavaScript, TypeScript, CSS, HTML, JSON, entre outros)
• Integração direta com editores como VSCode
• Redução de discussões sobre estilo em equipes

Exemplo de Configuração do Prettier

Para configurar o Prettier, crie um arquivo .prettierrc:

{
  "printWidth": 80,
  "tabWidth": 2,
  "useTabs": false,
  "semi": true,
  "singleQuote": true,
  "trailingComma": "es5",
  "bracketSpacing": true,
  "arrowParens": "always"
}

Essas opções permitem controlar o formato final do código automaticamente, garantindo uniformidade entre os arquivos do projeto.

Principais Diferenças Entre ESLint e Prettier

Característica	ESLint	Prettier
Foco	Análise de qualidade do código	Formatação visual do código
Detecção de Erros	Sim	Não
Correção Automática	Parcial	Completa
Personalização	Alta (regras customizáveis)	Baixa (baseado em princípios de estilo)
Integração com IDE	Sim (com plugins)	Sim (mais simples)

Embora ambos sejam usados para melhorar a qualidade do código, o ESLint age como um verificador de padrões e erros, enquanto o Prettier age como um formatador visual.

Como Integrar ESLint e Prettier

Usar ESLint e Prettier juntos é uma prática recomendada, especialmente em projetos maiores. Para evitar conflitos entre regras, você pode integrar os dois utilizando o pacote eslint-config-prettier.

Passos para Integrar ESLint e Prettier

1. Instale as dependências necessárias:

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

2. Atualize o arquivo .eslintrc.js:

   module.exports = {
     extends: [
       'eslint:recommended',
       'plugin:react/recommended',
       'prettier'
     ]
   };

3. Adicione scripts no package.json:

   {
     "scripts": {
       "lint": "eslint .",
       "format": "prettier --write ."
     }
   }

4. Execute os comandos:

   npm run lint
   npm run format

Essa integração permite validar e formatar o código automaticamente, facilitando a manutenção e colaboração em equipes.

Quando Escolher Um ou Outro

Use ESLint quando:

• Você precisa identificar e prevenir erros no código
• Trabalha em um projeto grande ou em equipe
• Quer aplicar regras personalizadas de estilo e qualidade

Use Prettier quando:

• Você deseja padronizar o estilo visual do código
• Está iniciando um projeto pequeno ou pessoal
• Quer formatação automática com pouca configuração

Considerações Finais

ESLint e Prettier são ferramentas essenciais no desenvolvimento moderno com JavaScript e TypeScript. Enquanto o ESLint se destaca na detecção de erros e aplicação de regras de qualidade, o Prettier é fundamental para garantir uma formatação consistente e padronizada do código.

Ao utilizá-los juntos, é possível manter um alto padrão de qualidade e estética no projeto, facilitando a leitura, manutenção e colaboração em equipes. A integração entre ambos é simples e altamente recomendada, especialmente em projetos escaláveis ou em ambientes colaborativos.

Entender quando e como configurar cada uma dessas ferramentas permite que você aproveite ao máximo seus benefícios, tornando seu fluxo de desenvolvimento mais eficiente e profissional.